Linting and Formatting with ESLint in VS Code
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
ESLint can both format your code and analyze it to make suggestions for improvement. It is also configurable, so you can customize how your code is evaluated.
In this tutorial, you will set up ESLint on Visual Studio Code and implement a custom configuration to deal with log statements in debugging.
From a formatting perspective, there are several things that could be improved:
- Inconsistent use of quotes
- Inconsistent use of semicolons
npm init and accepting all of the default values:
npm install -g eslint.
Now, we can use that package to initialize an ESLint configuration by running
eslint --init. You will be prompted with a few different questions about your project to create the best configuration.
One question will be what style guide you want to follow: do you want to start fresh or use an existing configuration template? We will rely on a widely-used configuration template from Airbnb:
You will also be asked to install extra packages; choose
After that finishes, you should have a brand new
.eslintrc file in your project:
ESLint in Action
To integrate ESLint into Visual Studio Code, we will need to install the ESLint extension for Visual Studio Code. Click Install once you have located the extension:
On line one, ESLint suggests single quotes instead of double quotes:
Another error occurs on line 5, with a message indicating that we should not leave console.log() messages in the code:
Finally, on line 7, there is a message saying that we have defined a variable ( an arrow function) that is not used. If the code isn’t being used anywhere, then we should eliminate it. In this way, ESLint helps us find and remove unnecessary code.
Formatting on Save
With this knowledge of ESLint messages in mind, we can modify VS Code to tell ESLint to fix any issues (mainly formatting) every time we save. To open the settings menu, click on the gear icon in the lower left, and then choose Settings.
Within the settings menu, search for eslint. In the results, you will see a checkbox for ESLint: Auto Fix on Save. Make sure this is checked:
- Consistent use of single quotes
- Proper indentation inside of the function
- Consistent use of semicolons
Customizing ESLint Configuration
There are still a few squiggly messages left, including one about
console.log() messages. In some cases, removing these may not be a priority: if, for example, we are working on a Node app and want to leave log statements in for debugging later. We can customize the ESLint configuration file to allow this.
You can customize your configuration by modifying the rules section. You will need to input
key -> value pairs, where the key is the name of the rule.
VS Code can help you find rules using intellisense, which provides suggestions as you type. For example, by typing
console you will see the
no-console option suggested:
The value then will be the severity level of the issue. You have three choices:
“Error” will produce a red squiggly, “Warn” a yellow one, and “Off” nothing. We can turn this off in order to continue working with log statements in debugging mode:
This removes the error messages from our log statements:
Some rules are a bit more complicated, and require multiple pieces of information, a severity level, and a value. For example, when you need to choose between single and double quotes, you must pass in both the chosen type of quotes and the severity levels, putting both strings in an array:
This tutorial provides an introduction to some of what you can do with linting on Visual Studio Code. These linting tools can help create time for more complex tasks by automating and simplifying how you verify syntax and best practices.