ultracite

超鈣石

Ultracite 是基於 Biome 建構的現代 TypeScript 應用程式的強大 linting 配置。它非常固執和嚴格，強制執行最大程度的類型安全和程式碼品質。 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