vscode 终端 进入node_玩转 VS Code 之你可能不知道的一些技巧

点击上方蓝色“玩转 VS Code”关注，设个星标，不会让你失望

上篇文章在对比三大编辑器时，对 VSCode 做了简单的介绍。这篇文章介绍和具体语言无关、认为值得提到的点，方便后续用 VSCode 开发时更得心应手。

虽然 VSCode 有简体中文插件，可以让界面变成中文，但我个人强烈建议大家保留英文界面。使用中即使遇到不懂的英文，建议查一下，当作学习了。毕竟英语是计算机必备的。

界面介绍

VSCode 的下载安装就直接省略了。

启动 VSCode 后，默认会显示欢迎界面。

通过这个界面可以快速了解 VSCode 的一些情况。你可以点击 Learn 中的 Interface overview，熟悉下主界面的功能。

关掉欢迎界面后，在主界面区会看到 4 个常用的快捷键，你应该记住它们。(记住的方法，个人建议要用相关功能时，刻意使用快捷键的方式)

打开某个文件，相关界面说明如下图：

其他的界面元素，不一一介绍，但状态栏你应该留意。接下来着重介绍下我认为特别棒或你容易忽略的点。

Breadcrumbs

编辑器在其内容上方有一个导航栏，称为 Breadcrumbs。它显示当前位置，并允许您在文件夹、文件和符号之间快速导航。这就好比网站的导航，让你不会迷失。

其中下拉框是点击后出现的。Breadcrumbs 总是显示文件路径，如果当前文件类型对符号有语言支持，则符号路径一直到光标位置。

Explorer

这是在左侧的，用于浏览、打开和管理项目中的所有文件和文件夹。

基于 Explorer，VS Code 可以让你很方便的和其他工具协同工作。还记的上文提到搞过的，VS Code 集成了终端，通过 Explorer 可以方便的基于某个文件夹打开终端：右键单击该文件夹并选择 Open in Command Prompt (或 Open in Terminal on macOS 或 Linux)。下面是右键后弹出的菜单。注意，根据你安装的扩展不同，该菜单内容可能不一样。

其中的 Reveal in Finder、Find in Folder、Copy Path 等都是很常用的。

Explorer 中还有其他子视图，比如 Outline、Timeline 等，自己去探索吧。(Timeline 你可以看看，说不定有意外收获)

预览模式

VS Code 是多标签(Tab)的。当在 Explorer 中单击或选择文件时，该文件将以预览模式显示，并重用现有的标签。这是有用的，如果你是快速浏览文件，并不希望每个访问的文件有自己的标签。不过这有时候也可能为你带来麻烦，不给过 VS Code 尽量在做到最好：当你开始编辑该文件或使用双击从资源管理器打开该文件，亦或是在标签上双击时，将专门为该文件创建一个新的标签。

为了便于区分，预览模式在 Tab 标题中用斜体表示。当然如果你不喜欢预览模式，可以通过 workbench.editor.enablePreview 禁用。

VS Code 设计上很轻巧，只包含必须的内容，比如基本的编辑功能，文件管理、窗口管理和首选项配置。同时 JavaScript/TypeScript 和 Node.js 默认包含。

因此 VS Code 不像 IDE，很多功能没法开箱即用，需要进行一些安装、配置。好在这个过程不复杂。

配置

VS Code 很灵活，编辑器、界面、功能等都可以配置。VS Code 为配置提供了两种不同的作用域：

• User Settings：全局应用于所打开的 VS Code 的任何实例的设置
• Workspace Settings：设置存储在你的工作空间中，只有当工作空间被打开时才应用

工作区设置覆盖用户设置。工作区设置是特定于项目的，可以在项目的开发人员之间共享。团队协作，可以考虑工作区设置。

除此之外，实际还支持具体文件夹的配置，见下图和 User、Workspace 并列的 Folder。红框表示支持的配置分组。

这里有官方提供的一份默认配置：https://code.visualstudio.com/docs/getstarted/settings#_default-settings，通过 ⌘ + ⇧ + P，打开命令面板，输入 Open Default Settings 即可查看默认的配置。

默认情况下，配置是通过可视化的方式进行的。如果希望直接编辑配置文件，即修改 JSON 文件，通过命令面板，输入 Open Settings(JSON) 打开即可。

特定语言的配置

我的个人习惯，Go 使用 tab/4 缩进，HTML 喜欢用 tab/2 缩进。有些编程语言习惯使用空格代替 tab。针对这样的需求，VS Code 能实现吗？这就是特定语言的配置。

同样，打开命令面板，输入：Configure Language Specific Settings。会让你选择要配置的语言。这里配置下 HTML，在配置文件中增加如下代码：

"[html]": {
    "editor.tabSize": 2
}

这样 HTML 文件默认就是 tab/2 了，而其他的语言不受影响。

快捷键

VSCode 支持设置各种快捷键，一般建议用默认的。但为了方便从其他编辑器转过来的用户，VSCode 提供了快捷键绑定扩展，可以方便使用你熟悉的编辑器快捷键。

Mac 下点击 Code > Preferences > Keymaps，可以选择你喜欢的编辑器快捷键：

选择一个你习惯的。我使用了 Vim。

扩展(插件)

这是 VSCode 强大的地方。VSCode 在设计之初就够轻量，只包含大多数开发工作流之间共享的最少数量的组件。包括一些基本功能，如编辑器，文件管理，窗口管理和首选项设置。另外，JavaScript/TypeScript 语言服务和 Node.js 调试器也是基础安装的一部分(因此天然适合前端开发人员)。

因为插件众多，怎么选择适合自己的插件？VSCode 很友好，在你打开某个类型的文件时，会自动为你推荐合适的插件。比如当你打开一个 Python 源文件时，会出现如下提示(如果未安装)：

推荐给你的，一般建议安装。

更新节奏

VS Code 每个月都会发布一个新版本，其中包含新特性和重要的 bug 修复。大多数平台都支持自动更新，当新版本可用时，系统会提示你安装新版本。你也可以通过在 Linux 和 Windows 上运行 Help > Check for Updates 或者在 macOS 上运行 Code > Check for Updates 来手动检查更新。

这个东西，也许你会喜欢

发现这么一个东西，可以试试：注意大于等于号。

具体参考 FiraCode。

后续

这篇可能对熟悉 VSCode 的人没有太多帮助。从下篇开始，会通过一个项目的形式，来实际使用 VSCode，在使用过程中帮助你掌握 VSCode 的各种功能，提升开发效率。

想要了解更多 VS Code 的知识，欢迎阅读 VS Code 黑宝书！

薅当当羊毛！花 160 买 400 好书！

优惠码：4APMKX