Linter et Prettier

Pourquoi utiliser un linter et un formateur de code ?

Lorsque vous travaillez sur un projet, surtout en équipe, il est crucial de maintenir une qualité et une cohérence dans le code. Les linters et les formateurs de code sont des outils qui vous aident à y parvenir :

• Linter : Analyse votre code pour détecter des erreurs, des problèmes potentiels et des violations des conventions de style.
• Formateur : Reformate automatiquement votre code selon des règles prédéfinies pour assurer une cohérence/identité visuelle.

ESLint

ESLint est l'outil de linting le plus populaire pour JavaScript et TypeScript. Il permet de détecter et de corriger les problèmes dans votre code.

Installation d'ESLint

Commencez par installer ESLint et ses dépendances :

npm init @eslint/config@latest

Configuration d'ESLint

Après l'initialisation, vous aurez un fichier eslint.config.mjs (ou .json ou .yml) dans votre projet. Vous pouvez personnaliser davantage les règles selon vos besoins :

// eslint.config.mjs
import globals from 'globals'
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'

/** @type {import('eslint').Linter.Config[]} */
export default [
    { files: ['**/*.{js,mjs,cjs,ts}'] },
    { languageOptions: { globals: globals.node } },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    {
        rules: {
            '@typescript-eslint/no-unused-vars': 'off',
            'no-debugger': 'error',
            'no-console': 'error',
        },
    },
]

Ignorer des fichiers

Créez un fichier .eslintignore pour exclure certains fichiers ou répertoires du linting :

node_modules
dist
build
coverage

Prettier

Prettier est un formateur de code qui impose un style cohérent à travers votre base de code.

Installation de Prettier

npm install -D prettier

• prettier : Le formateur lui-même
• eslint-config-prettier : Désactive les règles ESLint qui pourraient entrer en conflit avec Prettier
• eslint-plugin-prettier : Exécute Prettier comme une règle ESLint

Configuration de Prettier

Créez un fichier .prettierrc à la racine de votre projet :

{
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false,
  "printWidth": 80,
  "tabWidth": 2,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always"
}

Ignorer des fichiers avec Prettier

Créez un fichier .prettierignore pour exclure certains fichiers du formatage :

node_modules
dist
build
coverage

Scripts npm

Ajoutez des scripts pratiques à votre package.json pour lancer facilement ESLint et Prettier :

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write ."
  }
}

• npm run lint : Vérifie le code avec ESLint
• npm run lint:fix : Corrige automatiquement les problèmes ESLint
• npm run format : Formate le code avec Prettier

VSCode Integration

Pour une expérience de développement optimale, vous pouvez configurer VSCode pour formater automatiquement votre code à la sauvegarde.

Créez un fichier .vscode/settings.json à la racine de votre projet :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript"
  ]
}

Note : Vous devrez installer les extensions VSCode pour ESLint et Prettier pour profiter de cette configuration.

Avantages de ces outils

Avantages de ces outils Voici quelques avantages d'ESLint et Prettier lorsqu'ils sont bien utilisés dans votre projet :

1. Intégration précoce : L'adoption d'ESLint et Prettier dès le début du projet évite d'avoir à reformater une grande base de code ultérieurement.
2. Simplicité d'approche : Une configuration standard comme Airbnb ou Standard permet de démarrer rapidement, avec la possibilité d'adapter progressivement les règles selon les besoins spécifiques de votre équipe.
3. Automatisation du processus : La configuration de vos outils pour formater automatiquement le code (à la sauvegarde ou avant les commits avec Husky) augmente l'efficacité et réduit les efforts manuels.
4. Clarté documentaire : Une documentation précise des choix de configuration assure que tous les membres de l'équipe comprennent les règles en place et travaillent de manière cohérente.

Ces pratiques conduisent à une base de code plus propre, plus cohérente et plus facile à maintenir.