How To Configure ESLint in Visual Studio Code on Mac

In this tutorial, we will see How To Configure ESLint in Visual Studio Code on Mac. ESLint is explicitly designed to be completely configurable, meaning that you can turn off every rule and run only with necessary syntax validation or mix and match the bundled rules and your custom rules to make the ESLint perfect for your project.

ESLint is the tool for identifying and reporting on patterns found in ECMAScript/JavaScript code to make the code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:

• ESLint uses Espree for JavaScript parsing.
• ESLint uses an AST to evaluate patterns in code.
• ESLint is entirely pluggable, every single rule is the plugin, and you can add more at runtime.

How To Configure ESLint in Visual Studio Code

We will use the Visual Studio Code plugin or extension called ESLint. 

To install the plugin within the Visual Studio Code,  go to the extensions and search for ESLint, and the first extension will be our extension that looks like this. I have already installed that extension.

Step 1: Create a package.json file.

This is our demo project to test the ESLint configuration. So, create one project folder called es and go inside that folder and open that folder on Visual Studio Code.

mkdir es
cd es
code .

Create one file inside the root called app.js and then leave it because we will write some JS code in the future.

The next step is to create the package.json file. We can create it by using the following command.

npm init -y

So, it will create independently, and you do not need to choose or configure it by yourself.

{
  "name": "es",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Step 2: Install the ESLint package globally.

We need to install the eslint npm package globally using the following command.

sudo npm install -g eslint

Although you can install it per project based locally as well but let us stick it with globally, it will help us to create the ESLint configuration file.

Now, go to the Visual Studio Code and type the following command.

So, here we have three options.

1. Use a popular style guide.
2. Answer questions about your style.
3. Inspect your Javascript file(s).

For this tutorial, we will choose the Answer questions about your style option.

Step 3: Choose your style to configure ESLint

Generally, there are six-seven questions that you need to answer based on your style of writing the JS code. For example, you can see my configuration here in the following image.

I have answered all the questions, and finally, one file inside the root has been created called the .eslintrc.js file. The file looks like this.

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

Now, we need to test our configuration. So write the following two lines of code inside the app.js file we have created earlier.

// app.js

const app = ["Apple", "Microsoft"];

app.length;

So, in the above-written code, we have used double quotes, which violates our config rules because we have selected single quotes. So the ESLinter will give us an error like this inside the code editor.

That means we are getting a perfect error. So our configuration is working. Now, remove the double quotes and add a single quote, and you will see that the error is gone.

There are so many rules that we can use for our project. You can find it here.

That’s it for configuring ESLint in Visual Studio Code on Mac Tutorial is over. However, it is an essential step for Javascript projects, and I hope it will be helpful to you.