はじめに
仕事でjshintを使っていましたが、使い方を間違っていたり、
設定をなんとなくの理解で使っている状態でした。
JSおじさんの勉強会でeslintの話がでたので、
自分なりに使い方をまとめて見たいと思います。
eslintのメリット
- ルール単位でON/OFFができる
- 拡張性が高い
- JSXに対応している
- ECMAScript6にも対応している
準備
◎eslintをインストール
sudo npm install -g eslint
◎設定ファイル(eslingrc)を作成
eslint --init
① What style of indentation do you use?
インデントをタブにするかスペースにするか
② What quotes do you use for strings?
文字列はシングルクオートにするか、ダブルクオートにするか
③ What line endings do you use?
windowsを使うかUnix（Mac)を使うか
④Do you require semicolons?
セミコロンは必須にするか
⑤Are you using ECMAScript 6 features?
ECMAScriptの6の機能を使用する、しないか
⑥Where will your code run?
実行環境（複数選択可）
⑦Do you use JSX?
JSX(React）を使うか
⑧What format do you want your config file to be in?
設定ファイルの形式
上記の各問いを選択していくと設定ファイルが作成される。
{
"rules": {
"indent": [
2,
"tab"
],
"quotes": [
2,
"double"
],
"linebreak-style": [
2,
"unix"
],
"semi": [
2,
"always"
]
},
"env": {
"node": true,
"browser": true
},
"extends": "eslint:recommended",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
},
"plugins": [
"react"
]
}
◎検査を実行
eslint hogehoge.js
ルールの有効、無効の設定
設定ファイルのルールIDを変更することでルールを適応するかを変更できる。
* 2 ・・・ 有効（エラー）
* 1 ・・・ 有効（警告）
* 0 ・・・ 無効
"rules": {
"indent": [
0,//無効
"tab"
],
グローバルオブジェクトの許可
下記のように、グローバルオブジェクトとして許可する変数名を定義できる。
{
"globals": {
"v1": true,
"v2": true
}
}
設定ファイル
◎"extends": "eslint:recommended"
List of available rules内の(recommended)とついてるものが有効になります。
最低限のチェックの場合はこれだけでもいいみたいです。
◎他のrules
下記が参考になりました。
公式のドキュメントはこちら
package.jsonにも定義できる
設定ファイルではなく、package.jsonに定義することもできる。
{
"name": "eslint",
"version": "1.0.0",
"description": "Sample",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"eslintConfig": {
"rules": {
"curly": 2,
"no-multi-spaces": false,
"no-underscore-dangle": false,
"quotes": [2, "single"],
"strict" : false
}
}
}
gulpで利用する
gulpのタスクでチェックするには下記のプラグインを使用します。
以上eslintの簡単な説明でした。
eslintを使って、周りのメンバーに怒られないコードを書くように心がけたいと思います。