ultracite

Ultracite

Ultracite est une configuration de peluchage robuste pour les applications TypeScript modernes, construites sur Biome. Il est incroyablement avisé et strict, appliquant le maximum de sécurité des types et de qualité du code. Une fois Ultracite configuré, il peluchera, corrigera et formatera automatiquement votre code lors de l'enregistrement.

Installation

Exécutez la commande ci-dessous pour installer Ultracite :

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

Si vous exécutez VS Code, assurez-vous que les extensions suivantes sont installées :

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

Installation

Créez un biome.json avec le contenu suivant :

{ "extends" : [ " ultracite " ] }

Ultracite est conçu pour être utilisé avec VS Code. Créez un fichier .vscode/settings.json avec le contenu suivant pour activer le formatage complet et la correction lors de l'enregistrement :

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

Enfin, assurez-vous que votre tsconfig.json (s'il existe) inclut votre nouvelle configuration ESLint et que strictNullChecks est activé.

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

Usage

Ultracite peluchera, corrigera et formatera automatiquement votre code lors de l'enregistrement. Si vous souhaitez exécuter Ultracite manuellement, vous pouvez le faire avec la commande suivante :

npx ultracite

Configuration

Bien qu'Ultracite soit conçu pour être sans configuration, vous pouvez modifier tout ce que vous souhaitez dans votre fichier biome.json . Par exemple, pour activer la règle noAutofocus , vous pouvez procéder comme suit :

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

Vous pouvez également désactiver les règles ligne par ligne en ajoutant un commentaire à la fin de la ligne :

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

Remarques

Ultracite était auparavant construit sur ESLint, Prettier et Stylelint. Si vous souhaitez utiliser cette pile, vous pouvez installer une version compatible d'Ultracite avec la commande suivante :

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