ESLintについての細かいあれこれ

勢いで前の記事書いてみたけどちゃんと触るとちょいちょいハマりどころもあったのでメモ程度に細かいことを。

Editorの設定すると捗る。

このへん見ると良い
http://eslint.org/docs/integrations/

僕はatom推しなのでこいつらでさくっと入れれた。ちゃんと.eslintrc読んでくれるし今のところいい感じ。
https://atom.io/packages/linter-eslint
https://atom.io/packages/linter

.eslintignoreでlintしたくないものを設定

lintしないファイルの指定。gitignoreとかと一緒の形式
このあたりが鉄板か。testを含めるかどうかは趣味によるところかも
bowerとか使わずDLしたファイルをどこから持ってきているような場合だとそいつらも含めるべきだろう。

node_modules/
test/

.eslintrcについて

例えばこんな具合で設定する。

{
  "env": {
    "node" : true,
    "browser" : true
  },
  "ecmaFeatures" : {
    "jsx": true,
    "objectLiteralShorthandMethods" : true
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "react/display-name": 1,
    "semi" : [2 , "never"],
    "strict" : false,
    "key-spacing" : [2, {
      "beforeColon" : true,
      "afterColon" : true,
    }],
    "no-unused-vars": [1, {"vars" : "all", "args" : "after-used"} ],
    "no-comma-dangle" : false
  }
}

ES6 && JSXを使うのに　ecmaFeaturesを指定する

[このへんの設定](http://eslint.org/docs/configuring/#specifying-language-options)が必要。

とりあえず僕はこんなもんで使っている。
一括設定とかあればいいのに。

2015/05/11追記：
いつの間にかenvでes6と指定すると一気にecmafeatureを見てくれるようになりました。
jsxだけはes6ではないので当然今までどおりecmaFeaturesとして必要です。

"env" : {
  "es6": true
},
"ecmaFeatures": {
  "jsx": true
}

rules

ここが肝になる。
僕が設定したのはこんな感じ。

.json

  "rules": {
    "strict" : false,       // strictはbabelとかに任せる
    "key-spacing" : [2, {   // セミコロンの前後どっちにも空白つける（個人的な癖）
      "beforeColon" : true,
      "afterColon" : true,
    }],
    "semi" : [2 , "never"], // 趣味コードはアンチセミコロン派
    "no-unused-vars": [1, {"vars" : "all", "args" : "after-used"} ], // 未使用変数については警告レベルに
    "no-comma-dangle" : false // [1,2,]みたいなのへの警告はbrowserifyを通すので除外
  }

plugin

npmsearch.comでkeywords:eslintpluginを検索するとわりとあるみたい。

試しにeslint-plugin-reactを使ってみる

globalなeslintを使う場合であれば

$ npm install eslint -g
$ npm install eslint-plugin-react -g

という感じ。

ここで僕もはまったので注意なのが、eslintをglobalにインストールして使う場合、pluginもまたglobalにインストールしないと使えない。

ローカルに扱う場合は

$ npm install eslint -D
$ npm install eslint-plugin-react -D

とする。ローカルにeslintが入っているとglobalなeslintコマンドでもローカルのを方を見るようになるらしい。

あとは使いたいルールをrulesのセクションに入れる

.eslintrc

  "plugins": [
    "react"
  ],
  "rules": {
       :
    "react/display-name": 1,
       :
  }

envの指定

設定を変えたりグローバルを幾つか設定してくれたりする（例えばjQueryなら$をグローバルな変数として扱ってくれるとか）

ソースのenvironment.jsを見ればだいたい何やっているかわかる。どんな値をglobalにしてるかを知りたければglobalsを見るのが良さそう。

browserifyで変換する前提なので今回はこんな具合。
IE8などのレガシーなブラウザな場合だとnode environmentでno-consoleなど幾つか対策が必要なものが落とされるので注意したほうが良い。

"env": {
  "node" : true,
  "browser" : true
}
  

実行コマンドをpackage.jsonにまとめておく

このあたりは趣味。

$ npm run lint

package.json

"scripts": {
  "lint": "eslint js/**/*.jsx"
}

npm-script の実行時には自動的にプロジェクトディレクトリの [./node_modules/.bin/ にPATHが通ります](https://docs.npmjs.com/misc/scripts#path）
npm i -D eslintをした上で上記のように指定しておけばローカルの./node_modulesを見に行ってくれます（@shinnnさん 編集リクエストありがとうございました！）