vscode(^1.44.0)下vue-html代码格式化与eslint格式化冲突

本文链接：https://blog.csdn.net/fredricen/article/details/105611632

vscode配置

{
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
	   "source.fixAll.eslint": true
	},
	"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "vetur.format.defaultFormatter.js": "none",
}

冲突

如下代码，自动保存后，后提示eslint警告

<template>
	<hr/>
</template>

Disallow self-closing on HTML void elements (<hr/>).eslint(vue/html-self-closing)

意思是eslint的vue模板建议，空元素（即没有文本节点的元素），采用自闭合标签形式，但是eslint的html模板建议，有些元素没有自闭合写法，譬如<hr>。

解决

由于eslint关于html模板和vue模板的建议存在冲突，所以只要关闭其中一个就可以解决。

修改配置如下即可：

{
	//"editor.formatOnSave": true, //该配置和下面的editor.codeActionOnSave会冲突，建议关闭
	"editor.codeActionsOnSave": {
	   "source.fixAll.eslint": true
	},
	"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "vetur.format.defaultFormatter.js": "none",
}