Visual Studio Code 前端快速格式化设置

Vedu • 2021-07-18 06:30 • 技术资讯 • 阅读 844

编写前端代码时，格式化较为频繁，即使每次按快捷键也会很繁琐，Visual Studio Code本身可以进行格式化而且也提供了许多第三方插件，但是均需在每次写完代码格式不规范时选中相应部分，并按快捷键进行格式化（Shifr+alt+F），也可以通过鼠标右键选择格式化操作进行格式化。而通过Emmet（插件自行安装）可设置为在保存代码的同时自动进行格式化，大大提高编程效率，节省时间。

传统的Visual Studio Code自带的代码格式化，通过鼠标或者ctrl+a选中全部（或者部分），然后鼠标右键，在其中选择Format Document（或者Format Selection），进行前端代码的格式化，每次写完如果未严格按照代码规范注意格式就需要手动进行格式化。

Emmet自动格式化设置如下：

第一步：点击File->Preferences->Settings，进入设置界面，如下图所示：

依次点击进入Visual Studio Code设置界面

第二步：在搜索框输入Emmet:include，注意选中的为：User，然后点击Edit

in Settings.json，如下图所示；

搜索并点击进入配置文件

第三步：在配置文件最后添加配置代码，如下所示，配置之间用逗号隔开，如下图所示：

输入配置信息并保存

配置代码如下：

“editor.formatOnType”:true,

“editor.formatOnSave”: true

按照上述操作完成后，可新建html文件进行测试，把代码格式调整错乱，然后点击保存就可看到html代码在保存的同时会自动进行格式化。Visual Studio Code格式化插件有很多，大家可以根据自我需要与情况进行配置，保存同时格式化配置的核心为上述两行命令，只需在自己的格式化插件的配置文件中添加即可。

仅以此作为学习笔记以及分享，如有需改进或者不妥之处，请多多指教。

1+0.01=1.01

1-0.01=0.99

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/tech/25819.html

Visual Studio Code 前端快速格式化设置

相关推荐

发表评论