vue 使用 eslint 报错 [vueno-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 规则

安装

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

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

刚刚想复现一下又不提示了，以上版本仅做个参考吧。

配置 .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 的依赖与版本

–