编辑器 VSCode

插件安装位置为 ~/.vscode/extensions/ 下。

喜欢的配置

1. 隐藏菜单栏

在稍微熟练 VSCode 后菜单栏的存在就显得有些多余,占位也偏多。

打开 Settings,输入 菜单栏(中文)Menu Bar Visibility(英文) 可找到该配置项,选择 toggle 即当按下 ALT 时会进行显隐切换。

2. 侧边栏

虽然侧边栏默认是在左边,但编写代码时基本无需关注菜单栏的状态,放在右边更为恰当。

打开 Settings,输入 侧边栏(中文)Side Bar(英文) 可找到该配置项,选择 right 即可。

CTRL + B 可快速切换侧边栏显隐。

3. 禅模式

更为专注的模式,不过我也仅在编写文档笔记时使用。

VSCode 界面中按下 CTRL + K 然后再按下 Z 即可进入禅模式。

4. 文件跳转

VSCode 界面中按下 CTRL + P 即可进入搜索,找到对应的文件即可。

如果知道在当前文件夹且知道位置那么可以按下 CTRL + SHIFT + E 打开资源管理器,再使用上下键即可。

5. 创建文件/文件夹

可根据 侧边栏文件跳转 中的步骤进入对应位置。

先按下 CTRL + K,再按下 CTRL + S 即可进入快捷键设置。输入 newFile 绑定按键 CTRL + N,在搜索 newFolder 绑定按键 CTRL + SHIFT + N,当然也可以选择你喜欢的。

快捷键

切换工作区

编辑:Ctrl + 1/2/3

命令行:CTRL + ~

菜单(资源管理器):Ctrl + Shift + E

菜单(搜索):Ctrl + Shift + S

菜单(源代码管理器):Ctrl + Shift + G

菜单(调试):Ctrl + Shift + D

主题配置

作为视觉动物,一个良好的配色可以帮助你更快的识别问题。

1. 区分项目

可利用 Title Bar Colors激活、未激活 颜色来区分开启的多个 VSCode 窗口,可在中国色在新窗口打开选取喜欢的颜色。

版本提升

1. 快速启动 scripts 脚本 v1.37

打开项目后在侧边栏会根据 package.json 脚本生成 NPM SCRIPTS ,点击即可快速启动。

2. 对比差异 v1.41

利用 CTRL 选中 2 个文件,然后右键 Select for Compare 即可查看两个文件之间的差异。

3. 时间线 unknown

查看一个文件被 git 跟踪的记录。

打开 Settings,切换到 JSON 格式:

{
  "timeline.showView": true
}

4. 建议预览 v1.57

对提示的代码进行预览,当提示的内容较多时比较实用。

打开 Settings,切换到 JSON 格式:

{
  "editor.suggest.preview": true,
  "editor.suggest.previewMode": "subwordDiff"
}

参考资料

  1. VSCode在新窗口打开