ESlint 初次安裝

  1. ESlint 初次安裝
    1. 安裝
    2. Style 設定
      1. 若要和 prettier 併用[4]
      2. 若要在 webpack 和 prettier 併用
    3. 省略不 lint

ESlint 初次安裝

之前都是靠 vue-cli 安裝。
這次自己來裝看看…順便也研究一下要怎麼和 prettier 一起使用。

安裝

在官網找到 npm 上的安裝方式[1]

npm install eslint --save-dev

如果你要用在 webpack 可以使用 eslint-loader[2]

npm install eslint-loader --save-dev

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        include: [resolve("src")],
        enforce: "pre",
        use: [
          {
            loader: "eslint-loader"
          }
        ]
      }
    ]
  }
};

Style 設定

使用問答來進行 .eslintrc.json 檔的生成[3]

npx eslint --init

生成的檔案內容

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2015,
    "sourceType": "module"
  },
  "rules": { ... } 請刪除整段
}

若要和 prettier 併用[4]

  1. 打開 .eslintrc 檔
  2. 刪掉 rule 的區段 (或安裝 eslint-config-prettier)
  3. 安裝 Prettier

若要在 webpack 和 prettier 併用

除了上述的事要做之外，還要

  1. 用在 webpack 要安裝 prettier-loader
  2. 設定 webpack.config.js

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        include: [resolve("src")],
        enforce: "pre",
        use: [
          {
            loader: "eslint-loader"
          },
          {
            loader: "prettier-loader"
          }
        ]
      }
    ]
  }
};

這樣就可以跑完 prettier 跑 eslint 設定檔衝突也不會發生了。

省略不 lint

如果目前正在 debug 的地方，要加上 console.log()，想省略不要 lint ，可以利用 eslint 的特殊註解來標註[5]

兩種基本的用法

單行

console.log("這一行沒有 eslint"); // eslint-disable-line

多行的區塊

/* eslint-disable */
console.log("這裡沒有 eslint");
/* eslint-enable */

  1. Getting Started with ESLint ↩︎

  2. eslint-loader - github ↩︎

  3. Global Installation and Usage ↩︎

  4. You’ll thank me - Dan Abramov ↩︎

  5. disabling-rules-with-inline-comments ↩︎

發表於 
tags:
  • { webpack }
  • { prettier }
  • { eslint }