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, with a goal of making the code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with the 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. You can install the plugin within the Visual Studio Code. Just 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 as it is because we will write some JS code in the future.

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 on its own, and you do not need to choose or configure 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. 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 .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 is the violation of 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 an error which is perfect. 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.

Finally, How To Configure ESLint in Visual Studio Code on Mac Tutorial is over. It is an essential step for javascript projects, and I hope it will be helpful to you.