优秀的编程知识分享平台

网站首页 > 技术文章 正文

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

nanyue 2024-09-04 10:00:26 技术文章 6 ℃

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

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

Emmet自动格式化设置如下:

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

第二步:在搜索框输入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

最近发表
标签列表