【vue系列】 vue2.0 項目配置 ESLint

時間 2020-07-07

標籤 vue系列 vue2.0 vue 項目配置 eslint 简体版

原文原文鏈接

協同開發過程當中，不一樣的編碼習慣寫出的代碼，差別很大。平常維護代碼或者修復bug的時候時候，看各類風格的代碼，影響效率不說，還有可能改出低級問題。目前咱們的項目尚未代碼規範，我決定要作點改變，因而考慮使用 ESlint 來作代碼規範檢查。javascript

考察了ESlint的官方網站和一些技術貼，決定先給咱們其中的一個 Vue2.0 項目配置 ESLint。在配置 ESLint 過程當中走了一些彎路，把配置過程記錄下來，方便往後查看。vue

預測得到的收益：java

項目編碼風格統一，師出一人；
開發過程當中修復語法錯誤，減小潛在 bug；
規定規範編碼，減小代碼冗餘，提升代碼質量；

預期風險：node

擔憂整個項目添加了 ESLint，其餘同事冒火，由於是多頁面應用，在項目根目錄下作了配置，新需求可使用新配置，老項目能夠自行選擇要不要改一輪eslint的報告提示，此次給咱們的 Vue2.0 項目配置了 ESLint 也給團隊作點貢獻。webpack

配置ESLint

咳咳，配置流程來了。es6

1. 安裝 eslint

既然要用 ESLint ，就要安裝它，經過命令： cnpm I eslint -D 安裝。web

2. 初始配置 eslint

eslint 安裝好以後，運行 eslint —init命令作些簡單配置，咱們能夠選擇咱們須要的檢測的環境、文件類型等等。這步完成，在項目根目錄下會生成一個 eslintrc.js 文件。vue-router

3. 安裝 eslint-loader

咱們的項目須要webpack來編譯，須要對應的loader，安裝 eslint-loader，運行命令 cnpm I eslint-loader -D。npm

若是有 command not found: eslint 的報錯提示，能夠運行 ./node_modules/.bin/eslint --init 來進行eslint配置化安裝瀏覽器

4. 配置 webpack

打開 webpack 的 config 配置文件配置：

obj.module = {
    rules: [
        // ...
        { 
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [ path.resolve(commonDir, '../index.js'), resolve('./pages'), resolve('./components')], // 
            options: {
                formatter: require('eslint-friendly-formatter')
            }
        }
    ]
};
複製代碼

5. 安裝 eslint-friendly-formatter

eslint-friendly-formatter 這個模塊是爲了方便本地規範檢查代碼。記得運行 cnpm i eslint-friendly-formatter -D 安裝上。

6. 安裝 babel-eslint

操做到這裏關於 eslint 的基本配置就完成了，把項目跑起來，咿居然有 parset 的報錯，說最新的eslint解析有問題。查詢資料是說須要 babel-eslint，按依賴安裝的方式安裝上。

7. 安裝 eslint-plugin-vue

Vue.js 的官方 ESLint 插件： eslint-plugin-vue ，這個插件容許咱們使用 ESLint 檢測 .vue 文件的 <template> 和 <script>，有助於實時檢測代碼。把這個插件安裝上，最終的 .eslintrc.js:

module.exports = {
    "root": true,
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "parser": 'babel-eslint',
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};
複製代碼

配置參數：

root 爲true根配置文件，不然會按照目錄樹向上搜索
env 執行環境
extends 對基礎配置進行擴展，能夠配置共享配置包 eslint-config-airbnb等。配置包須要安裝。
globals 指定全局變量，無視 no-undef 規則
parserOptions 語法解析器選項
plugins 插件，插件命名規範是 eslint-plugin- 爲前綴
rules 校驗規則

8. 配置小結

須要安裝的依賴有

cnpm i eslint eslint-loader eslint-friendly-formatter babel-eslint  eslint-plugin-vue  -D
複製代碼

webpack 配置
.eslintrc.js 配置

配置完事，項目跑起來一堆的報錯，來來來，💃開始自我折磨吧。經歷磨練才能寫出更優雅更規範的代碼。看着頁面很少，花了幾個小時來處理 ESLint 的警告和報錯。😓

配置問題

Use the latest vue-eslint-parser

在eslint-plugin-vue官網看到關於這個問題的解釋和解決方案:

eslint-plugin-vue 裏的大多數規則都須要 vue-eslint-parser 來解析 template 的AST，然而 babel-eslint 和 vue-eslint-parser 在解析上有衝突，解決辦法是把 "parser": "babel-eslint", 移入到 parserOptions 內。

- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "babel-eslint",
      "sourceType": "module"
  }
複製代碼