How to use ESLint in VSCode

 by Robin Wieruch
 - Edit this Post

This tutorial is part 2 of 3 in this series.

A brief step by step tutorial on how to install and use ESLint in VS Code (Visual Studio Code). ESLint supports you and teams to follow a common code style in your project. It can be used in VS Code by installing it from the VS Code Marketplace. Once you have integrated it in VS Code, you can configure ESLint to enforce a code style in your files. This way, all team members working on a project follow the same code style standard.

As prerequisite you need to have ESLint installed for your project. When you are in charge of the build tools (e.g. Webpack), you can install and configure it with a .eslintrc file yourself:

However, most modern tools like create-react-app come with a built-in ESLint installation and configuration where you don't have to do anything about it.

Once you have a eslintrc file provided (either created by yourself or provided internally by a tool like create-react-app), you can make the ESLint warnings/errors visible in VS Code by installing the ESLint extension from the VS Code Marketplace.

Afterward, open your VS Code user's settings/preferences as JSON and enter the following configuration:

"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"eslint.validate": ["javascript"],

With this setting, ESLint will check the code style of JavaScript files and will automatically try to fix warnings/errors on save. Try it yourself by violation an ESLint rule, validating that you see the warning/error in VSCode, and checking whether VS Code is able to fix the issue itself. That's it, you have integrated ESLint successfully in Visual Studio Code.

This tutorial is part 2 of 3 in this series.

Keep reading about 

A brief step by step tutorial on how to install and use Prettier in VS Code (Visual Studio Code) . Prettier is an opinionated code formatter which ensures one unified code format. It can be used in…

So far, you should have a working JavaScript with Webpack application. In this tutorial, we will take this one step further by introducing ESLint for an enforced unified code style without code smells…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.