ESLint實踐心得

首先安裝ESLint相關的依賴

npm i -D eslint
npm i -D babel-eslint
npm i -D eslint-config-standard
npm i -D eslint-plugin-babel
npm i -D eslint-plugin-html
npm i -D eslint-plugin-import
npm i -D eslint-plugin-node
npm i -D eslint-plugin-promise
npm i -D eslint-plugin-standard
npm i -D eslint-plugin-vue

.eslintrc配置

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2019,    // 使用目前最新的，沒找到相似next的配置方式
    "sourceType": "module"
  },
  "env": {
    "browser": true        // 其餘環境能夠針對去加
  },
  "extends": [
    "plugin:vue/base",
    "standard"        // 我決定在standard基礎上微調
  ],
  "plugins": [
    "vue"
  ],
  "rules": {
    "semi": [2, "always"],    // standard默認不帶分號，我以爲仍是加上好
    "no-debugger": "off"        // 容許書寫debugger，方便開發調試
  }
}

自動修復

這樣配置只會讓不合規範的代碼在dev或者build的時候報錯，但會拉低開發效率，故而我在package.json中增長了--fix命令，使其能在本地dev運行前自行修復格式類錯誤。另外經過husky和lint-staged配合，能夠實如今本地commit以前，對本次修改範圍內的代碼執行特定腳本，經過以下配置便可在commit時再次進行校驗和fix。
實現before commit校驗須要的依賴

npm i -D husky
npm i -D lint-staged

package.json

"scripts": {
    "dev": "npm run lint:fix && ecf run --env local",        // 本地調試啓動時會自動執行fix
    "lint": "eslint --ext .js,.vue client",
    "lint:fix": "eslint --fix --ext .js,.vue client"        // 運行npm run lint:fix便可自動修復格式類錯誤
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,vue}": "npm run lint:fix"
}

另外在遠程端也能夠配置lint對應校驗，咱們公司內的發佈平臺已經提供對應功能的流水線設置，無需本地進行配置。

VSCode提效

package.json只能在每次dev啓動時執行fix，這並不能知足咱們邊開發邊調試的須要，另外代碼中的錯誤也沒有實時提示，只能在命令行報錯後才知道。

爲了解決這些問題，咱們須要在VSCode中安裝Vetur和ESLint插件，並增長以下VSCode配置

"eslint.autoFixOnSave": true, // 每次保存時便自動fix
"eslint.validate": [    // 實時報錯提醒
    "javascript",{
        "language": "vue",
        "autoFix": true
    },
      "html",
    "vue"
]