VSCode开发Vue-代码格式化最完美设置Vue在VsCode上⾯的开发,代码格式话是个⽼⼤难问题了。
有很多⽂章介绍Prettier四个配置⽅法,以及如何启⽤。但是结果就是:⼀个⼀个配完,还是看着难受
现在尝试出⼀种最完美格式化⽅式,分享出来
1、安装Beautify插件
2、修改设置:
两个地⽅
2.1 Editor: Word Wrap(控制折⾏的⽅式。):选择 bounded,可以根据窗⼝宽度⾃动调整换⾏
2.2 Editor: Word Wrap Column((同时修改于: )  为wordWrapColumn或bounded时,控制编辑器的折⾏列。)
这个是设置换⾏长度,根据⾃⼰显⽰器宽度设置
2、【重点】修改setting.json,漏了这⼀步就达不到效果了
{
"editor.tabSize": 2,
"vetur.format.defaultFormatter.html": "js-beautify-html",  "vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 160,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
"search.followSymlinks": false,
"git.autorefresh": false,
"firmDelete": false,
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "50%",
"height": "100%",
"background-position": "50% 50%",
"background-repeat": "no-repeat",
"opacity": 1
},
"liveServer.settings.useWebExt": true,
"liveServer.settings.donotShowInfoMsg": true,
"workbench.sideBar.location": "left",
"abled": false,
"liveServer.settings.fullReload": true,
"livereload.port": 5500,
"editor.largeFileOptimizations": false,
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"files.autoSave": "afterDelay",html文件格式化
"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 160,
"files.associations": {
},
}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。