vue 使用 eslint 報錯 [vue/no-parsing-error] Parsing error: x-invalid-end-tag.

項目環境及編輯器

項目框架：vue iview
編輯器：vscode

錯誤提示

見下圖：[vue/no-parsing-error] Parsing error: x-invalid-end-tag.

原因

Col components are wrong in eslint-plugin-vue

解決辦法

以下三種辦法都能搜出來，這裏做個總結以及記錄遇到的問題：

• 作者給出的辦法
  

• 關閉 vscode 的代碼檢查
  
  需要注意的是，如果你不關閉 vscode 的代碼檢查下面 “配置 eslint 規則” 是無效的。原因如下：
  
  Vetur 使用了一個特定版本的 eslint-plugin-vue，用於檢查代碼的 <template> 部分。 Linting 配置基於 eslint-plugin-vue 的基本規則集。

  這種 linting 是不可配置的，並且基於 eslint-plugin-vue 的固定版本。 如果要配置模板 linting 規則：

  • vetur.validation.template: false
  • 安裝 Eslint 插件
  • 在你的項目中運行 yarn add -D eslint eslint-plugin-vue
  • 設置規則
    –
    參考：
    Vetur：VSCode下強大的Vue開發工具
    Linting for <template>
    –

• 配置 eslint 規則

1. 安裝

   安裝的時候要注意看下 npm 的提示信息，我安裝的時候一直提示版本不對安裝不上，以下是我安裝成功了的版本：

   "devDependencies": {
       "eslint": "^4.14.0",
       "eslint-loader": "^2.2.1",
       "eslint-plugin-vue": "^4.7.1",
       "vue-eslint-parser": "^2.0.3"
   },
   

   剛剛想復現一下又不提示了，以上版本僅做個參考吧。

2. 配置 .eslintrc.js

   module.exports = {
     ...,
     // 注意，plugins 裏別忘了加 vue 選項
     plugins: [
     	'html',
       'vue'	
     ],
     rules: {
     	...,
       "quotes": [0, "single"],	// 禁用引號檢查	引號類型 `` "" ''
       "semi": 0,  				// 禁用分號檢查	[1, "always"]: 需要分號, [2, "never"]: 不加分號, 0: 禁用此項
       "vue/html-self-closing": "off",
       "vue/no-parsing-error": [2, {
         "x-invalid-end-tag": true,
       }],
       "indent": "off",			// 禁用縮進檢查
     }
   }
   

   如果你報了這個錯 Definition for rule 'vue/no-parsing-error' was not found，那就是沒有在 plugins 里加 vue 選項。

   –
   參考：
   iview的input標籤報錯 x-invalid-end-tag
   disallow parsing errors in (vue/no-parsing-error)
   探討npm依賴管理之peerDependencies
   淺談npm 的依賴與版本

   –