ultracite

Ultrazit

Ultracite ist eine robuste Linting-Konfiguration für moderne TypeScript-Apps, die auf Biome basiert. Es ist unglaublich eigensinnig und streng und erzwingt ein Höchstmaß an Typsicherheit und Codequalität. Sobald Ultracite eingerichtet ist, wird Ihr Code beim Speichern automatisch gelintet, korrigiert und formatiert.

Installation

Führen Sie den folgenden Befehl aus, um Ultracite zu installieren:

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

Wenn Sie VS Code ausführen, stellen Sie sicher, dass die folgenden Erweiterungen installiert sind:

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

Aufstellen

Erstellen Sie eine biome.json mit folgendem Inhalt:

{ "extends" : [ " ultracite " ] }

Ultracite ist für die Verwendung mit VS-Code konzipiert. Erstellen Sie eine .vscode/settings.json Datei mit den folgenden Inhalten, um die vollständige Formatierung und Korrektur beim Speichern zu ermöglichen:

{
  "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 "
  }
}

Stellen Sie abschließend sicher, dass Ihre tsconfig.json (sofern vorhanden) Ihre neue ESLint-Konfiguration enthält und dass strictNullChecks aktiviert ist.

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

Verwendung

Ultracite lintet, korrigiert und formatiert Ihren Code beim Speichern automatisch. Wenn Sie Ultracite manuell ausführen möchten, können Sie dies mit dem folgenden Befehl tun:

npx ultracite

Konfiguration

Während Ultracite so konzipiert ist, dass es keine Konfiguration erfordert, können Sie in Ihrer biome.json Datei alles ändern, was Sie möchten. Um beispielsweise die noAutofocus -Regel zu aktivieren, können Sie Folgendes tun:

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

Sie können Regeln auch zeilenweise deaktivieren, indem Sie am Ende der Zeile einen Kommentar hinzufügen:

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

Notizen

Ultracite wurde zuvor auf ESLint, Prettier und Stylelint aufgebaut. Wenn Sie diesen Stack verwenden möchten, können Sie mit dem folgenden Befehl eine kompatible Version von Ultracite installieren:

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