.vue文件_vscode探索之旅(二)——vscode 如何格式化Vue文件中的代码？

介绍

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

第一步

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

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

第二步

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

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

具体操作如下：

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