webpack項(xiàng)目使用eslint建立代碼規(guī)范實(shí)現(xiàn)

首先當(dāng)然是新建一個(gè)項(xiàng)目了。假設(shè)項(xiàng)目已經(jīng)建好了，下面開(kāi)始配置

1. 安裝eslint

如果你還沒(méi)有全局安裝 eslint ，第一件事當(dāng)然是安裝 eslint

npm i -g eslint

2. 初始化 eslint

eslint --init

這個(gè)命令會(huì)生成一個(gè) .eslintrc 的文件，有幾種形式。選自己習(xí)慣的形式就行,我的生成的是一個(gè) .eslintrc.js 文件，如下：

module.exports = {
 "extends": "standard"
};

然后就可以簡(jiǎn)單的lint某個(gè)文件了：

eslint yourfile.js

在項(xiàng)目里新添加 eSLint

然后找到 package.json ，把ESLint相關(guān)的依賴加進(jìn)去,當(dāng)然一個(gè)個(gè)安裝也是可以的，只要你不嫌麻煩

"babel-eslint": "^7.1.1",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0", 

執(zhí)行 npm install 就好了

修改默認(rèn)規(guī)則

關(guān)于 eslint 配置文件的詳解，可以點(diǎn)擊這里查看，這里只簡(jiǎn)單說(shuō)下eslint規(guī)則詳情

extends

繼承某個(gè)已配置好的規(guī)則，從某個(gè)現(xiàn)有的規(guī)則上進(jìn)行擴(kuò)展。一般比較流行的eslint規(guī)則有三種：Google 標(biāo)準(zhǔn)、airbnb標(biāo)準(zhǔn)、standard標(biāo)準(zhǔn)。

Google 標(biāo)準(zhǔn)安裝

npm install eslint eslint-config-google -g

airbnb標(biāo)準(zhǔn)安裝

airbnb 標(biāo)準(zhǔn),它依賴 eslint , eslint-plugin-import , eslint-plugin-react , and eslint-plugin-jsx-a11y 等插件，并且對(duì)各個(gè)插件的版本有所要求。

你可以執(zhí)行以下命令查看所依賴的各個(gè)版本：

npm info "eslint-config-airbnb@latest" peerDependencies

你會(huì)看到以下輸出信息，包含每個(gè)了每個(gè)plugins的版本要求

{ eslint: '^3.15.0',
 'eslint-plugin-jsx-a11y': '^3.0.2 || ^4.0.0',
 'eslint-plugin-import': '^2.2.0',
 'eslint-plugin-react': '^6.9.0'
}

知道了每個(gè)plugins的版本要求后，代入以下命令執(zhí)行安裝即可使用：

npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g

standard標(biāo)準(zhǔn)安裝

Standard標(biāo)準(zhǔn)，它是一些前端工程師自定的標(biāo)準(zhǔn)。

npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g

rules

eslint 啟用的規(guī)則列表。你可以重寫(xiě) eslint 的規(guī)則，定義級(jí)別：

module.exports = {
 rules: {
  'no-console': 1
 }
};

左邊是規(guī)則，右邊是級(jí)別。1為警告，2為報(bào)錯(cuò)，0為關(guān)閉。 規(guī)則詳情請(qǐng)參考這里

React使用eslint

1. 安裝 eslint-plugin-react

npm i eslint-plugin-react

2. 修改 .eslintrc.js

修改 .eslintrc 的代碼：

module.exports = {
 "extends": "standard",
 "env": {
  "browser": true,
  "es6": true,
 },
 "parser": "babel-eslint",
 "parserOptions": {
  "ecmaFeatures": {
   "experimentalObjectRestSpread": true,
   "jsx": true
  },
  "sourceType": "module",
  "ecmaVersion": 2018
  },
  "plugins": [
  "react"
  ],
}

參考文章：

怎樣在vue項(xiàng)目下添加ESLint
eslint中文網(wǎng)
eslint 的三大通用規(guī)則

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。