vscode(^1.44.0)下vue-html代碼格式化與eslint格式化衝突

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",
}