Linting de code avec lint-staged

1. Qu'est-ce que le "Linting" de code

Le linting (“linter” son code) est une pratique qui vise à améliorer la qualité de votre code et de ce fait la reprise et la maintenabilité de celui-ci.

2. Pourquoi faire du linting de code?

Le linting a plus de sens lorsqu'il est exécuté avant de valider votre code. Ce faisant, vous pouvez vous assurer qu'aucune erreur n'entre dans le dépôt Git et que le style de code désiré est appliqué. Mais l'exécution d'un processus de linting sur un projet entier est lente et les résultats peuvent ne pas être pertinents. En fin de compte, vous ne voulez que faire du linting sur les fichiers qui seront validés.

Nous allons dans le cadre de cette formation utiliser l’outil lint-staged pour la mise en place de ce mécanisme sur notre projet.

3. Mise en place de lint-staged

Nous allons exécuter la commande ci-dessous pour l’installation de lint-staged:

npm i -g lint-staged

pnpm add -D lint-staged

Nous allons installer des outils de formatage/linting pour les différents langages utilisés dans le cadre de cette formation :

Prettier pour le formatage du code javascript/typescript, html et css;
```
npm i -g prettier

pnpm add -D prettier
```

EsLint pour l'analyse syntaxtique du code javascript/typescript (avec l'ajout du support TypeScript);

ESLint vous propose un assistant de configuration qui créera un fichier .eslintrc.js à la racine du projet.

ci-dessous, la procedure à suivre :

npx eslint --init

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.3.1
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
✔ Would you like to install them now? · Yes
✔ Which package manager do you want to use? · pnpm

Csharpier pour l'analyse syntaxtique et formatage du code Csharp
```
dotnet new tool-manifest

dotnet tool install csharpier
```

Et on fait en sorte que ça soit appelé lors du pre-commit :

npx husky add .husky/pre-commit "pnpm lint-staged"

On configure dans le fichier package.json l’appel aux outils souhaités en utilisant le block lint-staged comme decrit ci-dessous :

{
  "lint-staged": {
    "*.{js,ts,json,md,mdx,html,css,scss}": "prettier --write",
    "*.{cs}": "dotnet csharpier"
  },
  "devDependencies": ...
}