ESLint is by far the most popular JavaScript linter. It statically analyzes your code to help you detect formatting issues and find code inconsistencies.



Visual Studio Code setup

  • Install VSCode ESLint extension (dbaeumer.vscode-eslint)
  • Configure it to watch .ts files (would only watch .js and .jsx with default configuration): go into VS Code settings (settings.json) and paste:
	{
	 "eslint.validate": ["typescript"]
	}



Local or global ESLint installation

  • Locally in your project (recommended): 

npm: npm install -D eslint

yarn: yarn add -D eslint



  • Globally: 

npm: npm i -g eslint

yarn: yarn global add eslint




ESLint configuration for Typescript

  • Install these plugins suivants in your project: 

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

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



  • Add a configuration file .eslintrc at the root of your project and put the configuration that you want.

Configuration example here




Check that all is working

  • Open a .ts file and paste this following line:
console.log("I have double quotes instead of single quote and no semicolon")
  • Check that errors are highlighted
  • If it’s not the case, close and open VSCode again and check that ESLint extension is allowed to watch this project (no forbidden sign at the bottom of VSCode) 




Conclusion

You should now have a working environment to detect errors and maintain a cleaner TypeScript Code thanks to ESLint. I will not talk about process automation here, but I will detail it later in a future post.



--------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------- Version française ---------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------


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 devriez 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.