Biome : le couteau suisse qui remplace ESLint + Prettier

Vous en avez marre des outils front pour analyser votre JS et votre CSS ? Marre des séances de tortures pour paramétrer tout ça ? Marre d'attendre que votre RAM parte ranger la forêt et vous oublie ?

Bonne nouvelle : Biome arrive, et contrairement à 99% des outils JavaScript, celui-là fait vraiment ce qu'il dit. Il fait tout ça, en moins verbeux et plus rapide.

Biome, c'est quoi ?

Biome, c'est un outil qui fait enfin ce qu'on lui demande :

• Un formatter comme Prettier, mais sans bugs
• Un linter comme ESLint, mais sans la complexité d'un réacteur nucléaire
• Un analyseur statique qui analyse vraiment
• Un « sorteur » d'imports qui fonctionne dans 15 plugins
• Une CLI qui va plus vite que les promesses d'un politicien en campagne

Le tout packagé en un seul binaire : pas besoin d'intaller tout internet : c'est Scully qui doit être contente.

Pourquoi Biome écrase ESLint + Prettier

• Un seul binaire au lieu de 47 outils qui se marchent dessus
• Une seule config au lieu d'un .eslintrc de 300 lignes
• Des règles cohérentes
• C'est rapide , genre vraiment rapide

Est-ce que ça remplace 100% de l'écosystème ESLint ? Bien sûr que non ! Dans 90% des cas, Biome fait le taf, et dans les 10% restants, vous devriez peut-être vous poser des questions.

Installer cette merveille dans Symfony

Dans Symfony, on utilise le bundle kocal/biome-js-bundle. Pourquoi ? Parce que quelqu'un a eu la brillante idée de faire un truc qui marche dès la première installation.

Étapes :

Installez le bundle :

composer require --dev kocal/biome-js-bundle

Configurez la version :

# config/packages/dev/kocal_biome_js.yaml
when@dev:
    kocal_biome_js:
        binary_version: '2.0.0'

Le bundle va chercher le bon binaire automatiquement et l'installe.

La config biome.json :

{
    "formatter": {
        "indentStyle": "space",
        "indentWidth": 4,
        "lineWidth": 100
    },
    "javascript": {
        "formatter": {
            "quoteStyle": "single",
            "semicolons": "always",
            "trailingCommas": "all"
        }
    },
    "css": {
        "formatter": {
            "quoteStyle": "single"
        }
    },
    "linter": {
        "rules": {
            "complexity": {
                "useArrowFunction": "off"
            }
        }
    },
    "files": {
        "includes": [
            "**",
            "!assets/vendor/*",
            "!public/assets/*",
            "!var/*",
            "!vendor/*"
        ]
    }
}

Ajoutez ça à votre Makefile :

qa-fix-js-css: ## Réparer le code JavaScript/CSS
	@bin/biome check . --write

qa-lint-js-css: ## Vérifier le code JavaScript/CSS  
	@bin/biome check .

Les commandes qui changent la vie

• Vérifier son code : bin/biome check .
• Réparer automatiquement : bin/biome check . --write
• Juste formater : bin/biome format . --write
• Voir la config : bin/biome config

Avant/Après

JavaScript transformé

Avant :

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

      // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/.d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
    <em>
  { greeted }
    </em>
    { (silent)
      ? "."
      : "!"}

    </div>;
}

Après :

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1E+7)
    .toString()
    .replace(/.d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

Imports triés

Avant :

import z from './z.js'
import React from 'react'
import {b, a} from './utils'
import fs from 'fs'

Après :

import fs from 'fs';

import React from 'react';

import { a, b } from './utils';
import z from './z.js';

Biome trie, sépare, et organise vos imports.

CSS rendu humain

Avant :

.button{color:#333;padding:8px 12px}

Après :

.button {
    color: #333;
    padding: 8px 12px;
}

Migration depuis l'enfer ESLint + Prettier

• Archivez vos configs
• Installez Biome, lancez check --write
• Arrêtez de faire tourner les deux : ESLint + Biome en même temps, c'est comme porter un slip ET un caleçon : inutile et inconfortable.

Conventions : soyez fermes

Biome a des opinions tranchées. Acceptez-les :

• semicolons "always" = fini les débats de comptoir
• trailingCommas "all" = diffs plus propres
• quoteStyle "single" = lisible et pratique
• lineWidth à 100 = sweet spot universel

Avec Symfony Asset Mapper

Configuration classique pour Symfony :

{
  "files": {
    "includes": [
      "assets/**",
      "!public/assets/**",
      "!vendor/**",
      "!var/**"
    ]
  }
}

On scanne uniquement les sources !

Le mot de la fin

Biome c'est l'outil qui vous fait arrêter de vous prendre la tête avec le formatage. Il remplace Prettier + une bonne partie d'ESLint, il va vite, et il marche. Avec le bundle Symfony, l'installation prend 1 minute.

Liens utiles

• Biome : Le site de Biome
• kocal/biome-js-bundle : Le bundle pour intégrer Biome à Symfony