在vue-cli中為了能讓vscode能提示.vue文件中的js代碼，我們引入了eslint-plugin-html這個eslint插件（使用方法參考VSCode環(huán)境下配置ESLint 對Vue單文件的檢測）
最近開始使用vue-cli3構(gòu)建項目，主要目的是為了簡化項目代碼結(jié)構(gòu)和提高編譯性能。當我們使用以前的方案去實現(xiàn)vscode對.vue文件的eslint檢測時卻發(fā)現(xiàn)始終無法識別，而且提示以下內(nèi)容

eslint-vue-cli3.png

提示信息很容易理解，eslint沒有把當前文件當做vue文件處理，而是當做了普通的js文件處理，當然，js文件的外層代碼肯定不能含有html標記。最后，我們找到了eslint-plugin-vue，這個插件能完美處理.vue文件，而且還預(yù)置了很多可復(fù)用的rules（eslint規(guī)則）。使用方法如下：

第一步： npm install --save-dev eslint-plugin-vue 安裝eslint vue支持插件

第二步： .eslintrc.js文件中添加plugin說明

注：vue-cli3默認不會在根目錄創(chuàng)建.eslintrc.js文件，因為vue-cli3除了這種方法配置eslint以外還可以在package.json中通過eslintConfig屬性去配置，但是這種方式需要嚴格遵守json語法規(guī)則，我們建議如果您的eslint配置較為復(fù)雜，還是在根目錄自己創(chuàng)建一個.eslintrc.js文件，這樣就可以按照js語法規(guī)則去寫配置項，也方便注釋

module.exports = {
  // ...其他配置項
  plugins: [
    'vue' 
  ]
  // ...其他配置項
}

第三步：使用eslint-plugin-vue中預(yù)置的eslint規(guī)則讓其支持.vue文件的基本結(jié)構(gòu)和通用語法規(guī)則

增加一個文件檢測說明配置extends: [
module.exports = {
  root: true,
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: [
    'plugin:vue/base'
  ],
}

這里我們使用的是base里面的規(guī)則，更多的預(yù)置規(guī)則可以參考文檔(eslint-plugin-vue Available rules)[https://eslint.vuejs.org/rules/]

關(guān)于eslint規(guī)則復(fù)用可以參考文檔https://cn.eslint.org/docs/developer-guide/shareable-configs

第四步：如果配置中最外層已經(jīng)存在解析器說明配置parser: 'babel-eslint'，將其移至parserOptions中

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  }
  // ...其他配置項
}

第五步：vscode中添加對vue文件支持的設(shè)置讓vscode可以高亮vue文件中的js代碼eslint問題代碼

"eslint.validate": [
  "javascript",
  "javascriptreact",
  { "language": "vue", "autoFix": true }
] 

附完整的.eslintrc.js文件

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: [
    'plugin:vue/base'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'indent': [2, 2], // 兩個空格的縮進
    'quotes': [2, 'single'], // js必須使用單引號
    'linebreak-style': [2, 'unix'], // 換行風格 unix/windows
    'semi': [2, 'always'], // 語句強制分號結(jié)尾
    'no-console': [1], // 不允許console語句
    'no-unused-vars': [1], // 聲明了變量但是沒有使用檢測
    'space-unary-ops': [1, { 'words': true, 'nonwords': false }], // 一元運算符的前/后要不要加空格
    'brace-style': [2, '1tbs', { 'allowSingleLine': false }], // 大括號風格
    'comma-spacing': [2, { 'before': false, 'after': true }],   // 逗號后有空格，前沒有空格
    'comma-style': [2, 'last'],  // 逗號跟在結(jié)尾
    'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 對象字面量中冒號的前后空格
    'lines-around-comment': [ // 行前/行后備注
      2, {
        'beforeBlockComment': false, // 段注釋的前后
        'beforeLineComment': false, // 行注釋的前面
        'afterBlockComment': false, // 塊注釋的后面
        'afterLineComment': false, // 行注釋的后面
        'allowBlockStart': true,
        'allowObjectStart': true,
        'allowArrayStart': true
      }],
    'max-depth': [2, 4], // 代碼最多允許4層嵌套
    'max-len': [1, 160, 2],
    'max-nested-callbacks': [2, 3], // 回調(diào)嵌套深度
    'max-params': [2, 5], // 函數(shù)最多只能有5個參數(shù)
    'max-statements': [1, 80],  // 單個函數(shù)最多80條語句
    'no-array-constructor': [2], // 禁止使用數(shù)組構(gòu)造器
    'no-lonely-if': 2, // // 禁止else語句內(nèi)只有if語句
    'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1 }], // 空行最多不能超過2行
    'no-nested-ternary': 2,  // 不使用嵌套的三元表達式
    'no-spaced-func': 2, // 函數(shù)調(diào)用時 函數(shù)名與()之間不能有空格
    'no-trailing-spaces': 2, // 一行結(jié)束后面不要有空格
    'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;簡單的判斷用三元表達式代替
    'object-curly-spacing': [2, 'always', { // 大括號內(nèi)是否允許不必要的空格 always始終允許；never始終不允許
      'objectsInObjects': false,
      'arraysInObjects': false
    }],
    'arrow-spacing': 2, // =>的前/后括號
    'block-scoped-var': 2, // 塊語句中使用var
    'no-dupe-class-members': 2,
    // 'no-var': 1, // 禁用var，用let和const代替
    'object-shorthand': [1, 'always'], // 強制對象字面量縮寫語法
    'array-bracket-spacing': [2, 'never'], // 是否允許非空數(shù)組里面有多余的空格
    'operator-linebreak': [2, 'after'], // 換行時運算符在行尾還是行首
    'semi-spacing': [2, { 'before': false, 'after': true }], // 分號前后空格
    'keyword-spacing': ['error'],
    'space-before-blocks': 2, // 不以新行開始的塊{前面要不要有空格
    'block-spacing': [2, 'always'],
    'space-before-function-paren': [2, 'never'], // 函數(shù)定義時括號前面要不要有空格
    'space-in-parens': [2, 'never'], // 小括號里面要不要有空格
    'spaced-comment': [1, 'always',
      { 'exceptions': ['-', '*', '+']
      }], // 注釋風格要不要有空格什么的
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  },
  globals: {
    '$': false,
    'jquery': false,
    'ActiveXObject': false,
    'arbor': true,
    'layer': false
  }
};