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",
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章