VS Code 常用配置、快捷键和插件

时间:2022-11-19 14:57:09

工欲善其事,必先利其器!

常见前端开发IDE:HBuilder(国产)、Sublime Text、WebStorm、Visual Studio Code


VS Code

官网:​​​​https://code.visualstudio.com/​

免费的,直接下载;

下面根据常用的内容分为:设置部分、快捷键部分和插件部分; 


设置部分

设置成中文

按快捷键“Ctrl+Shift+P”,顶部会出现一个搜索框。

输入“configure language”,然后回车,将“en-us”修改成“zh-cn”,没有的话,语言包会自动下载。

按“Ctrl+S”保存设置,重启。

扩展列表中,官方出品:

VS Code 常用配置、快捷键和插件


用户设置和工作区设置

VS Code 分用户设置和工作区设置两种;

“文件”->"首选项"->“设置”;  快捷键: Ctrl + ,


用户设置

这种方式进行的设置,会应用于该用户打开的所有工程;

根据个人偏好进行用户设置;

VS Code的设置文件为setting.json;

用户设置的文件保存在如下目录:

Windows:  %APPDATA%\Code\User\settings.json

Linux: .config/Code/User/settings.json

使用习惯后,可以把自定义的 settings.json 同步到其他电脑上。


工作区设置

工作区是指使用VS Code打开的某个文件夹,在该文件夹下会创建一个名为.vscode的隐藏文件夹,里面包含着仅适用于当前目录的VS Code的设置,工作空间的设置会覆盖用户的设置。

多人协作时,项目会有编码规范,可对项目进行单独工作区的设置;

工作空间设置的文件保存在当前目录的.vscode文件夹下。


常用配置项

1)清除结尾空格

设置里,搜索

VS Code 常用配置、快捷键和插件


快捷键部分

1)格式化代码

VS Code 常用配置、快捷键和插件

提示:在结尾或开头使用。笔者更倾向于在处理完文件中的代码后使用。

在Windows系统:Shift键 + Alt键 + F键

在Mac系统:Shift键+ Option键 + F键

在Ubuntu系统:Ctrl键 + Shift键 + I键

2)代码折叠

有时,文件很大,想对代码全面了解,可以代码折叠。

VS Code 常用配置、快捷键和插件

1)在光标处折叠:可以连续按,就连续折叠;

在Windows系统或Ubuntu系统:Ctrl键 + Shift键 + [键

在Mac系统:Command键+ Option键 + [键

2)在光标处展开:

在Windows系统或Ubuntu系统:Ctrl键 + Shift键 + ]键

在Mac系统:Command键+ Option键 + ]键

3)清除结尾空格

清除结尾的多余空白,并帮助处理各种严格的Lints

VS Code 常用配置、快捷键和插件