Let’s use ESLint for automatic code review of the Node.js project

Image for post

In order to maintain high quality source code, usually a coding standard is prepared in advance, and the code is written based on that. Especially for scripting languages there is a strong tendency for the writing style to change depending on who wrote it, and this leads to a lot of tricky code.

Whether or not the coding standard is being met is often checked with a code review, but it is possible to use analysis tools to confirm this automatically. This time I will introduce ESLint which can be used with the Node.js project. ESLint is also usable with SideCI.

ESLint Installation

It is installed with the npm command. When used for a development project it is as follows. When linked with Gulp etc. it is probably done this way.

$ npm install eslint --save-dev

When it will be used globally attach the -g option.

$ npm install -g eslint

In the former case  , in the latter case the command can be called with just  .

ESLint Setup

First it must be initialized. 3 varieties of style guide, Google, Airbnb, and Standard are available.

$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
❯ Google 
  Airbnb 
  Standard

When the setup is complete, a file called .eslintrc.js is created. (The JSON format etc. can also be chosen).

$ cat .eslintrc.js 
module.exports = {
    "extends": "google"
};

ESLint Usage

In the case of ES5 it is fine like this, but if you want to use ES2015 etc. then revise the setup as follows.

module.exports = {
  "env": {
    "es6": true
  },
  "extends": "google"
};

Afterwards just pass the eslint command and file, and directory path. At first there will probably be many errors.

$ ./node_modules/.bin/eslint lib/common.js

/path/to/your/project/common.js
   35:24   error  A function with a name starting with an uppercase letter should only be used as a constructor  new-cap
  106:78   error  Missing space before opening brace                                                             space-before-blocks
  126:1    error  Line 126 exceeds the maximum line length of 80      max-len
  127:37   error  Missing space before value for key '__type'         key-spacing
  127:47   error  A space is required after ','                       comma-spacing
  127:115  error  Missing semicolon                                   semi
    :
✖ 16 problems (16 errors, 0 warnings)

Automatic Conversion Function

By attaching the — fix option parts that can be automatically revised such as semicolons, spaces etc., will be converted for you.

$ ./node_modules/.bin/eslint lib/common.js --fix

The conversion results. var has changed to let . Things that can’t be revised are the number of characters in a row, function names and variable names etc. Fixing spaces by hand is tedious, so the — fix option is convenient.

$ git diff lib/common.js
diff --git a/bin/ncmb-csv b/bin/ncmb-csv
index eb2e0a6..91a05f4 100755
--- a/bin/ncmb-csv
+++ b/bin/ncmb-csv
@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-var program = require('commander');
+let program = require('commander');

 program
   .version('0.0.1')

ESLint Features

In ESLint all rules can be turned off. There is no such thing as being unable to turn them off because they are important. The warning level for rules can be individually set to “warning” or “error.” For this reason a flexible coding standard that matches our company rules can be defined.

SideCI is compatible with the Node.js project code review using ESLint. While it is convenient to use ESLint on each individual’s PC, it is very convenient to share and use among all project members as an automatic review using SideCI and linked with GitHub PullRequeset. With SideCI and using .eslintrc or .eslintignore the settings can be changed. Also, with *.min.js (a minified JavaScript file) it is not specified, so there is little noise during code review, and more than just using it alone, it contributes to code review.

Please make use of it.

ESLint — Pluggable JavaScript linter

More articles about ESLint

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.