ESLint(vue+webpack)配置

1、ESLint

協同開發過程當中，常常感覺到來自代碼檢視的惡意。代碼習慣不一致，看半天；竟然提交低級錯誤，個人天(╯‵□′)╯︵┻━┻！...研究了一番，決定使用ESLint來作代碼規範檢查。

2、配置方式

1. JavaScript註釋：經過JavaScript註釋把配置信息嵌入代碼中。
2. package.json：在package.json文件中的eslintConfig字段中指定配置。
3. 配置文件：經過.eslintrc.(js/json/yaml/yml)的獨立文件來爲整個目錄或者子目錄指定配置信息，ESlint會查找而且自動讀取配置文件。

3、配置過程(配置文件)

1. 安裝相關npm包

   yarn add eslint babel-eslint eslint-loader eslint-plugin-vue eslint-friendly-formatter --dev

2. 增長文件

   .eslintignore 用來配置不須要檢查的文件(相似git的.gitignore)。

   .eslintrc.js 用來配置ESlint驗證規則的配置文件。

3. 修改webpack配置文件

   module.exports = {
     module: {
       rules: [
         test: /\.(js|vue)$/,
         loader: "eslint-loader",
         enforce: "pre",
         //指定檢查的目錄
         include: [resolve(__dirname, 'src')],
         //eslint檢查報告的格式規範
         options: {
           formatter: require("eslint-friendly-formatter")
         }
       ]
     }
   }

4、配置文件詳解

以.eslintrc.js爲例

module.exports = {
  //一旦配置了root，ESlint中止在父級目錄中查找配置文件
  root: true,
  //解析器
  parser: "babel-eslint",
  //想要支持的JS語言選項
  parserOptions: {
    //啓用ES6語法支持(若是支持es6的全局變量{env: {es6: true}}，則默認啓用ES6語法支持)
    //此處也可使用年份命名的版本號：2015
    ecmaVersion: 6,
    //默認爲script
    sourceType: "module",
    //支持其餘的語言特性
    ecmaFeatures: {
      //...
    }
  },
  //代碼運行的環境，每一個環境都會有一套預約義的全局對象，不一樣環境能夠組合使用
  env: {
    es6: true,
    browser: true,
    jquery: true
  },
  //訪問當前源文件中未定義的變量時，no-undef會報警告。
  //若是這些全局變量是合規的，能夠在globals中配置，避免這些全局變量發出警告
  globals: {
    //配置給全局變量的布爾值，是用來控制該全局變量是否容許被重寫
    test_param： true
  },
  //支持第三方插件的規則，插件以eslint-plugin-做爲前綴，配置時該前綴可省略
  //檢查vue文件須要eslint-plugin-vue插件
  plugins: ["vue"],
  //集成推薦的規則
  extends: ["eslint:recommended", "plugin:vue/essential"],
  //啓用額外的規則或者覆蓋默認的規則
  //規則級別分別：爲"off"(0)關閉、"warn"(1)警告、"error"(2)錯誤--error觸發時，程序退出
  rules: {
    //關閉「禁用console」規則
    "no-console": "off",
    //縮進不規範警告，要求縮進爲2個空格，默認值爲4個空格
    "indent": ["warn", 2, {
      //設置爲1時強制switch語句中case的縮進爲2個空格
      "SwitchCase": 1,
      //分別配置var、let和const的縮進
      "VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
    }],
    //定義字符串不規範錯誤，要求字符串使用雙引號
    quotes: ["error", "double"],
    //....
    //更多規則可查看http://eslint.cn/docs/rules/
  }
}

使用JavaScript註釋啓用或禁止指定規則

/* eslint-disable */
alert('message');
/* eslint-enable no-alert, no-console*/
...

層疊配置

ESlint支持層疊配置，檢測文件的規則是其目錄層級結構中全部.eslintrc文件的組合，當規則衝突的時候，離檢測文件最近的規則優先。

默認狀況下，ESlint會沿着父級目錄網上尋找配置文件，直到根目錄。若是配置文件中有root: true，則ESlint會中止在父級目錄中查找。

5、配置過程當中出現的問題

出現錯誤：Use the latest vue-eslint-parser。

解決方法： 把parser: "babel-eslint"移動到parserOptions中。

{
  //parser: "babel-eslint",
  parserOptions: {
    parser: "babel-eslint",
    //...
  }
}

問題緣由： eslint-plugin-vue中的不少規則都須要vue-eslint-parser檢查<template>, vue-eslint-parser和babel-parser兩者有衝突。

參考連接