JavaScript tooling is amazing! In this article, learn how you can use ESLint and Visual Studio Code to format your code and provide suggestions on how to make it better!

ESLint can format your code as well as tell you how to make it better!

Table of Contents

• Project Setup
• ESLint Setup
• ESLint in Action
• Formatting on Save
• Customizing ESLint Configuration
• Wrap Up

Not only can ESLint format your code, but it can also analyze it and make suggestions on how to improve it. ESLint is configurable, so you can choose the formatting issues you care about. Let’s take a look!

Project Setup

Let’s get started with a simple project. I’ve got one JavaScript file to start. From a formatting perspective, notice there are several things that don’t look so good.

• inconsistent use of quotes
• inconsistent use of semi colons
• spacing

With the JavaScript file in place, now we need to initialize this project as an NPM project by running npm init. I’m going to accept all of the default values.

ESLint Setup

With an NPM project that contains a JavaScript file in place, we can start to setup ESLint. First, we will need to install it globally on our machine by running 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 do you want to follow. In other words, do you want to start fresh or use an existing configuration template. An incredibly popular one is from Airbnb, which I’ve chosen below.

You will also be asked to install extra packages. Choose yes.

After that finishes, you should have a brand new .eslintrc file in your project. Mine is a JSON file based on my answer during initialization.

ESLint in Action

With our configuration file in place, you might be surprised that it still doesn’t do anything for us. If you open the JavaScript file back up, it still looks the same.

To integrate ESLint into Visual Studio Code, we will need to install the ESLint extension for Visual Studio Code.

Now, if you look at the JavaScript file again, notice all of the colorful squigglies. The suigglies are color coded based on severity. Let’s look a few of the issues.

On line one, it tells me that I should be using single quotes instead of double quotes. We’ll fix this in a second.

Next on line 5, I get a message saying that I should’t leave console.log() messages in the code.

Lastly, on line 7, I get a message saying that I’ve defined a variable ( an arrow function) that is never being used. If the code isn’t being used anywhere, then we should get rid of it. These kind of messages are great for finding and removing dead code!

Formatting on Save

Setup ESLint to format your code every time you save!
Now that we have read through some of the squiggly messages, we can tweak VS Code to tell ESLint to fix any issues (mainly formatting) it can every time we save. To open the settings menu, you can hit the gear icon in the lower left, then choose settings.

WIthin the settings menu, you can search eslint. In the results you should see a checkbox for ESLint: Auto Fix on Save. Make sure this is checked.

Now, back in the JavaScript file, save it. You should see some changes and a few of the squigglies are gone. Here’s a few of the formatting things that are fixed.

• consistent use of single quote
• proper indentation inside of the function
• consistent use of semi colons

Customizing ESLint Configuration

You can fully customize your ESLint configuration to you and your teams needs!
Needless to say, we still have a few squiggly messages left, one about console.log() messages. Let’s say we don’t really care about that because this is a Node app and we want to leave log statements in for debugging later on. We can customize the ESLint configuration file to allow this.

You can customize your configuration by going down to the rules section. You will need to input key -> value pairs, where the key is the name of the rule.

VS Code is awesome because it provides you intellisense when you start typing rule names. For example, I start to type console and I see the no-console option pop up;

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

• error
• off
• warn

As you might expect, error leads to a red squiggly, warn to a yellow one, and off to nothing. Let’s turn this rule off.

Yay! No more squigglies undernearth our log statements!

Some rules are a bit more complicated where they need two different pieces of information, a severity level and a value. One example is choosing between single and double quotes. To pass in both the chosen type of quotes and the severity levels, you can put both strings in an array like so.

Wrap Up

I love getting to write about the tooling for JavaScript, especially in tandem with Visual Studio Code. It’s so exciting that tools can automate the really boring part of your code while also keeping you in check with best practices. I hope this helps you write better code faster!

#visual-studio #javascript #web-development