19
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

eslint で構文チェック (Webpack)

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を作成できるツール

参考記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
19
Help us understand the problem. What are the problem?