本文目录

VSCode 命令面板

🌙
手机阅读
本文目录结构

VSCode 命令面板

命令面板,我们在之前的学习过程中已经多次使用了。命令面板是一个非常特殊的 UI 组件,假如说你从来没有用过 VS Code 或者 Sublime 之类的编辑器,第一次打开 VS Code 后,你可以无障碍地使用资源管理器、搜索等组件,因为它们是直接可见的。

但是没有任何提示的话,你可能很长时间都不会发现命令面板。虽然它的可发现性(discoverability)不太好,但也是 VS Code 最重要的组件之一。在我看来,它是一个基于文本的交互界面。怎么理解这句话呢?你可以先通过快捷键 F1 或者 Cmd + Shift + P 打开命令面板,打开之后,命令面板的输入框里已经有一个字符:>(大于号) 。

VSCode 命令面板 F1 或者 Cmd + Shift + P 打开命令面板

你可能会好奇,这个大于号是干嘛用的呢?你可以回想一下在前面“编辑器 —> 快速代码跳转”文章里介绍的快速访问文件中的符号 ,当你按下 Cmd + Shift + O (Windows 上是 Ctrl + Shift + O)打开了命令面板,控制面板显示了当前文件里的所有符号,此时输入框里的第一个字符是 @。

VSCode 命令面板 Cmd + Shift + O 打开命令面板快速访问符号

看到这里你应该猜到了,命令面板是根据输入框里的第一个字符来决定提供什么功能的。你甚至不难猜出 VS Code 是怎么实现命令面板的,VS Code 会先处理输入框里的文本,然后根据第一个字符来选择不同的处理方案。

如果第一个符号是》(大于号),那么就提供所有的命令。当你继续输入字符时,VS Code 就会在所有命令里进行搜索;如果第一个字符是 @,那么就扫描当前文件,提供所有的符号。

那么命令面板里一共支持多少不同的功能呢?这里你可以把输入框里的所有字符全部删掉,看看 VS Code 给你的提示。

VSCode 命令面板 删除输入框里的所有字符

当输入框里没有任何的字符时,命令面板提供的功能是访问最近使用的文件。同时你会在输入框内看到一段提示文字:键入 “?”从此处获取有关可进行的操作的帮助。接下来,你就依照这个提示,输入问号。

VSCode 命令面板 在输入框里输入问号

紧接着你就可以看到十几条选项,分别代表着你能在命令面板里使用的不同的功能。虽然有十几条选项,但是记住它们并不是太难。

首先是几个符号

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

这几个符号所对应的命令我们在之前的文章中已经研究过,比较好记。输入这些符号后,继续输入相应内容就可以对结果进行搜索了。

剩下的都是英文单词或者缩写,知道它们的含义后就可以轻松掌握了:

  • edt 是 edit(编辑)的缩写,输入 edt 和一个空格,命令面板就会显示所有已经打开的文件;而 edt active 则只会显示当前活动组中的文件。
  • ext 是 extension(插件)的缩写,输入 ext 和一个空格,就可以进行插件的管理;ext install 则可以在命令面板中搜索和安装插件。
  • task 和 debug 分别对应于任务和调试功能。这两个功能的使用我会在之后的章节中详细讲解。
  • term 是 terminal(终端)的缩写,你可以用这个命令来创建和管理终端实例。
  • view 则是用于打开 VS Code 的各个 UI 组件。

跟前面符号不同的是,在输入某个英文缩写的前缀后,你还需要输入一个空格键,然后这个功能就被自动执行了。同时,你能够继续输入字符,在这个功能执行的结果里面进行搜索。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了