Table of Contents
ESLint can format your code as well as tell you how to make it better!
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!
- inconsistent use of quotes
- inconsistent use of semi colons
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.
To integrate ESLint into Visual Studio Code, we will need to install the ESLint extension for Visual Studio Code.
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!
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.
- consistent use of single quote
- proper indentation inside of the function
- consistent use of semi colons
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.
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.
Like this article? Follow @jamesqquick on Twitter