vscode 插件Vetur解决代码高亮和格式化问题
在用vscode打开vue项目的时候,通常会这样后来找到了一个插件Vetur下载后重新加载页面,页面就比较舒服了,解决了代码高亮问题但是我们发现,vue文件html代码无法格式化,这样就比较难受,后来在设置settings.json中添加设置// 更改vue的html格式"vetur.format.defaultFormatter.html": "js-beautify-...
在用vscode打开vue项目的时候,通常会这样
后来找到了一个插件Vetur
下载后重新加载页面,页面就比较舒服了,解决了代码高亮问题
但是我们发现,vue文件html代码无法格式化,这样就比较难受,后来在设置settings.json中添加设置
// 更改vue的html格式,根据需求设置
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 保存时自动格式化
"editor.formatOnSave": true,
这样保存之后,我们发现html标签属性强制换行
如果不喜欢这样的样式,可以在settings.json中添加设置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto",
}
},
注: // 对属性进行换行。
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。
保存结果
然后我就发现vue里js代码又出现了问题,原代码是这样
保存以后
本来不加双引号和分号就是为了简单,这样就又有问题了,后来在设置settings.json中添加设置,之后重启编辑器
// 更改vue的js格式
"vetur.format.defaultFormatter.js": "vscode-typescript",
保存以后
这样双引号是双引号,分号是分号,但还有一种强制转换,安装插件Prettier - Code formatter,在设置settings.json中添加设置
// 控制尾随分号
"prettier.semi": false,
// 强制单引号
"prettier.singleQuote": true,
原代码
保存以后
总结:安装Vetur,在seetings.json中添加
// 更改vue的html格式,根据需求设置
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 更改vue的js格式
"vetur.format.defaultFormatter.js": "vscode-typescript",
// 保存时自动格式化
"editor.formatOnSave": true,
// 取消html标签属性强制换行
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto",
}
},
更多推荐
所有评论(0)