エンジニア日記

日々の開発あれこれ

ESLintでJavaScriptのコードスタイルを統一

ESLintとは?

  • 特定のスタイルガイドライン(検証ルール)に準拠していない、問題のあるパターンやコードを見つけるための静的検証ツール。
  • 検証ルールの追加や、有効or無効化、検出レベル(ワーニング、エラーなど) が自由に設定できる。

ESLintのインストール

プロジェクトルートに移動し、下記コマンドを実行

1
2
3
4
$ npm install eslint --save-dev

$ ./node_modules/.bin/eslint -v
v4.9.0

コーディングスタイルのルールを記述するファイル(json形式ならば.eslintrc.json)を下記コマンドで生成

1
2
3
4
5
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? (Use arrow keys)
❯ Answer questions about your style  (対話形式で作る)
  Use a popular style guide          (人気のスタイルガイドから作る)
  Inspect your JavaScript file(s)    (JavaScriptファイルから作る)

コーディングスタイルをチェック

プロジェクトルートに生成された、.eslintrc.jsonに記述されているルールに従ってチェックしてくれる

1
2
3
4
5
$ ./node_modules/.bin/eslint index.js
/index.js
   46:10  error    'hoge' is defined but never used                     no-unused-vars
   83:13  warning  Unexpected console statement                   no-console
   85:37  error    Empty block statement                                    no-empty

常にコーディングスタイルをチェックするように、IntelliJに設定する

設定より、

  1. Languages & Frameworks
  2. JavaScript
  3. Code Quality Tools
  4. ESLint
  5. Enableにチェック
  6. ESLint package にeslintモジュールのパスを設定

ESLint

コーディングスタイル ルール一覧

公式サイト

qiita

ESLintのエラールール。