vscode学习笔记(一):工作台

作为日常工作中必不可少的开发工具

IDE的使用熟练程度甚至可以比肩开发语言,正确、快速的使用IDE能够达到事半功倍的效果

现就来补习一下vscode,以此当做学习笔记

平台:windows 10

vscode版本:1.40.0


工作

我们把 VS Code 的整个界面统称为工作台(Workbench),它就像是木匠的工作桌,上面摆放着做木工活时需要的各式工具,一个好的匠人一定会精心摆置自己的工作台,把最需要的、频繁使用的工具放在最顺手的地方,并充分利用桌子的空间,但又不喧宾夺主

编程也是一样,除了使用核心的编辑器,我们也经常需要快速访问文件目录,使用终端运行一些脚本或者使用版本管理工具等等,因此我们就需要了解 VS Code 的工作台上都有哪些工具,它们是干什么的,以及工作时需要使用哪些才有可能事半功倍

首先,打开欢迎界面,并且点击界面右侧的“界面概览

不得不说,VS Code真是太贴心了,将描述和快捷键都展现了出来




侧边栏

这时你能够看到,在默认设置下 VS Code 的左侧侧边栏有五个组件,它们分别是:

文件资源管理器,主要用于浏览和管理文件和文件夹

跨文件搜索,用于在当前文件夹内进行跨文件的搜索

源代码管理,用于对当前文件夹下的代码进行版本管理,默认 VS Code 支持的版本管理软件是 Git

启动和调试,用于对当前文件夹下的项目进行运行和调试

扩展管理,用于下载和管理 VS Code 里的插件

如果有哪个功能是不需要的话,可以在 VS Code 的最左侧,右键图标打开上下文菜单,然后将那个组件隐藏

你还可以拖动这几个小图标,然后将这些功能按照你需要的方式排序



设置

在侧边栏的最下角还有一个齿轮形状的按钮,它提供了一些 VS Code 系统管理常用的快捷键,点击打开后,可以看到命令面板、设置、键盘快捷方式、管理扩展等等一系列快速入口



面板

不过“界面概览”并没有覆盖所有的组件,其中一个非常重要的部分就是面板(Panel),你可以在命令面板中执行“切换面板”命令来打开它

打开后,你会看到面板的四个组件:问题面板、输出面板、调试控制台和终端

问题面板(Problems Panel):作用是展示当前文件夹下代码里的所有问题和警告,比如你的代码有语法错误、格式问题、拼写错误等,这些问题和警告都会被收集在这个面板中。你可以通过这个面板浏览这些问题并且访问对应的文件。

输出面板(Output Panel):GUI 的很大一个作用就是将很多命令行工具以一个更易用的形式呈现给用户,但是当你按下一个按钮后究竟发生了什么,你往往是不清楚的,如果这个按钮所对应的命令执行失败了,你估计更是一头雾水,不知如何是好

对于这样的问题,VS Code 的答案是避免做一个黑盒,相信用户有能力且有必要了解自己在使用的工具

输出面板的作用就是将核心命令和插件的运行状态和结果输出来,比如你使用 Git 来管理你的代码版本,你的每个 UI 上的版本操作,你都能在输出面板里看到

这个操作对应的 Git 命令行以及它的运行结果。这样即使意外发生了, VS Code 无法完成指定的 Git 命令,你依然可以通过阅读输出面板找到问题所在,然后自行修复


调试控制台:主要是在调试代码时使用

终端:是开发工作中不可或缺的一个工具,VS Code 则更进一步,把终端直接集成了进来,集成终端的存在,使得 VS Code 保持轻量级成为了可能性


菜单

菜单栏,这个没有太多可以讲的,VS Code 把常用的命令按功能进行归类放到菜单中,这样你就可以使用操作系统支持的快捷方式进行搜索和访问


命令面板

命令面板是一个非常特殊的 UI 组件

假如说你从来没有用过 VS Code 或者 Sublime 之类的编辑器,第一次打开 VS Code 后,你可以无障碍地使用资源管理器、搜索等组件,因为它们是直接可见的

但是没有任何提示的话,你可能很长时间都不会发现命令面板

虽然它的可发现性(discoverability)不太好,但也是 VS Code 最重要的组件之一

通过快捷键 F1 或者 Ctrl+ Shift + P 打开命令面板,打开之后,命令面板的输入框里已经有一个字符:>(大于号) 

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

如果第一个符号是>(大于号),那么就提供所有的命令

当你继续输入字符时,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”

在命令面板里搜索并执行操作后,这些刚刚执行过的操作就会被记录下来,并且刚刚被执行的命令会出现在命令面板的最上面,这样的话,能够立刻看到你常用的那几个命令

默认情况下,VS Code 会保存 50 个历史记录,当然也可以通过这个设置来修改

比如,当这个设置的值改成为 0 的时候,这个历史记录的功能就相当于被关闭了


至此,VS Code的工作台看完了

我们下篇文章见~

赫墨拉

我是一个喜爱大数据的小菜鸡,这里是我分享我的成长和经历的博客

You may also like...

发表评论

电子邮件地址不会被公开。