How to configure ESLint for a Node.Js Project + VS Code Extension
When you work in a team or a slightly larger project it’s important to have a consistent style across all files.
With this guide, you’ll be able to set up auto linting focused on Node.Js projects using the AirBnB style guide and the Visual Studio Code extension by Dirk Baeumer – ESLint.
About ESLint
ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. [1][2] Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. ESLint supports current standards of ECMAScript, and experimental syntax from drafts for future standards. Code using JSX or TypeScript can also be processed when a plugin or transpiler is used.[3][4]
– Source: Wikipedia
Why Linting and Formatting?
- Find Errors, Typos and Syntax Errors
- Follow Best Coding Practices
- Code Style Consistency
- Avoid committing bad code
- Warning on using harmful methods
A good example that should be avoided is using console.log() 😒
At this point, you might be thinking what does AirBnB has to do with this? The reason that many people use the Airbnb style guide is simply that it’s well documented. If you look at their Guide on GitHub you will notice that they have an explanation for everything and they also display some bad and good examples which can be very useful.
Installing ESLint
Before we begin with the installation, make sure you have the ESLint extension installed in Visual Studio Code.
This guide is assuming that you have a project already configured (package.json) and you are ready to Rock and Roll 🤘.
Let’s install ESLint using npm or yarn:
npm install eslint --save-dev # or yarn add eslint --dev
You should then set up a configuration file, and the easiest way to do that is to use the --init flag:
npx eslint --init # or yarn run eslint --init
To set up our configuration file we’ll need to answer the following questions first:
How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JavaScript
The config that you’ve selected requires the following dependencies: Yes
Once you are done with the configuration setup, you should be able to go back in your project and ESLint should work for you.
√ Would you like to install them now with npm? · No / Yes
module.exports = {
env: {
browser: true,
commonjs: true,
es2021: true,
},
extends: [
'airbnb-base',
],
parserOptions: {
ecmaVersion: 12,
},
rules: {
'linebreak-style': 0,
'no-console': 0,
},
};Download
Thank you for reading this article. Please consider subscribing to my YouTube Channel.
More Resources:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
