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

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

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

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

Emmet自动格式化设置如下:

第一步:点击File->Preferences->Settings,进入设置界面,如下图所示:Visual Studio Code 前端快速格式化设置

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

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

in Settings.json,如下图所示;Visual Studio Code 前端快速格式化设置

搜索并点击进入配置文件

第三步:在配置文件最后添加配置代码,如下所示,配置之间用逗号隔开,如下图所示:Visual Studio Code 前端快速格式化设置

输入配置信息并保存

配置代码如下:

“editor.formatOnType”:true,

“editor.formatOnSave”: true

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

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

1+0.01=1.01

1-0.01=0.99

内容出处:,

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

发表评论

登录后才能评论