トップ > ESLint > 推奨設定からオレオレ設定まで使える Javascript 静的解析ツール ESLint を使ってみた

推奨設定からオレオレ設定まで使える Javascript 静的解析ツール ESLint を使ってみた

ESLint Javascript

インストール

npm でインストールする。

グローバルに入れたいなら:

$ npm install -g eslint

プロジェクトに入れたいなら:

$ cd (ProjectDir)
$ npm install eslint

動作原理

  • .eslintrc に解析ルールを書く
    • 「このルール使うよ」ってのを指定していく感じ
  • eslint hoge.js で hoge.js を解析する
    • この時 .eslintrc に書いたルールが使われる

.eslintrc の書き方

とりあえず推奨設定使う + αのサンプルを。

{
  "extends": "eslint:recommended",
  "rules": {
    "curly": "error",
    "no-undef": "error"
  },
  "env": {
      "browser": true,
      "jquery": true
  },
  "globals": {
    "MODULE_1": true,
    "MODULE_2": true,
  }
}

以下は各キーの解説。

  • extends
    • 拡張機能を使いますよという指定
    • 今回は Eslint 搭載の推奨ルール設定を使っている
  • rules
  • env
    • 環境に絡むコンフィグを書く
    • jquery: jQuery が使ってる $ がデフォだと未定義エラーになるのでそれをなくす
    • browser: window とか alert とか、ブラウザから利用時にデフォでグローバルに入るオブジェクト達のみ未定義エラーをなくす
  • globals
    • 指定した識別子の未定義エラーをなくす
    • script タグでロードする他 js に依存している場合はこれで弾かないと未定義エラーの嵐に...

実行例

$ eslint hoge.js

c:\work\hoge.js
    3:5   error  'VAR1' is assigned a value but never used
  no-unused-vars
  123:11  error  'factory' is assigned a value but never used
  ...

✖ 9 problems (9 errors, 0 warnings)

Q: ルール数多すぎ。真面目に導入したい場合はどないする？

Ans: 適当に取捨選択する。

まずは「自分は ESLint で何をどうしたいのか」を先に決めてから、それを形にすることを考えるのがいいと思う。

Q: IDE から使うことはできない？

Ans: 大体できる

IDE のプラグインとして提供されていると思う。

VSCodeにはあった。

参考