eslintを使えるようにした

eslintを導入したので導入と概要のまとめ。
以下の記事にしたがって進めた。
http://qiita.com/mysticatea/items/f523dab04a25f617c87d
http://qiita.com/mysticatea/items/6bd56ff691d3a1577321
http://qiita.com/mysticatea/items/dc35ced6bd5e782f50cd

概要

eslintとはJavascriptのためのエラー検知ツール。コードが実行される前にバグを見つけたり記法の統一を図るのに便利。

特徴


 

  • ES6対応
  • eslintは2週間ごとにアップデートされている
  • npmとNode.jsがダウンロードされている必要がある。
  • プロジェクトごとにESlintをインストールして使うのが主流

 

導入の流れ


npmでeslintをグローバルにインストール場合

npm install -g eslint




npmでeslintをプロジェクトごとにインストール場合


本来はプロジェクトごとにESlintをインストールする。
プロジェクトのフォルダ内で以下のコマンドを入力し、package.json作成後、eslintを追加。
もしすでに他のメンバーがpackage.jsonを作成していれば2行目だけでOK。
npm installだけで他のメンバーと同じ環境を整えられる。

$ npm init
$ npm install --save-dev eslint

パスの通っていないnpmパッケージを使えるようにする。

{
"scripts": {
"lint": "eslint src"
},
"devDependencies": {
"eslint": "^2.8.0"
}
}

eslintコマンドを使えるようにする。

$ npm install -g eslint-cli
$ npm install --save-dev eslint
$ eslint src



もしプロジェクト内に.eslintrc.jsonファイルがなければ以下へ進む。
もしくは

$ eslint ファイル名

をすれば色々ターミナルから聞かれた後にファイルが自動生成される。

.eslintrc.json


.eslintrc.jsonファイルをプロジェクトのルートディレクトリに用意し、以下を記述。

{
"extends": ["eslint:recommended"],
"plugins": [],
"parserOptions": {},
"env": {"browser": true},
"globals": {},
"rules": {}
}

以下のコマンドを入力するとJSの記述に誤りがあるか見つけてくれる。

$ eslint test.js

共有設定


eslintのルールは非常に多いため毎回設定するのは大変。これに対応するために共有設定という機能がある。

最後に


テキストエディタatomを使っている人がいれば、linterとlinter-eslintを導入することでより視覚的にエラーが歩かないかを判別できる。
https://mae.chab.in/archives/2874

ルールを追加したり、オプションを追加することもできるのでReactに対応できたりすごい便利。

マークダウン方式で書くと綺麗に描ける感じするしWeb上でも読みやすくていいなー。

%236/3%20eslint%0A@%28%u5B66%u7FD2%u8A18%u9332%29%0A%0Aeslint%u3092%u5C0E%u5165%u3057%u305F%u306E%u3067%u5C0E%u5165%u3068%u6982%u8981%u306E%u307E%u3068%u3081%u3002%0A%u4EE5%u4E0B%u306E%u8A18%u4E8B%u3092%u53C2%u8003%u306B%u9032%u3081%u305F%u3002%0Ahttp%3A//qiita.com/mysticatea/items/f523dab04a25f617c87d%0Ahttp%3A//qiita.com/mysticatea/items/6bd56ff691d3a1577321%0Ahttp%3A//qiita.com/mysticatea/items/dc35ced6bd5e782f50cd%0A%0A%23%23%23%u6982%u8981%0Aeslint%u3068%u306FJavascript%u306E%u305F%u3081%u306E%u30A8%u30E9%u30FC%u691C%u77E5%u30C4%u30FC%u30EB%u3002%u30B3%u30FC%u30C9%u304C%u5B9F%u884C%u3055%u308C%u308B%u524D%u306B%u30D0%u30B0%u3092%u898B%u3064%u3051%u305F%u308A%u8A18%u6CD5%u306E%u7D71%u4E00%u3092%u56F3%u308B%u306E%u306B%u4FBF%u5229%u3002%0A%0A%0A%23%23%23%u7279%u5FB4%0A---%0A%3Cul%3E%0A%3Cli%3EES6%u5BFE%u5FDC%0A%3Cli%3Eeslint%u306F%uFF12%u9031%u9593%u3054%u3068%u306B%u30A2%u30C3%u30D7%u30C7%u30FC%u30C8%u3055%u308C%u3066%u3044%u308B%0A%3Cli%3Enpm%u3068Node.js%u304C%u30C0%u30A6%u30F3%u30ED%u30FC%u30C9%u3055%u308C%u3066%u3044%u308B%u5FC5%u8981%u304C%u3042%u308B%u3002%0A%3Cli%3E%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u3054%u3068%u306BESlint%u3092%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u3057%u3066%u4F7F%u3046%u306E%u304C%u4E3B%u6D41%0A%0A%23%23%23%20%u5C0E%u5165%u306E%u6D41%u308C%0A%0A---%0A%23%23%23%20npm%u3067eslint%u3092%u30B0%u30ED%u30FC%u30D0%u30EB%u306B%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u5834%u5408%0A%60%60%60%0Anpm%20install%20-g%20eslint%0A%60%60%60%0A%0A%3Cbr%3E%3Cbr%3E%3Cbr%3E%0A%23%23%23%20npm%u3067eslint%u3092%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u3054%u3068%u306B%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u5834%u5408%0A%0A---%0A%0A%u672C%u6765%u306F%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u3054%u3068%u306BESlint%u3092%u30A4%u30F3%u30B9%u30C8%u30FC%u30EB%u3059%u308B%u3002%0A%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u306E%u30D5%u30A9%u30EB%u30C0%u5185%u3067%u4EE5%u4E0B%u306E%u30B3%u30DE%u30F3%u30C9%u3092%u5165%u529B%u3057%u3001package.json%u4F5C%u6210%u5F8C%u3001eslint%u3092%u8FFD%u52A0%u3002%0A%u3082%u3057%u3059%u3067%u306B%u4ED6%u306E%u30E1%u30F3%u30D0%u30FC%u304Cpackage.json%u3092%u4F5C%u6210%u3057%u3066%u3044%u308C%u3070%uFF12%u884C%u76EE%u3060%u3051%u3067OK%u3002%0Anpm%20install%u3060%u3051%u3067%u4ED6%u306E%u30E1%u30F3%u30D0%u30FC%u3068%u540C%u3058%u74B0%u5883%u3092%u6574%u3048%u3089%u308C%u308B%u3002%0A%60%60%60%0A%24%20npm%20init%0A%24%20npm%20install%20--save-dev%20eslint%0A%60%60%60%0A%0A%u30D1%u30B9%u306E%u901A%u3063%u3066%u3044%u306A%u3044npm%u30D1%u30C3%u30B1%u30FC%u30B8%u3092%u4F7F%u3048%u308B%u3088%u3046%u306B%u3059%u308B%u3002%0A%60%60%60javascript%3Apackage.json%0A%7B%0A%20%20%20%20%22scripts%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22lint%22%3A%20%22eslint%20src%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22devDependencies%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22eslint%22%3A%20%22%5E2.8.0%22%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0Aeslint%u30B3%u30DE%u30F3%u30C9%u3092%u4F7F%u3048%u308B%u3088%u3046%u306B%u3059%u308B%u3002%0A%60%60%60%0A%24%20npm%20install%20-g%20eslint-cli%0A%24%20npm%20install%20--save-dev%20eslint%0A%24%20eslint%20src%20%0A%60%60%60%0A%3Cbr%3E%3Cbr%3E%0A%u3082%u3057%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u5185%u306B.eslintrc.json%u30D5%u30A1%u30A4%u30EB%u304C%u306A%u3051%u308C%u3070%u4EE5%u4E0B%u3078%u9032%u3080%u3002%0A%u3082%u3057%u304F%u306F%0A%60%60%60%0A%24%20eslint%20%u30D5%u30A1%u30A4%u30EB%u540D%0A%60%60%60%0A%u3092%u3059%u308C%u3070%u8272%u3005%u30BF%u30FC%u30DF%u30CA%u30EB%u304B%u3089%u805E%u304B%u308C%u305F%u5F8C%u306B%u30D5%u30A1%u30A4%u30EB%u304C%u81EA%u52D5%u751F%u6210%u3055%u308C%u308B%u3002%0A%0A%23%23%23%20.eslintrc.json%0A%0A---%0A%0A.eslintrc.json%u30D5%u30A1%u30A4%u30EB%u3092%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u306E%u30EB%u30FC%u30C8%u30C7%u30A3%u30EC%u30AF%u30C8%u30EA%u306B%u7528%u610F%u3057%u3001%u4EE5%u4E0B%u3092%u8A18%u8FF0%u3002%0A%0A%60%60%60javascript%3A.eslintrc.json%0A%7B%0A%20%20%20%20%22extends%22%3A%20%5B%22eslint%3Arecommended%22%5D%2C%0A%20%20%20%20%22plugins%22%3A%20%5B%5D%2C%0A%20%20%20%20%22parserOptions%22%3A%20%7B%7D%2C%0A%20%20%20%20%22env%22%3A%20%7B%22browser%22%3A%20true%7D%2C%0A%20%20%20%20%22globals%22%3A%20%7B%7D%2C%0A%20%20%20%20%22rules%22%3A%20%7B%7D%0A%7D%0A%60%60%60%0A%0A%u4EE5%u4E0B%u306E%u30B3%u30DE%u30F3%u30C9%u3092%u5165%u529B%u3059%u308B%u3068JS%u306E%u8A18%u8FF0%u306B%u8AA4%u308A%u304C%u3042%u308B%u304B%u898B%u3064%u3051%u3066%u304F%u308C%u308B%u3002%0A%60%60%60%0A%24%20eslint%20test.js%0A%60%60%60%0A%0A%0A%23%23%23%u5171%u6709%u8A2D%u5B9A%0A%0A---%0A%0Aeslint%u306E%u30EB%u30FC%u30EB%u306F%u975E%u5E38%u306B%u591A%u3044%u305F%u3081%u6BCE%u56DE%u8A2D%u5B9A%u3059%u308B%u306E%u306F%u5927%u5909%u3002%u3053%u308C%u306B%u5BFE%u5FDC%u3059%u308B%u305F%u3081%u306B%u5171%u6709%u8A2D%u5B9A%u3068%u3044%u3046%u6A5F%u80FD%u304C%u3042%u308B%u3002%0A%0A%23%23%23%u6700%u5F8C%u306B%0A%0A---%0A%u30C6%u30AD%u30B9%u30C8%u30A8%u30C7%u30A3%u30BF%u306Batom%u3092%u4F7F%u3063%u3066%u3044%u308B%u4EBA%u304C%u3044%u308C%u3070%u3001linter%u3068linter-eslint%u3092%u5C0E%u5165%u3059%u308B%u3053%u3068%u3067%u3088%u308A%u8996%u899A%u7684%u306B%u30A8%u30E9%u30FC%u304C%u6B69%u304B%u306A%u3044%u304B%u3092%u5224%u5225%u3067%u304D%u308B%u3002%0Ahttps%3A//mae.chab.in/archives/2874%0A%0A%u30EB%u30FC%u30EB%u3092%u8FFD%u52A0%u3057%u305F%u308A%u3001%u30AA%u30D7%u30B7%u30E7%u30F3%u3092%u8FFD%u52A0%u3059%u308B%u3053%u3068%u3082%u3067%u304D%u308B%u306E%u3067React%u306B%u5BFE%u5FDC%u3067%u304D%u305F%u308A%u3059%u3054%u3044%u4FBF%u5229%u3002%0A%0A%0A%u30DE%u30FC%u30AF%u30C0%u30A6%u30F3%u65B9%u5F0F%u3067%u66F8%u304F%u3068%u7DBA%u9E97%u306B%u63CF%u3051%u308B%u611F%u3058%u3059%u308B%u3057Web%u4E0A%u3067%u3082%u8AAD%u307F%u3084%u3059%u304F%u3066%u3044%u3044%u306A%u30FC%u3002%0A