eslint メモ
- JavaScript 構文チェッカー。独自ルールの設定もできる
- Sublime Text で SublimeLinter-eslint パッケージをインストールすると、.eslintrc に設定したルールでリアルタイムにエラー表示してくれる
- コマンドで
--fix付きで実行すると、ここのレンチマークの付いたエラーを自動修正してくれる
導入の手順
今回は Webpack で使う前提。以下、Webpack 導入済とした説明
- package.json があるディレクトリで
npm install eslint eslint-loader --save-dev - webpack.config.js に追記 (下に例)
- 設定ファイル .eslintrc を作成 (下に例)
- 間違った構文のあるコードでテスト
webpack.config.js の例
-
enforce: "pre"
babel-loader でES5に変換する前にコード検証させるために必要 -
options: {}でオプション設定が可能
// module: {
// rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
},
// babel-loader の設定とか続く
設定ファイル .eslintrc の例
- 基本 JSON だが、// コメントが書ける (/**/ はエラー)
- rules のプロパティの値(配列)の第１引数：0は無効、1は警告、2はエラー
// 下に解説あり
{
"root": true,
"extends": "eslint:recommended",
"rules": {
"indent": [ 2, 2 ],
"linebreak-style": [ 2, "unix" ],
"semi": [ 2, "always" ],
},
"env": {
"es6": true,
"node": true,
"browser": true,
"jquery": true
},
"parserOptions": {
"sourceType": "module"
}
}
-
"root": true
このプロジェクト内のみに適用 (デフォルトは親ディレクトリまで遡って適用する) -
"extends": "eslint:recommended"
https://eslint.org/docs/rules/ でチェックマークが付いた推奨設定を適用 -
"indent": [ 2, 2 ]
スペースの数。タブなら tab と書く -
"linebreak-style": [ 2, "unix" ],
改行コードが /n でないとエラー -
"semi": [ 2, "always" ]
セミコロン無しの文はエラー -
"quotes": [ 2, double ]
クォーテーションが"でないとエラー -
"env":
適用する環境 (該当の環境に合わせた設定群が適用される) -
sourceType": "module",
コードをモジュールとして扱う
ツール
-
.eslintrc editor
GUIでルールを選択して.eslintrcを作成できるツール