eslint で構文チェック (Webpack)

More than 1 year has passed since last update.


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 のプロパティの値(配列)の第1引数: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を作成できるツール


参考記事