ESLint

Qu’est-ce que ESLint

ESLint est, comme son nom l’indique, un linter, et est aussi par extension un formateur, même si ce n’est pas son but premier.

Cf. la partie ESLint des conventions

Installation de ESLint dans un projet

ESLint doit être installé en tant que dépendance de développement du projet, avec les plugins et configs additionnels.

Ensuite il doit être configuré dans votre éditeur (comme VS Code) ou IDE (comme JetBrains).

Pour VS Code, il faut installer l’extension ESLint, et voici la configuration minimale recommandée :

  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "eslint.useFlatConfig": true, // Attention, à ne pas utiliser si vous utilisez encore l’ancien système de config

Cf. partie dédiée aux installations pour plus de configurations pour VS Code.

Dans un projet Vue

Il est fortement conseillé de travailler à partir de la configuration de Anthony Fu, et de la modifier en surchargeant quelques règles comme suit :

import antfu from '@antfu/eslint-config'

export default antfu({
}, [
  {
    rules: {
      'style/operator-linebreak': ['error', 'after', { overrides: { '?': 'before', ':': 'before' } }],
      'style/space-before-function-paren': ['error', 'always'],
      'style/brace-style': ['error', '1tbs', { allowSingleLine: true }],
      'curly': ['error', 'all'],
      'ts/ban-ts-comment': ['error', { 'ts-ignore': 'allow-with-description' }],
      'import/order': [
        1,
        {
          'newlines-between': 'always',
        },
      ],
      'comma-dangle': [
        'error',
        'always-multiline',
      ],
    },
  },
])

Astuce

Pour une compatibilité des régions entre VSCode et JetBrains, on peut surcharger la règle style/spaced-comment comme suit :

// (...)
    'style/spaced-comment': [
      'error',
      'always',
      {
        markers: [
          '#region',
          '#endregion',
          '/',
        ],
      },
    ],
// (...)

Astuce

Pour pouvoir utiliser des espaces insécables et des espaces fines insécables, il faut ajouter ces deux surcharges :

// (...)
    'no-irregular-whitespace': 'off',
    'vue/no-irregular-whitespace': 'off',
// (...)

Et ajouter les packages suivants :

-@antfu/eslint-config

Vous pouvez le faire avec la commande suivante :

pnpm install -D eslint @antfu/eslint-config

Ou, si vous avez installé @antfu/ni (recommandé) :

ni -D eslint @antfu/eslint-config

Dans un projet back

Dans un projet back, la configuration est la même, avec ces deux surcharges en plus :

// (...)
  'no-unused-vars': 'off',
  'ts/no-unused-vars': 'off',
// (...)

Dans un projet fullstack

INFO

Dans un projet fullstack, si le back est en Python, cela revient à avoir un projet uniquement front pour eslint.

Idéalement, la configuration eslint ne serait faite qu’une seule fois, dans un workspace dédié à cela, et qui serait utilisé par tous les autres workspaces.

Cf. le gabarit d’exemple de monorepo sur GitHub.

Les scripts de lint et de formattage

Les scripts de formattage et de fix doivent être séparés :

"lint": "eslint .",
"format": "eslint . --fix",