Advertisement

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.

在这里插入图片描述

原因

In the eslint-plugin-vue project, it has been identified that the Col components contain issues.

解决办法

以下三种办法都能搜出来,这里做个总结以及记录遇到的问题:

作者给出的办法

在这里插入图片描述

关闭 vscode 的代码检查

在这里插入图片描述

必须注意的是,在以下情况下‘配置 eslint 规则’其配置内容无效

在这里插入图片描述

Vetur 采用了某个版本的 eslint-plugin-vue 来校验代码模板,并且 Linting 配置采用了 $ eslint plugin vue 的基础规范集合。

该种Linting功能无法自定义,并依赖于eslint-plugin-vue的固定版本。如果要配置模板linting规则:

配置 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 那么可能是因为没有在插件中添加 vue 选项

参考:
iview输入字段出现 x-invalid-end-tag 报错
禁止解析错误在 (vue/no-parsing-error) 中发生
分析npm依赖管理中的 peerDependencies 问题
探讨npm依赖版本管理的相关问题

全部评论 (0)

还没有任何评论哟~