Published on

BiomeJS - L'alternative à ESLint et Prettier qui va révolutionner tes projets

Authors
  • avatar
    Name
    Clément Le Biez
    Twitter

Si tu développes en JavaScript depuis quelques années, je suis prêt à parier que tu as passé au moins une journée entière de ta vie à te battre avec la configuration de ESLint et Prettier. Ces outils sont devenus incontournables dans l'écosystème JS, mais avouons-le : ils peuvent être une vraie prise de tête.

Logo de BiomeJS

BiomeJS est un méta-outil JavaScript qui vient remplacer ESLint et Prettier en un seul coup. Écrit en Rust (oui, comme de plus en plus d'outils modernes), c'est un linter, un formateur, un organiseur d'imports...

BiomeJS a été complètement repensé pour résoudre les problèmes que nous rencontrons quotidiennement avec les outils existants.

Il est compatible à 97% avec Prettier et possède 293 règles tirées d'ESLint, TypeScript Eslint et autres plugins.

ESLint et Prettier : Te simplifier la vie de manière compliquée

Avant de vanter les mérites de Biome, faisons un petit point sur les problèmes que posent ESLint et Prettier.

La configuration d'ESLint peut rapidement devenir un cauchemar. Voici un exemple typique d'un fichier .eslintrc.js :

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // Et la liste continue sur 50 lignes...
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

Dans la vraie vie, on se retrouve souvent avec des configurations bien plus complexes et des tonnes de plugins à rajouter.

Tu as d'ailleurs probablement déjà vécu cette situation où ESLint et Prettier se battent pour formatter ton code. ESLint veut mettre les guillemets simples, Prettier veut des guillemets doubles... C'est pour ça qu'on utilise généralement eslint-config-prettier et eslint-plugin-prettier pour les faire cohabiter, mais ça ajoute encore une couche de complexité.

Et puis, il y a ces fameux breaking changes qui te cassent tout. Tu as un projet qui tourne parfaitement, depuis des mois...

Tu fais un petit npm update innocent, et soudain le drame, 600 erreurs, un fichier de config déprécié et une grosse perte de temps pour fixer tout cela.

Oui, ces outils te simplifient la vie, mais les changements de directions et les grosses mises à jour au fil des versions tendent vraiment à générer de la dette dans les projets existants et ont eu raison de mon engouement pour ces 2 outils pourtant incontournables.

Pourquoi BiomeJS est la solution

La configuration de BiomeJS est incroyablement simple. Voici un exemple typique :

{
  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

Cette configuration fait déjà plus que ce que tu pourrais accomplir avec plusieurs centaines de lignes de configuration ESLint + Prettier et toute une floppée de plugins variés.

Elle est d'ailleurs vraiment bien pensée puisqu'elle inclut par défaut toutes les bonnes règles de performances, de lecture de code, d'accessibilité et toutes les bonnes pratiques qui font que ton projet reste en bonne santé. Biome intègre aussi un système t'aidant à ordonner tes importations.

Tout ce que tu as à faire, c'est de taper la commande biome check pour lister toutes les erreurs de lint, de formattage et d'ordre de tes importations.

Pour fixer, il te suffira de taper biome check --fix.

Une autre force de BiomeJS réside dans ses messages d'erreur. Ils sont clairs, précis et te guident souvent vers la solution :

Message d'erreur BiomeJS

Des performances au top !

Parlons performances maintenant, parce que c'est là que BiomeJS brille vraiment.

BiomeJS est 35 fois plus rapide que Prettier et 15 fois plus rapide que ESLint.

Comparaison de performances entre Prettier et BiomeJS

Cette performance vient principalement du fait que BiomeJS est écrit en Rust, un langage compilé beaucoup plus performant que JavaScript pour ce type de tâches.

Comment migrer vers BiomeJS ?

La migration vers BiomeJS est étonnamment simple. Voici les étapes principales :

  1. Installation :
npm install --save-dev @biomejs/biome
  1. Création d'une configuration de base :
npx biome init
npx biome migrate eslint --write
npx biome migrate prettier --write

Et voilà, bienvenue dans une nouvelle ère.

Limitations actuelles

Soyons honnêtes, BiomeJS est encore jeune et il a quelques limitations :

  • Certaines configurations très avancées ou spécifiques peuvent ne pas avoir d'équivalent direct. Mais je n'ai pas rencontré ce problème de mon côté.
  • Le système de plugin de Biome est en Beta. Faire ton propre plugin peut donc être un peu plus complexe.
  • C'est un projet plus jeune, tu peux donc rencontrer des petits bugs, dans mon cas mon serveur Biome a crashé plusieurs fois sur VSCode au début.

Mon retour d'expérience

J'ai profité de la rédaction de cet article pour passer ce site web sous Biome. Je n'ai pas souhaité migrer la configuration d'ESLint car je ne la comprenais plus vraiment.

Je voulais aussi profiter au maximum des règles par défaut qui m'ont l'air vraiment bien pensées. Dans mon cas, j'ai juste eu à initialiser la config de base, à rajouter mes dossiers à ignorer, et à tout fixer. Il me restait ensuite 18 petites erreurs dont il ne pouvait s'occuper lui-même. Principalement des conseils afin d'améliorer l'accessibilité de mon site.

C'est définitivement un must-have pour moi dorénavant.

D'ailleurs, si tu as testé BiomeJS, je suis très preneur de ton avis sur la question en commentaire !

Discutons-en sur BlueSky