Biome.js : Linter/Formatter Tout-en-Un

Pourquoi utiliser Biome.js ?

Dans l'écosystème JavaScript et TypeScript, on utilise souvent plusieurs outils pour gérer le linting et le formatage de notre code, genre : ESLint, Prettier, et d'autres. Ça peut vite devenir complexe à configurer pour avoir un bon workflow, il faut rajouter tout plein de plugins ESLint, etc. Ou bien ajouter des fichiers de configuration, comme .eslintrc.js, .prettierrc.js, .editorconfig, etc. Avec Biome, c'est fini ! 🔥

Passer à Biome, c'est comme faire un régime pour vos dépendances : 9 libs en moins, et votre projet se sent déjà plus léger !

Avantages clés de Biome.js :

• Un seul outil pour le linting et le formatage.
• Performance élevée grâce à Rust.
• Configuration minimale par rapport à des outils comme ESLint et Prettier.
• Prise en charge native de TypeScript, sans configuration supplémentaire.
• Réduction des dépendances dans votre projet.

Parlons perfomance

Juste pour m'amuser je me suis dit "vas-y je vais linter avec Biome" le repo de Shadcn/ui qu'on connaît tous.

Voici le résultat sans appel :

Biome fait le job en 783ms, là où ESLint et Prettier prennent 13 secondes à deux ! C’est comme comparer un TGV à un tandem rouillé.

Configuration

Installez Biome dans votre projet:

pnpm add --save-dev --save-exact @biomejs/biome

Initialisez un fichier biome.json:

pnpm biome init

Dans ce fichier biome.json, vous pouvez configurer vos propres règles, voici la mienne optimisée pour React :

{
  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true,
    "defaultBranch": "main"
  },
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedImports": "warn",
        "noUndeclaredVariables": "error",
        "noUnusedVariables": "error",
        "useExhaustiveDependencies": "warn"
      },
      "suspicious": {
        "noConsoleLog": "warn",
        "noEmptyBlockStatements": "error"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "options": {
            "attributes": ["className"],
            "functions": ["cn", "cva"]
          },
          "fix": "safe"
        }
      }
    },
    "ignore": ["sanity.types.ts"]
  },
  "javascript": {
    "globals": ["React"]
  },
  "files": {
    "ignore": ["node_modules", "public", ".next"]
  }
}

Installez l'extension Biome pour VS Code et définissez Biome en tant qu'éditeur par défaut soit dans votre settings.json, soit dans le dossier .vscode/settings.json :

{
  "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc][css][graphql]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "quickfix.biome": "explicit",
      "source.organizeImports.biome": "explicit"
    }
  }
}

Et maintenant ajoutez les scripts, voici mes favoris

{
  //...
  "scripts": {
    "check": "biome check",
    "check:fix": "biome check --fix",
    "check:ci": "biome ci --reporter=github",
    "lint": "biome lint",
    "lint:fix": "biome lint --fix",
    "format": "biome format",
    "format:fix": "biome format --fix",
    //...
  }
}

Et c'est tout ! 🎉

J'ai aussi créé un petit package biome-config pour installer et configurer automatiquement le biome.json, ainsi que pour ajouter les scripts au package.json. Il est dispo sur npm, voir mon repo.

Conclusion

Je ne peux plus m'en passer et j'espère vous avoir convaincu de l'utiliser ou au moins de l'essayer. Enjoy ⚡️