Help us understand the problem. What is going on with this article?

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

参考記事

oreo3@github
日々勉強しつつ、できる範囲でWeb制作等をしています。 デザイン、SEO、マーケティング、WordPress
https://nagaishouten.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした