在前端开发中，我们经常使用 ESLint 作为代码规范检查工具。然而，在使用 Vue.js 开发时，可能会遇到 ESLint 报错，从而影响代码质量和开发效率。其中一个常见的报错是 Parsing error: x-invalid-end-tag，本文将详细介绍如何解决并避免该错误。
问题原因
Parsing error: x-invalid-end-tag 是因为 Vue.js 独有的一种语法结构，即单文件组件（Single-File Components，SFC）中的 </template> 标签错误使用。
在 Vue.js 中，一个单文件组件通常分为三个部分：<template>、<script> 和 <style>。其中的 <template> 标签会被编译成一个渲染函数，而其内部的模板需要用正确的 HTML 标签结构来编写。如果出现 </div>、</h1>、</span> 等标签闭合不对称或者是存在多余的闭合标签，会出现该错误。
例如下面这个示例代码：
<template>
<div>
<h1>Hello world!</span>
</div>
</template>在上面的代码中，闭合标签 </span> 需要改为 </h1> 才符合正确的 HTML 标准。如果你运行 ESLint，就会报出上述错误。
解决方法
解决 Parsing error: x-invalid-end-tag 的最简单的办法就是修正出错的闭合标签。但如果出现多个类似错误，修改起来非常麻烦。因此，我们可以使用 eslint-plugin-vue 插件来解决这个问题。
- 安装
eslint-plugin-vue插件:
npm install eslint-plugin-vue --save-dev
- 在
.eslintrc.js中添加插件：
{
// ...
"plugins": [
"vue"
],
// ...
}- 在
.eslintrc.js中扩展已有规则：
{
// ...
"extends": [
"plugin:vue/recommended"
],
// ...
}- 重新运行 ESLint，你会发现之前的错误都消失了。
总结
Parsing error: x-invalid-end-tag 是一个 Vue.js 独有的报错，一般是由于单文件组件中的 <template> 标签内 HTML 结构错误导致。通过安装 eslint-plugin-vue 插件并扩展已有规则，我们可以更好地避免和解决此类错误。
最后，为了避免出现该错误，我们在编写 Vue.js 单文件组件时，应遵循正确的 HTML 标准编写模板，养成好的编码习惯。这样可以避免出现诸如此类的错误，并使代码更加规范和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e09a9cf6b2d6eab3bb7e13