Maison > interface Web > js tutoriel > Biome.js, une chaîne d'outils pour formater et lint votre projet web

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

Patricia Arquette
Libérer: 2024-12-03 00:43:10
original
444 Les gens l'ont consulté

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
Copier après la connexion

2. Configuration

npx @biomejs/biome init
Copier après la connexion

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" } }
}
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

Utilisation de Biome.js dans t3-env

  1. Scripts dans package.json
"lint": "biome check .",
"lint:fix": "biome check . - apply",
Copier après la connexion

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
 }
}
Copier après la connexion

À 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.

Biome.js, a toolchain to format and lint your web project

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal