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,

Light, Camera, Action

  1. Install the editor for your suitable platform

  2. Install Node.js in your machine

  3. Make sure both node and npm is installed in your system

  4. Open 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.