Linter in Node App: Manage Code Quality
You can get the final source code from here.
Linter
A linter tool analyzes code and warns for potential errors. Also, force to maintain a generic style and structure.
For example, when an application has multiple contributors, it is important to follow the same coding style. In this situation, Linter tools come quite handy.
Airbnb has an industry standard style guide and we are going to implement it.
Tools
To use the linter tool in node application, we are going to use,
Visual Studio Code (code editor)
eslint (npm package)
eslint-plugin-import (npm package)
eslint-config-airbnb-base (npm package)
ESLint (editor extension)
Light, Camera, Action
Install the editor for your suitable platform
Install Node.js in your machine
Make sure both
node
andnpm
is installed in your systemOpen Visual Studio Code and install the ESLint extension.
To install ESLint extension in Visual Studio Code
Open the code editor
Open vs code extension panel (Crtl+Shift+X)
Search for ESLint
Install the extension
Prepare Project
Create a directory, linterPractice
and enter the directory.
mkdir linterPractice
cd linterPractice
Now in the root directory, create the project
npm init -y
Now open the directory in your code editor.
Create two files named index.js
and .eslintrc.js
Your project directory should look like
├── ...
├── manageEnvironment
│ ├── index.js
│ ├── .eslintrc.js
│ └── package.json
├── ...
Install the npm packages from the root directory.
npm i -D eslint eslint-config-airbnb-base eslint-plugin-import
Now add linter configuration to .eslintrc.js
file
module.exports = {
"extends": "airbnb-base",
"rules": {}
};
Usage
Now you are done setting linter tool in your node application. Let’s see some special use case of linter.
Override Linter Rule
To override some rule, update your .eslintrc.js
in rules
section.
By default, linter does not allow under-score
. So to use uder-score
we have to override the rule and updated configuration
will be
module.exports = {
"extends": "airbnb-base",
"rules": {
"no-underscore-dangle": 0
}
};
Ignore Linter Rule InSpecific File
By default, eslint
does not support linting. To override a rule in a specific file, we can comment to override the rule. In the following code blocks, I will override console
rule in index.js
file.
/* eslint-disable no-console */
console.log(‘Hello world’);
Final Word
Stay tuned and if there is a confusing term or something, the response below. I will replay ASAP.