webpack項目使用eslint創建代碼規範

參考文章：
怎樣在vue項目下添加ESLint
eslint中文網
eslint 的三大通用規則

首先固然是新建一個項目了。假設項目已經建好了，下面開始配置

1. 安裝eslint

若是你尚未全局安裝eslint，第一件事固然是安裝eslint

npm i -g eslint
複製代碼

2. 初始化eslint

eslint --init
複製代碼

這個命令會生成一個.eslintrc的文件，有幾種形式。選本身習慣的形式就行,個人生成的是一個.eslintrc.js文件，以下：

module.exports = {
    "extends": "standard"
};
複製代碼

而後就能夠簡單的lint某個文件了：

eslint yourfile.js
複製代碼

在項目裏新添加eSLint

---

而後找到package.json，把ESLint相關的依賴加進去,固然一個個安裝也是能夠的，只要你不嫌麻煩

"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", 
複製代碼

執行npm install就行了

---

修改默認規則

關於eslint配置文件的詳解，能夠點擊這裏查看，這裏只簡單說下 eslint規則詳情

extends

繼承某個已配置好的規則，從某個現有的規則上進行擴展。通常比較流行的eslint規則有三種：Google 標準、airbnb標準、standard標準。

Google 標準安裝

npm install eslint eslint-config-google -g
複製代碼

airbnb標準安裝

airbnb標準,它依賴eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，而且對各個插件的版本有所要求。

你能夠執行如下命令查看所依賴的各個版本：

npm info "eslint-config-airbnb@latest" peerDependencies
複製代碼

你會看到如下輸出信息，包含每一個了每一個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'
}
複製代碼

知道了每一個plugins的版本要求後，代入如下命令執行安裝便可使用：

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

standard標準安裝

Standard標準，它是一些前端工程師自定的標準。

npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g
複製代碼

rules

eslint啓用的規則列表。你能夠重寫eslint的規則，定義級別：

module.exports = {
    rules: {
        'no-console': 1
    }
};
複製代碼

左邊是規則，右邊是級別。1爲警告，2爲報錯，0爲關閉。 規則詳情請參考這裏

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"
      ],
}
複製代碼

---

關注前端擼客公衆號