14 工作台和命令面板
- 文件资源管理器 Ctrl Shift E,主要用于浏览和管理文件和文件夹。
- 跨文件搜索 Ctrl Shift F,用于在当前文件夹内进行跨文件的搜索。
- 源代码管理 Ctrl Shift G,用于对当前文件夹下的代码进行版本管理,默认 VS Code 支持的版本管理软件是 Git。
- 启动和调试 Ctrl Shift D,用于对当前文件夹下的项目进行运行和调试。
- 扩展管理 Ctrl Shift X,用于下载和管理 VS Code 里的插件。
如果有哪个功能是你不需要的话,你可以在 VS Code 的最左侧,右键打开上下文菜单,然后将那个组件隐藏。你还可以拖动这几个小图标,然后将这些功能按照你需要的方式排序。
在侧边栏的最下角还有一个齿轮形状的按钮,它提供了一些 VS Code 系统管理常用的快捷键,点击打开后,你可以看到命令面板、设置、键盘快捷方式、管理扩展等等一系列快速入口。
界面的最下面一行则是状态栏,顾名思义,这个组件的作用就是将当前文件夹、编辑器状态、代码版本、代码错误等的简略讯息呈现给你。除此之外,很多插件也会选择将信息呈现在状态栏上。
还有一个非常重要的部分就是面板(Panel),你可以在命令面板中执行“切换面板”命令来打开它。
打开后,看到面板的四个组件:问题面板、输出面板、调试控制台和终端。
问题面板(Problems Panel)的作用是展示当前文件夹下代码里的所有问题和警告,比如你的代码有语法错误、格式问题、拼写错误等,这些问题和警告都会被收集在这个面板中。你可以通过这个面板浏览这些问题并且访问对应的文件。
输出面板(Output Panel)的存在是我特别喜欢 VS Code 的一个原因。GUI 的很大一个作用就是将很多命令行工具以一个更易用的形式呈现给用户,但是当你按下一个按钮后究竟发生了什么,你往往是不清楚的。如果这个按钮所对应的命令执行失败了,你估计更是一头雾水,不知如何是好。
对于这样的问题,VS Code 的答案是避免做一个黑盒,相信用户有能力且有必要了解自己在使用的工具。输出面板的作用就是将核心命令和插件的运行状态和结果输出来,比如你使用 Git 来管理你的代码版本,你的每个 UI 上的版本操作,你都能在输出面板里看到这个操作对应的 Git 命令行以及它的运行结果。这样即使意外发生了, VS Code 无法完成指定的 Git 命令,你依然可以通过阅读输出面板找到问题所在,然后自行修复。
调试控制台主要是在调试代码时使用,之后我会有专门的一讲来介绍。
终端是开发工作中不可或缺的一个工具,VS Code 则更进一步,把终端直接集成了进来。集成终端的存在,使得 VS Code 保持轻量级成为了可能性。
Git 为例,Git 的命令行非常多,VS Code 的版本管理 UI 不可能把所有功能都实现了然后呈现给用户,而且对于绝大多数人而言,大部分时间接触的可能就是几条或者十几条 Git 命令,VS Code 只为这些命令提供 UI。
但如果你对其他功能有需要,那么你可以打开集成终端,使用 Git 命令行进行操作。这里你可能会问,为什么不直接使用系统自带的终端呢?之后回探讨。
剩下还有两个 UI 组件。第一个是菜单栏,这个没有太多可以讲的,VS Code 把常用的命令按功能进行归类放到菜单中,这样你就可以使用操作系统支持的快捷方式进行搜索和访问
第二个 UI 组件就是我们接下来要讲述的命令面板了。
命令面板
命令面板是根据输入框里的第一个字符来决定提供什么功能的
VS Code 会先处理输入框里的文本,然后根据第一个字符来选择不同的处理方案。
当输入框里没有任何的字符时,命令面板提供的功能是访问最近使用的文件。
如果第一个符号是>(大于号),那么就提供所有的命令。继续输入字符时,VS Code 就会在所有命令里进行搜索;如果第一个字符是@,那么就扫描当前文件,提供所有的符号。
那么命令面板里一共支持多少不同的功能呢?这里你可以把输入框里的所有字符全部删掉,看看 VS Code 给你的提示。
首先是几个符号:
>(大于号) ,用于显示所有的命令。- @ ,用于显示和跳转文件中的“符号”(Symbols),在@符号后添加冒号:则可以把符号们按类别归类。
#号,用于显示和跳转工作区中的“符号”(Symbols)。- :(冒号), 用于跳转到当前文件中的某一行。
剩下的都是英文单词或者缩写,知道它们的含义后就可以轻松掌握了:
- edt 是 edit(编辑)的缩写,输入 edt 和一个空格,命令面板就会显示所有已经打开的文件;而
edt active则只会显示当前活动组中的文件。 - ext 是 extension(插件)的缩写,输入 ext 和一个空格,就可以进行插件的管理;
ext install则可以在命令面板中搜索和安装插件。 - task和debug 分别对应于任务和调试功能。这两个功能的使用我会在之后的章节中详细讲解。
- term 是 terminal(终端)的缩写,你可以用这个命令来创建和管理终端实例。
- view 则是用于打开 VS Code 的各个 UI 组件。
跟前面符号不同的是,在输入某个英文缩写的前缀后,你还需要输入一个空格键,然后这个功能就被自动执行了。同时,你能够继续输入字符,在这个功能执行的结果里面进行搜索。
有趣的设置
workbench.commandPalette.history 历史命令记录 ,设置的值改成为 0 的时候,这个历史记录的功能就相当于被关闭了。默认情况下,VS Code 会保存 50 个历史记录。
workbench.commandPalette.preserveInput 默认 false。如果把它的值改成 true ,那么你在命令面板里搜索某个命令并执行,当下次打开命令面板的时,之前输入的值还在命令面板的输入框里。
小结
无论在哪个 UI 组件里,只要按下 Cmd + Shift + P (Windows 上是 Ctrl + Shift + P)或者 F1,总能调出命令面板,然后通过文字输入来操控 VS Code。

浙公网安备 33010602011771号