1 命令面板

  • 命令面板是根据输入框里的第一个字符来决定提供什么功能的

Cmd + Shift + P打开命令面板,打开之后,命令面板的输入框里已经有一个字符:>(大于号)

vscode 控制台找不到yarn vscode调出控制台_多文件夹工作区


1.1 几个符号

  1. >(大于号) ,用于显示所有的命令。
  2. @ ,用于显示和跳转文件中的“符号”(Symbols),在@符号后添加冒号则可以把符号们按类别归类。
  3. #号,用于显示和跳转工作区中的“符号”(Symbols)。
  4. (冒号), 用于跳转到当前文件中的某一行。

vscode 控制台找不到yarn vscode调出控制台_vs code_02


输入这些符号后,继续输入相应内容就可以对结果进行搜索了

1.2 命令面板的设置

  • 第一个设置是workbench.commandPalette.history。在命令面板里搜索并执行操作后,这些刚刚执行过的操作就会被记录下来,并且刚刚被执行的命令会出现在命令面板的最上面,这样的话,能够立刻看到常用的那几个命令。默认情况下,VS Code 会保存 50 个历史记录,也可以通过这个设置来修改。比如,当你把这个设置的值改成为 0 的时候,这个历史记录的功能就相当于被关闭了。
  • 另一个设置是 workbench.commandPalette.preserveInput,它的默认值是 false。如果你把它的值改成 true 的话,那么你在命令面板里搜索了某个命令并执行了,当你下次打开命令面板的时候,之前输入的值还在命令面板的输入框里。

2 文件管理

  • VS Code 是允许创建几个跟当前文件夹或者跟项目有关的配置保存在这个文件夹中。这跟 IDE 的工程文件的思路是一致的,把设置放在这个文件夹中,便于团队内部进行共享。但二者区别在于,VS Code 的绝大部分功能,不需要这些配置文件也能工作,同时,这些文件都尽可能保证易于阅读和修改。
  • 为了和其他工具添加的配置文件区分开,VS Code 的配置文件都会放在一个子文件夹 .vscode

  • 配置文件(settings.json)。这个文件的作用和格式,跟之前修改的用户设置几乎是完全一样的。唯一的区别就在于这个文件的设置,只有当前这个文件夹在VS Code 中被打开时才会生效。【这个文件的存在,很好地解决了个人喜好和项目规范之间的冲突。比如说自己写代码的时候喜欢用空格,而不是制表符,这样的话,在个人设置里面就可以设置为永远使用空格。但是在VS Code的这个项目中,团队要求一定要都使用制表符,那就可以在 settings.json中将这个配置写进去,而不是粗暴地要求每一位成员都去修改他们各自的配置文件。】
  • 调试设置(launch.json),它是用于说明如何调试当前文件夹下的代码;
  • 任务设置(tasks.json),它是关于 VS Code 任务系统的配置文件。把它们放在文件夹中甚至一并放入到代码仓库中,这样任何使用这个项目的工程师,都不用学习如何配置调试和配置任务系统就能运行代码了。

当然如果不喜欢在代码仓库中出现编辑器相关的各种配置文件,不过也不用担心,可以使用版本管理的忽略配置,将.vscode这个文件夹剔除在版本管理之外。那么,就可以自己去控制跟这个项目相关的配置文件了。

3 多文件夹工作区(multi-root workspace)

vscode 控制台找不到yarn vscode调出控制台_工作区_03

创建一个多文件夹工作区。

  1. 首先,在 VS Code 中打开一个文件夹,此时 VS Code 处于一个单文件夹的状态。然后你可以调出命令面板,搜索 “将文件夹添加到工作区” (add folder to workspace)并执行,或者使用菜单,“文件 —> 将文件夹添加到工作区”,这之后,选择想要在当前窗口打开的文件夹。

  • 此时在资源管理器里的标题栏里,你能看到“无标题 (工作区)”这样的文字,这说明当前的工作区已经有多个文件夹了,只是现在你还没有保存这个多文件工作区,也没有给它指定一个名字。
  • 要保存这个工作区,接下来可以调出命令面板,搜索“将工作区另存为” (save workspace as),VS Code 就会为这个工作区创建一个文件,这个文件的后缀名是 “code-workspace”。比如,在下面的动图中,我给这个工作区取名为 tzb,然后指定在 Code中这个文件夹下保存。这样操作后,VS Code 就会在 Code 文件夹下创建一个 tzb.code-workspace 文件。

vscode 控制台找不到yarn vscode调出控制台_vs code_04


vscode 控制台找不到yarn vscode调出控制台_vscode 控制台找不到yarn_05


  • 操作完之后资源管理器的标题栏已经相应地改变了。另外,tzb.code-workspace 虽然有个特殊的后缀,但这个文件的格式其实也是 JSON
  • 这个 JSON 文件,默认有两个键(key)。第一个是 folders 文件夹,它里面罗列的是这个多文件工作区里有哪些文件夹。可以看出,这些文件夹的地址,都是这个 tzb.code-workspace 文件的相对路径。第二个则是 settings 设置,可以在这个值里面添加专属于这个多文件夹工作区的设置。它的作用,跟上面介绍的.vscode 文件夹下的settings.json 文件是类似的。
  • 这个文件还有两个可选的键,它们分别是 extensionslaunch
  • vscode 控制台找不到yarn vscode调出控制台_多文件夹工作区_06


3.1 工作区切换

  • 如果同时打开了多个窗口,可以按下 Ctrl + W,或者调出命令面板,搜索 “切换窗口(Switch Window)”,然后选择你要跳转的那个文件夹中去。
  • 如果同一时间只会关注一个项目,大可不必使用多个窗口。然后当想在另外一个项目上工作时,按下 Ctrl + R(或者使用命令面板,搜索 “打开最近的文件”),此时就能够看到最近操作过的文件夹并按下回车键进行切换了。