龙空技术网

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

盆盆儿web前端 236

前言:

而今咱们对“vscode快速格式化代码”大约比较看重,你们都想要剖析一些“vscode快速格式化代码”的相关知识。那么小编也在网摘上网罗了一些关于“vscode快速格式化代码””的相关文章,希望同学们能喜欢,你们快快来了解一下吧!

介绍

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

第一步

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

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

第二步

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

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

具体操作如下:

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

标签: #vscode快速格式化代码