Configure ESLint In Visual Studio Code


ESLint is the most flexible and configurable javascript linter among other javscript linters like JSHint, JSLint etc. It is good practice to have one javascript linter configured in our project, to keep the coding style consistant across the team and to detect some of the errors before runtime.

Here, I am going to show how to configure ESLint in Visual Studio Code editor.

Step 1: Install ESLint Extension for Visual Studio Code

Support for eslint is not directly included in the editor. For that we need to install eslint extension first.

To Install the eslint extension, open command palette (View -> Command Palette.. or cmd+shift+p ) and execute below command:

ext install eslint

(Note: After opening command palette, remove > character if it is there and then execute the above command)

install-eslint-extension

Step 2: Enable ESLint In Your Workspace

In VS Code, there are three level of settings and they are applied in below order.
1. Workspace Setting (Preferences -> Workspace Settings)
2. User Setting (Preferences -> User Settings)
3. Default Setting

Once you have installed eslint extension, add below configuration in your User Setting or Workdpace Setting as
per your preference.

"eslint.enable": true

Step 3: Add ESLint Configuration File

ESLint supports different formats of configuration file. Check possible eslint configuration file formats. Pick anyone and add that file in root directory of your project. Sample configuration file looks as shown below:

.eslintrc.json

{   
   "extends": "eslint:recommended",
   "env": {
       "browser": true
   }
}

Create eslint configuration file by referring eslint configurations and rules as per your preference.

ESLint by default ignores /node_modules/** and /bower_components/**. If you want to ignore any file/directory for linting, you can add them in .eslintignore file.

ESLint is now configured for your project in VS Code Editor. You should be able to see the count of error/warning for all the opened files, in bottom bar of the VS Code.

Step 4 (Optional): Execute ESLint For Whole Project

By default, VS Code will show errors/warnings for only files which are opened in VS Code. If you close all the files, the count of error/warning will be reduced to 0.

So if you are adding ESLint to any existing project, you won’t be able to see the total errors/warnings of the project in VS Code. You need to manualy open each file to check if it has any error.

To solve this issue, we can configure a task in VS Code, which will execute eslint on each javascript file of the project and updates the error/warning count in bottom bar of VS Code and by clicking on that counts, we can navigate to the files having errors/warnings.

Create ESLint Task

To create a task, open command palette (View -> Command Palette..) and select Tasks: Configure Task Runner.

configure-eslint-task

Add eslint task as shown below:

tasks.json

{
    // See http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "sh",    // for windows "command": "cmd"
    "isShellCommand": true,
    "args": [ "-c" ],   // for windows "args": ["/C"]
    "tasks": [
        {
            "taskName": "eslint",
            "suppressTaskName": true,
            "args": [
                "eslint ."  // To use locally installed eslint,  ./node_modules/eslint/bin/eslint.js .
            ],
            "problemMatcher": [
                "$eslint-stylish"   
            ]
        }
    ]
}

Here, in above task, we are executing eslint . command on eslint cli and using $eslint-stylish problem matcher to map the output of the cli command with VS Code Editor.

ESLint cli provides may different output formats. The default output format is stylish

Note that, VS Code provides only “$eslint-stylish” and “$eslint-compact” problem-matcher out of the box. If you set output format other than compact or stylish, you need to create a problem matcher yourself. Check how to create your own problem matcher here and more information of tasks in VS Code here.

Now, execute the eslint task which we configured just now, to see all the errors/warnings of the project.

Run ESLint Task

To execute the task, open the command palette and execute below command:
task eslint

execute-eslint-task

After execution of the task, count of error/warning will be updated if any.

eslint-error-warning-count

You can navigate to the files having errors/warnings by clicking on the count at bottom bar or by shortcut cmd+shift+m. You can filter the file list by entering filename after ! character as shown below:

filter-files-with-eslint-error-warning

  • Dathathreya Krishnabhat

    I want to attach keyboard short cut ‘alt+shift+e’ to run ‘Eslint: Fix all auto-fixable Problems’. How can i do it?

Menu