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を指定する
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
"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さん 編集リクエストありがとうございました！）
Author And Source
この問題について(ESLintについての細かいあれこれ), 我々は、より多くの情報をここで見つけました https://qiita.com/terrierscript/items/8610d3806a3f94d7d1d0著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .