ultracite

ウルトラサイト

Ultracite は、Biome 上に構築された、最新の TypeScript アプリ向けの堅牢な lint 設定です。これは信じられないほど意見が強く厳格で、型の安全性とコードの品質を最大限に強化します。 Ultracite がセットアップされると、保存時にコードが自動的にリントされ、修正され、フォーマットされます。

インストール

以下のコマンドを実行して Ultracite をインストールします。

pnpm add -D --save-exact ultracite @biomejs/biome

VS Code を実行している場合は、次の拡張機能がインストールされていることを確認してください。

code --install-extension biomejs.biome
code --install-extension bradlc.vscode-tailwindcss

設定

次の内容のbiome.jsonを作成します。

{ "extends" : [ " ultracite " ] }

Ultracite は、VS Code で使用するように設計されています。完全な書式設定と保存時の修正を有効にするには、次の内容を含む.vscode/settings.jsonファイルを作成します。

{
  "typescript.tsdk" : " node_modules/typescript/lib " ,
  "editor.defaultFormatter" : " biomejs.biome " ,
  "editor.formatOnSave" : true ,
  "editor.formatOnPaste" : true ,
  "emmet.showExpandedAbbreviation" : " never " ,
  "editor.codeActionsOnSave" : {
    "quickfix.biome" : " explicit " ,
    "source.organizeImports.biome" : " explicit "
  },
  "[typescript]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[json]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[javascript]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[jsonc]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[typescriptreact]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  }
}

最後に、 tsconfig.json (存在する場合) に新しい ESLint 構成が含まれていること、およびstrictNullChecksが有効になっていることを確認します。

{
  "compilerOptions" : {
    "strictNullChecks" : true
  }
}

使用法

Ultracite は、保存時にコードを自動的にリントし、修正し、フォーマットします。 Ultracite を手動で実行したい場合は、次のコマンドを使用して実行できます。

npx ultracite

構成

Ultracite は設定不要で設計されていますが、 biome.jsonファイル内で必要なものを変更できます。たとえば、 noAutofocusルールを有効にするには、次の操作を実行できます。

{
  "extends" : [ " ultracite " ],
  "linter" : {
    "rules" : {
      "a11y" : {
        "noAutofocus" : " off "
      }
    }
  }
}

行の末尾にコメントを追加することで、行ごとにルールを無効にすることもできます。

 // biome-ignore lint/security/noDangerouslySetInnerHtml: I do what I want mate.
< div dangerouslySetInnerHTML = { { ... } } / > 

注意事項

Ultracite は以前、ESLint、Prettier、Stylelint に基づいて構築されていました。そのスタックを使用したい場合は、次のコマンドを使用して、互換性のあるバージョンの Ultracite をインストールできます。

pnpm add -D ultracite@3 eslint@8 prettier stylelint typescript jest