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.