天天看点

.vue文件_vscode探索之旅(二)——vscode 如何格式化Vue文件中的代码?介绍第一步第二步

介绍

上一篇文章(vscode 如何自动格式化代码?)记录了vscode中如何格式化后缀名为 “.js” 的javascript代码。除此之外,我们可能也想能够自动格式化 “.vue”为后缀的文件。毕竟 vue.js 也在前端开发中有着很重要的地位。下面就来介绍一下如何实现这一功能

第一步

在 vscode 的extension中搜索 “vetur”插件,并安装,安装成功后重启编辑器。

.vue文件_vscode探索之旅(二)——vscode 如何格式化Vue文件中的代码?介绍第一步第二步

这时,我们会发现保存文件时还不能自动格式化代码。这是因为还少了一些配置。

第二步

添加配置。说到这里,需要注意的一点是: vscode对于不同扩展的文件,可以有不同的编辑器配置,由于其对vue文件没有默认配置,这就是为什么vue文件不能被自动格式化的原因。下面我们就对 vue 扩展的文件添加如下的配置:

"[vue]": { "editor.defaultFormatter": "octref.vetur" }
           

具体操作如下:

.vue文件_vscode探索之旅(二)——vscode 如何格式化Vue文件中的代码?介绍第一步第二步

操作完成后保存配置,这时就能格式化 vue 文件中的代码了 !