admin管理员组文章数量:1530085
一. vscode自带的格式化功能
注意:保存文件,不使用vscode 默认的格式化功能,操作如下:
可以通过 vscode-文件-首选项-设置-用户-文本编辑器-格式化,去除format on save 前的✔
二. 使用vscode插件Vetur
插件的作用:
1.可以突出代码(代码有对应的颜色)
2.可以提高项目的开发效率(有代码提示效果)
3.可以格式化代码
注意:vscode格式化html标签属性默认不换行,改为超出一定长度,换行(vetur插件)
左下角管理点开,选择设置。在用户设置下找到vetur,打开settings.json
放入下面的配置保存:
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
//"wrap_attributes": "force-aligned" //属性强制折行对齐
"wrap_attributes": "auto",// 超出长度来换行
"wrap_line_length": 120,
"end_with_newline": false
},
// "prettier": {
// "semi": true, //要不要分号
// "singleQuote": true //单引号
// }
}
4.会把代码中的单引号(’ ')全部转换为双引号(" ") 也会在每一行后面添加分号(;)
注意:
插件Vetur会和项目开发中的 .eslintrc.js’@vue/standard’ 发生冲突
@vue/standard’不希望代码中有双引号的存在, .eslintrc.js 会把代码中的单引号(’ ')全部转换为双引号(" ") 也会在每一行后面添加分号(;),所以关闭插件Vetur关于js代码的格式化,改为采用.eslintrc.js里的规则。
解决方法
第一步:打开vscode 的 settings.json(设置文件)
第二步
加上“vetur.format.defaultFormatter.js":“vscode-typescript”
“vetur.format.defaultFormatter.js":"vscode-typescript"的作用就是用viscode自带的格式化工具代替vetur格式化
只会格式化代码不会把单引号边位双引号,也不会分一行都加分号
// ‘@vue/standard’ 的作用是按这个插件的格式检查空格和字符缩进等一些规则,如果不一样则会报错
版权声明:本文标题:vue 项目自动格式化文档 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1726470005a1072000.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论