Vue:VSCode中Vue代码的格式化问题解决(Code formatter)
VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vue文件中的js ,css格式化样式都变了,原因在于都采用了prettier 来格式化,而配置文件中vetur.format.defaultFormatter.html 这个配置项的值为"none",我们需要对它重新进行设置。步骤一:首先确保你安装了vetur扩展插件。如下图,扩展里直接搜索vetur,安装下图的V...
VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vue文件中的js ,css格式化样式都变了,原因在于都采用了 prettier 来格式化,而配置文件中 vetur.format.defaultFormatter.html 这个配置项的值为"none",我们需要对它重新进行设置。
步骤一:
首先确保你安装了vetur扩展插件。如下图,扩展里直接搜索vetur,安装下图的Vetur这个插件即可,安装完之后点击重新加载。
步骤二:
打开VSCode,文件->首选项->设置,打开settings.json文件,找到"eslint.validate" --> 添加"vue";另外搜索vetur,将vetur插件的 vetur.format.defaultFormatter.html 的值修改成 js-beautify-html;
步骤三:
安装插件Prettier - Code formatter,然后在settings.json文件中修改如下配置:
"prettier.singleQuote": true,
"prettier.semi": false,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true
这样以下的三个格式化的问题就被解决了:
1.单引号成双引号的问题;
2.句尾自动添加分号的问题;
3.函数中参数的那个括号后面的空格被删除的问题。
这样我们的设置就完成了,接下来打开一个Vue文件,Alt+Shift+F即可对vue文件进行格式化,或者点击鼠标右键,选择格式化文件即可。
以下是我的settings.json的完整代码,仅供参考:
// 将设置放入此文件中以覆盖默认设置
{
"typescript.check.tscVersion": false,
"window.zoomLevel": 0,
"files.autoSave": "off",
"typescript.updateImportsOnFileMove.enabled": "always",
"git.confirmSync": false,
"editor.minimap.enabled": true,
"workbench.startupEditor": "newUntitledFile",
"git.autofetch": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"vetur.validation.template": true,
"vetur.format.enable": true,
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"prettier.singleQuote": true,
"prettier.semi": false,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"workbench.settings.editor": "json"
}
参考文档:https://blog.csdn.net/twodogya/article/details/80728262
https://blog.csdn.net/qq_40690947/article/details/87803597#_settingsjson__eslintvalidate__vue_19
更多推荐
所有评论(0)