How to Lint with ESLint in Visual Studio Code

In this Blog we will set up ESLint on Visual Studio Code. We can also configure ESLint to automatically fix syntax errors when you save your files.

npm init –yes

Using the npm init command to initialize your project will create a package.json file in the vscode-eslint-example directory. The package.json will store your project dependencies and other important configuration settings for your project.

npm install eslint –save-dev

It’s important to include the –save-dev flag because this saves the package as a dependency for development usage only. In this case, eslint is a package that is only needed when you are actively working on and making changes to your project. Once your project launches or is in production, eslint will no longer be needed. Using the –save-dev flag ensures that eslint will be listed in your package.json file as a development dependency only.

Now that ESLint is installed, you can initialize an ESLint configuration for your project using the following command:

./node_modules/.bin/eslint –init

An important piece in this command is the –init flag. The ./node_modules/.bin/eslint section of the command is the path to ESLint in your project. Using the –init flag activates ESLint for your project. Activating or initializing ESLint will create an ESLint configuration file that will allow you to customize how ESLint works with your project.

Before you can access your ESLint configuration file, you will be prompted with different questions about your project. These questions are asked to make sure that the configuration that is initialized for your project best fits your needs.

The first prompt will be:

Choose the To check syntax, find problems, and enforce code style option.

The next prompt will be:

Choose the CommonJS option to use CommonJS global variables.

The next prompt will say:

The next prompt will ask:

Choose the None of these option.

The next prompt will ask:

Choose the No option.

The following prompt will say:

Choose the Browser option.

The next prompt will say:

Choose the Use a popular style guide option.

For the Which style guide do you want to follow? prompt, choose the Airbnb: https://github.com/airbnb/javascript option.

The next prompt will ask:

Choose the JSON option.

You will then see this message:

The last prompt will ask:

Choose the Yes option to install the dependencies with npm.

You will also be asked to install extra packages. Choose yes.

After completing all the prompts, you’ll notice that a file named .eslintrc.json has been added to your vscode-eslint-example directory. ESLint is now installed. The code in app.js hasn’t changed yet. This is because ESLint needs to be integrated with Visual Studio Code.

To integrate ESLint into Visual Studio Code, you will need to install the ESLint extension for Visual Studio Code. Navigate back to Visual Studio Code and search for ESLint in the Extensions tab. Click Install once you have located the extension:

Once ESLint is installed in Visual Studio Code, you’ll notice colorful underlining in your app.js file highlighting errors. These markers are color-coded based on severity. If you hover over your underlined code, you will see a message that explains the error to you. In this way, ESLint helps us find and remove code and syntax errors.

ESLint can do even more for you. ESLint can be modified to automatically fix errors every time a file is saved.

Open up the .eslintrc.json file. This is the code you will see in that file:

At the bottom of the .eslintrc.json file, you will see a “rules” object. To customize the errors that trigger ESLint or to disable ESLint’s response to certain pieces of code, you will add key-value pairs to the “rules” object. The key will match the name of the rule you want to add or change. The value will match the severity level of the issue. You have three choices for severity level:

• error – produces a red underline
• warn – will produce a yellow underline
• off – will not display anything.

If you do not want to produce any error messages for console.log statements, you can use the no-console rule name as the key. Input off as the value for no-console.

“rules” : {
“no-console”: “off”
}