介绍
上一篇文章(vscode 如何自动格式化代码?)记录了vscode中如何格式化后缀名为 “.js” 的javascript代码。除此之外,我们可能也想能够自动格式化 “.vue”为后缀的文件。毕竟 vue.js 也在前端开发中有着很重要的地位。下面就来介绍一下如何实现这一功能
第一步
在 vscode 的extension中搜索 “vetur”插件,并安装,安装成功后重启编辑器。
![1cb4bb4b8ced0dbd12e09db18644b29a.gif](https://i-blog.csdnimg.cn/blog_migrate/a2eb23b5ef791a64c40a36d6011a9913.gif)
这时,我们会发现保存文件时还不能自动格式化代码。这是因为还少了一些配置。
第二步
添加配置。说到这里,需要注意的一点是: vscode对于不同扩展的文件,可以有不同的编辑器配置,由于其对vue文件没有默认配置,这就是为什么vue文件不能被自动格式化的原因。下面我们就对 vue 扩展的文件添加如下的配置:
"[vue]": { "editor.defaultFormatter": "octref.vetur" }
具体操作如下:
![71b508ea6278cf825bb1e9a4f833e075.gif](https://i-blog.csdnimg.cn/blog_migrate/d5b8d6353a87d4392bdd6e26e42a6db9.gif)
操作完成后保存配置,这时就能格式化 vue 文件中的代码了 !