現有vue項目，引入eslint

背景：
項目已經進行了很久，沒有統一的代碼規範，就想引入eslint，規範一下，也可能是強迫症犯了閒的。

正文：
 

// 1.安裝eslint
$ cnpm install -g eslint
// 2.用別人的輪子,eslint三個標準之一的eslint-config-standard
$ cnpm install eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-html eslint-loader babel-eslint -D

然後，我們要去項目的根目錄裏面手動創建一個.eslintrc文件，然後在裏面敲入以下代碼：

{
  "extends": ["standard", "plugin:vue/essential"],
  "plugins": [
    "html"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    "no-tabs": 0
  }
}

執行完以上步驟後，我們跳轉到package.json文件裏面的scripts裏面新增一條命令：

"lint": "eslint --ext .js --ext .jsx --ext .vue src/"

執行完以上步驟之後，在build目錄下找到webpack.config.base.js，然後在module下面的rules裏面添加一個對象：

rules: [
  {
    test: /\.(vue|js|jsx)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    enforce: 'pre'
  },
  ......
]

現在我們就可以到terminal裏面輸入$ cnpm run lint，來檢驗項目裏的代碼是否符合ESLint的規則,這個時候就會有很多的錯誤和警告，別擔心，如果現在不想改，也可以讓eslint忽略他們，再未來的代碼擁有eslint，或者留着以後慢慢優化。在根目錄新建一個文件.eslintignore裏面寫上需要忽略的文件夾或者文件，如下（這個不能照抄，按照自己的項目目錄來添加）：

build/
config/
static/
src/api/
src/assets/
src/common/
src/components
src/styles/
src/vuex/
src/views/achievement
src/views/activity
src/views/commission
src/views/components
src/views/contract
src/views/customerManagement
src/views/message
src/views/orderSystem
src/views/Home.vue
src/routes.js
src/main.js

這個時候你可能只檢測了幾個文件，還是報錯，想改校驗規則，或者讓他的報錯優先級降低，你可以在.eslintrc的router裏面改(上面的文件裏面已經給你添加了一條)。
eslint的router規則參考：https://www.cnblogs.com/-walker/p/8143715.html
本篇文章參考：https://www.imooc.com/article/32222（算是把文章精簡了和拓展了）
到這其實照做，可能還有其他的坑，那就自己找找方法吧。
在編輯器中自動提示eslint的錯誤，我用的是webstorm，配置方法參考：https://blog.csdn.net/qq_29329037/article/details/80100450
只是把文中的“2.安裝好之後，找到settings中ESLint，選中，就會進入配置頁面，勾選Enable->第一項配置自己安裝nodejs目錄下node.exe,第二項配置當前項目中node_modules/.bin目錄下的eslint.cmd，第三項改成.eslintrc”紅色字體部分更換了。