Style guides allow us to write consistent, reusable, and clean code. These rules can be automated and enforced with linters. This will spare you from manually checking for indentation or using single quotes or double-quotes.
Visual Studio code can support linting on every save. Your workflow may benefit from performing frequent lint checks to address small issues over time rather than addressing many large issues that may delay deploying code.
In this tutorial, you will install ESLint, construct rules, and enable codeActionsOnSave
in Visual Studio Code.
If you would like to follow along with this article, you will need:
This tutorial was verified with Node v16.6.2, npm
v7.21.0, eslint
v7.32.0, and Visual Studio Code v1.59.1.
There are various linters for different languages and types of projects. For the needs of this tutorial, you will need to have ESLint installed and configured.
First, create a new project directory:
- mkdir eslint-save-example
Then, navigate to the project directory:
- cd eslint-save-example
Initialize a new project:
- npm init -y
And install eslint
:
- npm install eslint@7.32.0
Then, initialize eslint
:
- npx eslint --init
Answer the prompt with the following choices:
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? What format do you want your config file to be in? JavaScript
At this point, you will have a new project with package.json
and .eslintrc.js
files.
In order to use ESLint in Visual Studio Code, you should install the ESLint extension available in Visual Studio Code’s marketplace.
Next, create a JavaScript file that intentionally breaks common rules, like inconsistent spacing and indentation, quotation marks, and semicolons:
const helloYou = (name)=> {
name = 'you' || name ;
console.log("hello" + name + "!" )
}
Open the file in Visual Studio Code and observe the indications for ESLint rule violations:
helloYou
is underlined. Hovering over this line in Visual Studio Code displays the following tooltip message: 'helloYou' is assigned a value but never used
. This is because the rule .eslint(no-unused-vars)
is enabled by eslint:recommended
.
We can address this issue by using the variable:
const helloYou = (name)=> {
name = 'you' || name ;
console.log("hello" + name + "!" )
}
console.log(helloYou)
To address the other issues, we will have to add rules.
eslint --init
created a file called eslintrc.js
(or .yml
or .json
if that’s the option you selected):
module.exports = {
'env': {
'browser': true,
'es2021': true,
'node': true
},
'extends': 'eslint:recommended',
'parserOptions': {
'ecmaVersion': 12,
'sourceType': 'module'
},
'rules': {
}
};
Let’s add rules for consistent spacing and indentation. And enforce single quotes preferred over double-quotes. And also enforce mandatory semicolons at the end of lines.
module.exports = {
// ...
'rules': {
'quotes': ['error', 'single'],
// we want to force semicolons
'semi': ['error', 'always'],
// we use 2 spaces to indent our code
'indent': ['error', 2],
// we want to avoid extraneous spaces
'no-multi-spaces': ['error']
}
};
Save the changes to your file.
In your code editor, open the JavaScript file you created earlier. All the broken rules will be indicated.
If you have the ESLint extension installed you can use CTRL+SHIFT+P
to open the Command Palette. Then search for ESLint: Fix all auto-fixable Problems and press ENTER
(or RETURN
).
The auto-fixable problems will be corrected:
const helloYou = (name)=> {
name = 'you' || name ;
console.log('hello' + name + '!' );
};
console.log(helloYou());
You are free from counting indentation and checking for quotation marks and semicolons!
Trying to manually run ESLint: Fix all auto-fixable Problems periodically is not very reliable. However, having lint rules run every time you save your work can be more reliable. You can set up ESLint to run auto-fix every time you press CTRL+S
(or COMMAND+S
).
For ESLint to work correctly on file same, you must change the Visual Studio Code preferences. Go to File > Preferences > Settings (or Code > Preferences > Settings).
For this tutorial, we will modify the Workspace settings - it is also possible to apply these settings for all projects. Click Workspace and search for Code Actions On Save:
Editor: Code Actions On Save
Code action kinds to be run on save.
Edit in settings.json
Then click settings.json
.
{
"editor.codeActionsOnSave": null
}
In settings.json
paste the following code:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
Now, undo the fixes you made to the JavaScript file you created earlier. Then save the file. The auto-fixable problems will be automatically addressed.
In this tutorial, you installed ESLint, constructed rules, and enabled codeActionsOnSave
in Visual Studio Code.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.