Oxlint x Prettier : L'approche moderne pour démarrer son projet JavaScript

Publié sur dev.to et medium.com

L'écosystème JavaScript évolue rapidement, et avec lui, les outils de développement. Alors qu'ESLint a longtemps dominé le paysage du linting, une nouvelle alternative révolutionnaire fait son apparition : The JavaScript Oxidation Compiler, plus connu sous l'acronyme "OXC" (ou encore "Oxlint").

Il est très facile d'initialiser un nouveau projet JavaScript ; il suffit d'un éditeur de code, d'un environnement d'exécution, d'un terminal, et le tour est joué !

De la même manière, il est tout aussi facile de ruiner un projet Web en rendant le code illisible, non maintenable, et en générant ainsi de la dette technique...

En effet, JavaScript étant un langage faiblement typé* (*les types sont déterminés tardivement à l'exécution), tout est permis :

• Omettre les points-virgules en fin de ligne ;
• Utiliser des guillemets simples et doubles dans un même bloc de code ;
• Déclarer des variables sans les utiliser ;
• Des lignes de code trop longues...

Cette flexibilité du langage est à la fois une force et une faiblesse, qu'il faut pallier en définissant des bonnes pratiques avant d'entamer le développement. Ainsi, un code correctement structuré favorisera le travail collaboratif et l'évolutivité du projet.

Pour y parvenir, deux outils essentiels vont apporter de la rigueur à votre projet Web : le linter et le formater.

Définitions :

Linter : Outil d'analyse de code qui détecte les problèmes de syntaxe.

Formater : Outil qui formate le code pour le rendre lisible.

NB : J'insiste sur le fait qu'il s'agit de deux outils distincts. Bien que le linter puisse formater certaines parties du code, ce n'est pas son rôle. Cette tâche est réservée au formater.

Le compilateur d'oxydation JavaScript ⚓

OXC fait partie de l'écosystème VoidZero, fondé par Evan You (créateur de VueJS) en Septembre 2024. L'équipe VoidZero reconstruit méthodiquement la chaîne d'outils JavaScript depuis la base, en se concentrant sur les performances, la compatibilité et l'expérience développeur.

OXC est 50 à 100 fois plus rapide qu'ESLint selon le nombre de règles et de cœurs CPU utilisés. Il se termine en moins d'une seconde pour la plupart des bases de code avec quelques centaines de fichiers, et se termine en quelques secondes pour les projets plus importants.

OXC est un linter alimenté par Rust pour JavaScript et TypeScript conçu pour être rapide et simple à adopter. Depuis sa première annonce en Décembre 2023, le projet a subi des améliorations significatives et livre maintenant sa première version stable.

Démarrer votre projet JavaScript

Pour illustrer le fonctionnement de chaque outil, je propose de créer un nouveau projet JavaScript (sans framework) en utilisant ViteJS.

npm create vite@latest my-awesome-project -- --template vanilla-ts

Comme une recette de cuisine, installons les dépendances initiales fournies avec ViteJS, puis ajoutons les nouvelles bibliothèques : Oxlint et Oxfmt !

npm install --save-dev oxlint oxfmt

Une fois les dépendances du linter et du formater correctement installées, vous devez encore créer leurs fichiers de configuration respectifs : .oxlintrc.json et .oxfmtrc.json (le format .jsonc est aussi supporté).

Configuration du Linter

Commençons par configurer le linter pour l'utiliser dans notre nouveau projet.

Voici une version initiale du fichier .oxlintrc.json :

{
  "env": {
    "browser": true,
    "node": true
  },
  "ignorePatterns": ["dist/**", "node_modules/**", "*.config.js"],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

Cette première configuration est suffisante pour exécuter Oxlint (a.k.a "OXC") depuis un nouveau terminal afin de vérifier la syntaxe des fichiers JavaScript : npx oxlint [file|dir]

Je recommande d'ajouter cette exécution comme script dans votre package.json : npm run lint

{
  "name": "my-awesome-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "oxlint src"
  },
  "devDependencies": {
    "oxfmt": "^0.16.0",
    "oxlint": "^1.31.0",
    "vite": "^7.2.5"
  }
}

En ajoutant une instruction console.log() dans un fichier .ts de votre projet, vous devriez obtenir le résultat suivant après avoir invoqué le linter.

  ⚠ eslint(no-console): Unexpected console statement.
   ╭─[src/counter.ts:5:5]
 4 │     counter = count;
 5 │     console.log(`count is ${counter}`);
   ·     ───────────
 6 │     element.innerHTML = `count is ${counter}`;
   ╰────
  help: Delete this console statement.

Found 1 warning and 0 errors.

NB : OXC possède une configuration de règles par défaut. Certaines proviennent d'ESLint, d'autres pour gérer TypeScript, et d'autres encore sont exclusives à OXC. Pour en savoir plus : npx oxlint --rules.

Configuration de Prettier

Maintenant, configurons le formateur en éditant le fichier .oxfmtrc.json :

{
  "arrowParens": "avoid",
  "bracketSameLine": true,
  "printWidth": 120,
  "singleAttributePerLine": true,
  "singleQuote": true,
  "trailingComma": "none"
}

NB : Oxfmt supporte la configuration de Prettier par défaut, vous pouvez donc passer de l'un à l'autre facilement. Dans le fichier ci-dessus, je ne redéfinis que les paramètres que je souhaite pour mon projet.

Tout comme "Oxlint", il suffit maintenant d'exécuter "Oxfmt" (npx oxfmt [file|dir]) pour formater les fichiers JavaScript/TypeScript.

Il est préférable d'enregistrer un nouveau script dans votre package.json : npm run format

{
  "name": "my-awesome-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "oxlint src",
    "format": "oxfmt src"
  },
  "devDependencies": {
    "oxfmt": "^0.16.0",
    "oxlint": "^1.31.0",
    "vite": "^7.2.5"
  }
}

Oxlint x Prettier : L'approche moderne

Contrairement à ESLint qui nécessite des plugins complexes pour intégrer Prettier, OXC adopte une approche plus simple et moderne. Le linter conçu pour détecter le code erroné ou inutile sans nécessiter de configurations par défaut.

L'idée est de laisser OXC se concentrer sur ce qu'il fait de mieux : l'analyse statique ultra-rapide du code, tandis que Prettier gère exclusivement le formatage. Il peut être intéressant d'exécutez les deux outils en parallèle pour une vérification complète.

Ajoutons un script qui combine les deux outils :

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "oxlint src",
    "lint:format": "oxlint src && oxfmt --check src",
    "format": "oxfmt src"
  }
}

Plus besoin de gérer les conflits entre règles ESLint et Prettier. Chaque outil a sa responsabilité bien définie.

NB : Si vous souhaitez conserver Prettier, depuis sa version 3.6, il est possible d'aller plus loin dans cette nouvelle approche en utilisant le plugin officiel @prettier/plugin-oxc. Ce plugin permet à Prettier d'utiliser directement le parser Rust d'OXC, afin d'améliorer sa vitesse d'exécution.

Conclusion

La combinaison "Oxlint" + "Oxfmt" représente l'évolution naturelle des outils de qualité de code JavaScript/TypeScript. En séparant clairement les responsabilités et en misant sur la performance, cette approche offre une expérience développeur supérieure tout en maintenant la rigueur nécessaire à un projet professionnel.

Pour aller plus loin, je vous invite à installer l'extension OXC (et d'activer les fonctionnalités expérimentales : oxc.fmt.experimental). Ainsi, vous bénéficierez de fonctionnalités supplémentaires telles que la coloration syntaxique lorsque les règles de linting ne sont pas respectées, ou le formatage automatique du code lors de l'enregistrement du fichier.

Enjoy 👍