Biome.js, une chaîne d'outils pour formater et lint votre projet web

J'ai découvert que t3-env utilise Biomejs à des fins de peluchage. Cet article donne un aperçu de Biomejs et de son utilisation dans t3-env.

Biome.js

Biome.js est une chaîne d'outils pour votre projet web. Cela aide au formatage et au peluchage de votre projet.

Démarrage rapide

1. Installation

npm install - save-dev - save-exact @biomejs/biome

2. Configuration

npx @biomejs/biome init

Lorsque vous exécutez la commande ci-dessus, elle crée automatiquement le fichier biome.json. Ci-dessous le code généré par défaut lors de votre exécution

la commande ci-dessus dans biome.json.

{
 "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
 "vcs": {
 "enabled": false,
 "clientKind": "git",
 "useIgnoreFile": false
 },
 "files": { "ignoreUnknown": false, "ignore": [] },
 "formatter": { "enabled": true, "indentStyle": "tab" },
 "organizeImports": { "enabled": true },
 "linter": {
 "enabled": true,
 "rules": { "recommended": true }
 },
 "javascript": { "formatter": { "quoteStyle": "double" } }
}

Le linter.enabled: true active le linter et les règles.recommended: true active les règles recommandées. Cela correspond aux paramètres par défaut.

Le formatage est activé par défaut, mais vous pouvez le désactiver en utilisant explicitement formatter.enabled : false.

3. Commandes du biome

a. format

Vous pouvez formater des fichiers et des répertoires à l'aide de la commande format avec l'option — write :

npx @biomejs/biome format - write <files>

b. peluche

Vous pouvez lint et appliquer des correctifs sûrs aux fichiers et répertoires à l'aide de la commande lint avec l'option — write :

npx @biomejs/biome lint - write <files>

c. vérifier

Vous pouvez exécuter les deux, formater et lier, en tirant parti de la commande check :

npx @biomejs/biome check - write <files>

Utilisation de Biome.js dans t3-env

1. Scripts dans package.json

"lint": "biome check .",
"lint:fix": "biome check . - apply",

Ceci utilise la commande check CLI qui applique le formatage et le peluchage. Il existe cependant une variante, lint vérifie uniquement les problèmes de peluchage, mais lorsque vous effectuez lint:fix, il est exécuté avec — apply.

— appliquer — Alias ​​pour — écrire, écrit des correctifs sécurisés, le formatage et le tri des importations (obsolète, utiliser — écrire)

2. biome.json

{
 "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
 "organizeImports": {
 "enabled": true
 },
 "formatter": {
 "enabled": true,
 "indentWidth": 2,
 "indentStyle": "space"
 },
 "linter": {
 "enabled": true,
 "rules": {
 "recommended": true,
 "a11y": {
 "noSvgWithoutTitle": "off",
 "useButtonType": "off",
 "useAltText": "off"
 },
 "complexity": {
 "noBannedTypes": "off"
 },
 "style": {
 "useImportType": "error",
 "useExportType": "error"
 }
 }
 },
 "overrides": [
 {
 "include": ["**/*.test.ts"],
 "linter": {
 "rules": {
 "suspicious": {
 "noExplicitAny": "off"
 }
 }
 }
 }
 ],
 "vcs": {
 "enabled": true,
 "clientKind": "git",
 "useIgnoreFile": true
 }
}

À propos de nous :

Chez Thinkthroo, nous étudions les grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants réutilisables, construits avec tailwind, que vous pouvez utiliser dans votre projet. Nous proposons des services de développement Next.js, React et Node.

Prenez rendez-vous avec nous pour discuter de votre projet.

Références :

1. https://biomejs.dev/

2. https://github.com/t3-oss/t3-env/blob/main/biome.json

3. https://github.com/t3-oss/t3-env/blob/main/package.json#L10

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!