Peut importe le nombre d'année d'expériences dans le développement web, il arrive à tout le monde de faire des erreurs lorsqu'on écrit du code.

Même si la plupart du temps il s'agit d'erreurs simples telles que des fautes de frappe ou d'indentation, il reste important de corriger ces erreurs pour s'assurer de garder une codebase impeccable.

C'est là qu'interviennent les linters !

Ces outils de qualité de code (code quality en Anglais) permettent une analyse statique du code afin de s'assurer que celui-ci respecte certaines règles de développement qui peuvent être par exemple fixées par votre CTO ou Lead Developer.

Une fois qu'un linter mis en place, celui-ci va systématiquement vérifier et uniformiser la syntaxe de votre code pour répondre aux conventions propres à un projet en particulier ou à celles fixées par votre entreprise.

Un linter peut directement formater votre code à la sauvegarde ("grâce au lintint on save") pour s'assurer des bonnes pratiques paramétrées, mais également vous remonter des erreurs s'il en trouve pendant son analyse.

Dans cet article, nous allons nous intéresser au linter open source ESLint pour le langage de programmation JavaScript (mais vous pouvez trouver d'autres linters adaptés à d'autres langages informatiques).

ESLint peut s'installer rapidement avec NPM avec la commande suivante :

npm install eslint --save-dev

Une fois installé, vous pouvez tester eslint grâce à la commande :

npm run lint

Attention, pour que le linter fonctionne, il faut définir des règles dans le fichier .eslintrc.json

Pour que ESLint puisse faire son travail, il faut définir des règles de fonctionnement dans le fichier eslintrc.

Voici ci-dessous un exemple de configuration pour TypeScript que nous utilisons dans notre agence de développement web.

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "next/core-web-vitals"
  ],
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "es6": true,
    "jest": false
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "arrowFunctions": true
    }
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/prop-types": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-var-requires": "off"
  }
}

Maintenant que vous savez utiliser ESLint, vous pouvez également utiliser Prettier, un autre outil de code quality, qui est populaire, open-source et très pratique pour formater le code de manière automatique !

Vous pouvez l'installer grâce à la commande ci-dessous

npm install --save-dev --save-exact prettier

Une fois installé il ne vous restera plus qu'à renseigner la configuration souhaitée dans le fichier .prettierrc

Voici la configuration que nous utilisons au sein de notre agence de développement Blacksmith :

{
  "semi": true,
  "printWidth": 140,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "bracketSpacing": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "jsxSingleQuote": true,
  "trailingComma": "all"
}

Have fun !