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.

Introduction

When writing JavaScript with an editor such as Visual Studio Code, there are a number of ways you can ensure your code is syntactically correct and in line with current best practices. For example, it is possible to integrate a linter such as ESLint into your Visual Studio Code setup in order to ensure code integrity.

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.

Project Setup

Let’s get started with a demo project. We will write one JavaScript file to start:

Sample JS file

From a formatting perspective, there are several things that could be improved:

  • Inconsistent use of quotes
  • Inconsistent use of semicolons
  • Spacing

With this JavaScript file in place, we can now initialize this project as an NPM project by running npm init and accepting all of the default values:

Run npm init

ESLint Setup

With an NPM project that contains a JavaScript file in place, we can start to set up ESLint. First, we will need to install it globally on our machine by running npm install -g eslint.

npm install 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:

Select style guide

You will also be asked to install extra packages; choose yes:

Install extra packages

After that finishes, you should have a brand new .eslintrc file in your project:

New .eslintrc file

ESLint in Action

With this configuration file in place, you might be surprised that it still doesn’t do anything for you. If you open your JavaScript file, it looks the same:

Same JavaScript file

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:

Install ESLint extension

Now, if you look at the JavaScript file again, you will notice colorful squiggles indicating errors. These markers are color-coded based on severity. Let’s look at a few of the issues:

ESLint reported issues

On line one, ESLint suggests single quotes instead of double quotes:

Single quote error

Another error occurs on line 5, with a message indicating that we should not leave console.log() messages in the code:

Console.log error

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.

Unused code error

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:

Check box for Auto Fix on Save

Now, save your JavaScript file. You should see some changes, including fewer squiggles. Some of the formatting issues that we have fixed include:

  • Consistent use of single quotes
  • Proper indentation inside of the function
  • Consistent use of semicolons

Fixed issues

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:

Example of intellisense at work

The value then will be the severity level of the issue. You have three choices:

  • Error
  • Off
  • Warn

“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:

Console.log warning turned off

This removes the error messages from our log statements:

Error messages removed

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:

Example of choosing quotation rule

Conclusion

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.

0 Comments

Creative Commons License