ESLint est le linter JS le plus populaire. Il analyse le code et détecte entre autres les erreurs de formatage. Je vous décris ici comment mettre en place ESLint dans votre environnement de travail, si vous avez un projet TypeScript et que vous utilisez VS Code.


Dans Visual Studio Code

  • Installer l'extension VSCode ESLint (dbaeumer.vscode-eslint) 
  • Configurer l'extension pour qu'elle prenne en compte les fichiers .ts (par défaut, uniquement .js et .jsx) : aller dans les settings vs code et copier :
	{
	 "eslint.validate": ["typescript"]
	}


Installation locale ou globale d'ESLint

  • Pour installer dans le projet local (option recommandée) :

npm: npm install -D eslint

yarn: yarn add -D eslint


  • Pour installer globalement :

npm: npm i -g eslint

yarn: yarn global add eslint


Configuration de ESLint pour TypeScript

  • Installer les plugins suivants dans le projet: 

npm: npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

yarn: yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin


  • Créer un fichier .eslintrc à la racine du projet et coller la configuration souhaitée.

Exemple ici


Vérification

  • Ouvrir un fichier .ts et copier/coller la ligne suivante :
console.log("I have double quotes instead of single quote and no semicolon")
  • Vérifier que les erreurs sont bien mises en évidence par ESLint
  • Si ce n'est pas le cas, vérifier en bas à droite de VSCode que l'extension ESLint soit bien autorisée à surveiller ce projet (pas de panneau "interdit")
  • Parfois il faut fermer puis ré-ouvrir VSCode pour que tout soit bien pris en compte.


Conclusion

Vous devrez maintenant avoir un environnement fonctionnel pour détecter des erreurs et maintenir un code plus propre grâce à ESLint. Je n’aborde pas ici comment automatiser ces tâches lors de la sauvegarde ou d’un process d’intégration continue, mais le détaillerai plus tard dans un prochain article.