Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

  "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のセクションに入れる

  "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さん 編集リクエストありがとうございました!)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした