SideCI Blog

自動コードレビューサービスSideCIを提供している株式会社アクトキャットのコーポレートブログです。



ESLintを使ってNode.jsプロジェクトを自動コードレビューしよう

品質の高いソースコードを保つために、予めコーディングスタンダードを用意しておき、それに基づいてコードを書くことが多いです。特にスクリプト言語では書き方が人によって変わる傾向が強く、トリッキーなコードも多くなりがちです。

そのコーディングスタンダードを満たしているかをコードレビューでチェックする事が多いですが、解析ツールを使って予め機械的に確認することが出来ます。今回はNode.jsプロジェクトに対して使えるESLintを紹介します。ESLintはSideCI上でも利用可能です。

ESLintのインストール

インストールは npm コマンドで行えます。開発しているプロジェクトに対して用いる場合は次のようになります。Gulpなどと連携させる場合はこちらになるでしょう。

$ npm install eslint --save-dev

グローバルに使う場合は -g オプションを付けます。

$ npm install -g eslint

前者の場合は ./node_modules/.bin/eslint 、後者の場合は単に eslint でコマンドが呼び出せるようになります。

ESLintの設定

最初に初期化を行う必要があります。スタイルガイドはGoogle、Airbnb、Standardの3種類が用意されています。

$ ./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 

設定が終わると .eslintrc.js というファイルが生成されます(フォーマットはJSONなども選択できます)。

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

ESLintの使い方

ES5の場合はこのままでもいいですが、ES2015などを使いたい場合には下記のように設定を修正します。

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

後は eslint コマンドとファイル、ディレクトリパスを渡すだけです。最初は多数のエラーが出るでしょう。

$ ./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)

自動変換機能

–fix オプションをつけるとセミコロンやスペースなど、機械的に修正できる部分を変換してくれます。

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

変換した結果です。 var が let に変わっています。修正できないのは1行当たりの文字数、関数名や変数名などです。スペースなどを手作業で直すのは面倒なので、–fixオプションが便利です。

$ 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の特徴

ESLintはすべてのルールをオフにすることができます。重要なのでオフにできません、といったことはありません。ルールに対して警告レベルを「警告」とするか、「エラー」とするかは個別で指定できます。そのため自社のルールに合わせて柔軟なコーディングスタンダードを定義できるでしょう。


SideCIではESLintを用いたNode.jsプロジェクトのコードレビューに対応しています。ESLintを個々人のPCで使うのも便利ですが、SideCIを利用してGitHub PullRequesetと連携した自動レビューとして、プロジェクトメンバー全員で共通して使う運用がとても便利です。SideCIでは .eslintrc または .eslintignore を使って設定の変更が可能です。また、*.min.js(ミニファイされたJavaScriptファイル)については指摘を行いませんので、コードレビューの際のノイズは少なく、単体で使うよりもコードレビューに貢献します。

ぜひご活用ください。

ESLint - Pluggable JavaScript linter