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 ↩︎