玩转 VSCode，看这一篇就够了

🎼 前言

虽然我的主开发工具是 WebStorm，但觉得还是有必要好好提一提 VSCode，毕竟微软出品，毕竟将 Sublime 推下了神坛。

即使我平时用 VSCode 并不多，但还有很多 VSCode 的重度用户，用的可能还没有我好。

参照本文的设置步骤，再结合各位自己的一些方法，一定可以把 VSCode 打造成一个比较趁手的兵器。

主要内容

适合读者

• 喜欢 VSCode 的同学
• 把 VSCode 作为首选开发工具，但仍然不怎么会配置的同学

编辑历史

💋 Why VSCode

从 Windows 到 Linux 到 Mac，我用过很多编辑器，说 VSCode 是天花板毫不为过，简介的 UI、丰富的插件、便利的操作，它是目前最接近 IDE 的编辑器。

那些年我用过的编辑器

夹带私货，记录一下这么多年我用过或听说过的编辑器。

怎么看一个编辑器值不值得一试？看它的官网，如果官网很老派，就不要试了，如果官网设计感很强，试它（但也不绝对，VIM 是值得好好研究的）。

我选择编辑器的偏好

• 免费
• 稳定更新
• 界面简洁，配色柔和且支持黑白主题
• 支持渲染空白字符
• 支持 Emmet
• 支持多点编辑
• 插件
• 全面的可自定义性

VSCode 的亮点

⚙️ 常用设置

原生的同步功能出来后，直接让一些插件停止不再需要了。

新装的 VSCode 后第一步该做的事情就是登入账号，左下角 Account 菜单「Turn on Settings Sync...」：

如果你之前同步过，那么等它同步完成，你就有了你习惯的主题、插件、自定义设置、快捷键映射，等等。

如果使用 Github 登录，碰到网速慢而无法操作的问题，可以参考我的 《玩转 Mac 设置，看这一篇就够了》的「Github 访问慢，甚至无法访问怎么办？」一节，中使用 host 的方法。

🚦 启动 / 退出

记住全屏

这是 WebStorm 的默认行为，上次退出程序的时候如果是全屏则再次启动的时候就是全屏，这是符合用户习惯的。

但 VSCode 没有将此行为作为默认项，需要设置一下。

• 关键字：「fullscreen」
• 设置：Window: Restore Fullscreen，勾选
• settings.json："window.restoreFullscreen": true

非预期关闭窗体行为

这是出厂设置中最让我没法接受的默认行为。

我有两个习惯，跟关闭 Tab 有关。

一个常规的习惯，使用快捷键 ⇧⌘W 关闭所有的 Tab；另一个并不是好习惯，就是偶尔会连续敲 ⌘W，即使所有的 Tab 都已关闭，也会无聊地敲几下。

⇧⌘W 看起来是关掉了所有的 Tab，但整个窗体也关掉了；⌘W 会在没有 Tab 的情况下把整个窗体关了。这种情况下，只能用只能用鼠标点开，不能通过键盘 ⌘Tab 出来（因为窗体关了，但进程没关），点开之后，之前打开的项目也不见了，需要重新打开。

VSCode 的这个默认行为令我很抓狂。

但这个问题，并不在常规的设置里，而是快捷键搞的鬼。

首先找出自定义快捷键的界面，两个方法：

• 快捷键（二级跳）：⌘K ⌘S
• 命令面板搜「keyboard」，找到「Preferences: Open Keyboard Shortcuts」

接下来就不会被 VSCode 这个关闭窗体的行为所困扰了。如果你会经常需要「Close Window」，也可以设定一个快捷键，在我是不需要的。

💅 UI 设置

图标

VSCode 自带三套图标方案：

• None：目录和文件没有任何图标
• Minimal：有目录图标，文件图片都一个样，毫无辨识度
• Seti（默认）：文件类型图标还算有辨识度，可输目录没有图标

如果不满意，可以装图标插件，我试过比较不错的有：

• Material Icon Theme
• vscode-icons

效果对比：

默认（Seti）	Material Icon Theme	vscode-icons

个人选择 Material Icon Theme：

• 文件夹默认图标相对低调
• 文件图标相对多一些，比如 CHANGELOG.md、READEME.mD 就不纯粹只是 Markdown 的图标
• 图标线条和颜色相对饱满
• 插件耗时 7ms，比 vscode-icons 的 26ms 好

主题

虽然我是白党，但我觉得 VSCode 的主题对黑党来说会好一些，我也常改来改去。主题太多对选择困难症来说真的是一个灾难。

个人对主题的要求：

以下是我试过觉得不错的主题。

白党

主题	推荐指数	推荐理由	截图
Light Modern	★★★★	原生
Ayu Light Bordered	★★★★★	个人首选白 少有的偏暖色主题，即使是亮色，眼睛也不累
Firefox Light	★★★★★	Firefox 死忠必装，配色相对冷艳，区块清晰
Brackets Light Pro	★★★☆	Brackets 曾经是我很喜欢的一款编辑器，其中之一的原因就是它的 UI 设计，但这里侧边条的背景色有些减分

黑党

主题	推荐指数	推荐理由	截图
Dark+	★★★★	原生
Atom One Dark Theme	★★★★★	个人首选黑 和「One Dark Pro」很像，比较显著的差别是后者的侧边栏没有前者明显
One Dark Pro	★★★★	和 Atom One Dark 很像
Firefox Dark	★★★★☆	Firefox 死忠必备
Andromeda Bordered	★★★★	配色冷艳但舒服
Winter is Coming (Dark Black - No Italics)	★★★☆	《权游》名句：「Winter is Coming」，「X 冷淡」风
Aura Soft Dark	★★★☆	霓虹风
Material Color	★★☆	仅情怀

自定义颜色

所有的颜色几乎都可以自定义，需要编辑用户配置的 JSON 文件，字段为 workbench.colorCustomizations，如：

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#00AA00"
  }
}

所有可用颜色名称参考见官文 Theme Color。

实在觉得喜欢某个主题，但就是揪着其中的一点觉着不舒服，可以试试折腾一下。

🌲 文件树设置

缩进

默认的文件树缩进层级太小，甚至无法辨别文件与目录的关系，看得眼疼，幸运的是，这个大小是可调的。

• 关键字：「indent」
• 设置：Workbench → Tree: Indent，默认 8，改成 16 或 20
• settings.json："workbench.tree.indent": 16

效果对比：

默认（8）	16

隐藏文件或目录

如果用 VSCode 打开 WebStorm 的项目，就会在文件树下看到 .idea。我不希望不小心会动到它。对于此类文件就一个字，「眼不见为净」。

• 关键字：「exclude」
• 设置：Files: Exclude，添加需要隐藏的文件或目录
• settings.json："files.exclude": { ".idea": true }

文件单击打开预览

默认设置如此，无需调整。

Workbench → Tree: Expand Mode，保持默认 singleClick：

并保持 Workbench → Editor: Enable Preview 为默认的 true：

🍄 编辑器设置

开启自动保存

从 WebStorm 养成的习惯，废弃了之前用 Eclipse 的时候，时不时地按一下 ⌘S 以消除保存忧虑的习惯。

如果你实在不习惯或不喜欢自动保存，喜欢 ⌘S 带来的踏实感，可以保持默认设置。

• 关键字：「autosave」
• 设置：Files: Auto Save，选择「afterDelay」
• settings.json："files.autoSave": "afterDelay"

显示空白字符

VSCode 默认只渲染选中文本中的空格，作为「不见空格没安全感」的开发者，需要将其改成永远渲染：

• 关键字：「whitespace」
• 设置：Editor: Render Whitespace，选择「all」
• settings.json："editor.renderWhitespace": "all"

不要删除换行的自动缩进

由于空格是可见的了，在连续敲两行的时候，会发现上一行的缩进空格会被清除掉，很难受，改。

• 关键字：「trim」
• 设置：Editor: Trim Auto Whitespace，取消勾选
• settings.json："editor.trimAutoWhitespace": false

取消挠人的中文标点高亮

如果发现有些正常的中文标点被加上了挠人的黄色背景，如下：

最新的默认设置貌似可以不需要修改就可以达到不挠人的效果。

• 关键字：「unicodeHighlight」
• 设置：Editor → Unicode Highlight: Ambiguous Characters，取消勾选
• settings.json："editor.unicodeHighlight.ambiguousCharacters": false

开启带颜色的缩进线

你应该就不需要 Rainbow Brackets 插件了。

• 关键字：「bracketpairs」
• 设置：Editor → Guides: Bracket Pairs，选择 true
• settings.json："editor.guides.bracketPairs": true

效果对比：

默认（false）	active	true

true 的效果最好，可以看到每条竖线有了颜色，且当前所在的花括号有一条明显的线连起来，你还认为有装「Rainbow Brackets」的必要？

开启内嵌提示

内嵌提示（Inlay Hint）对提升代码阅读效率很重要，强烈建议开启。

• 关键字：「inlayhint」
• 设置：能勾选的都勾选，能选「all」的都选「all」
• settings.json：[language].inlayHints.[what].enabled

效果对比：

默认	开启

⛱️ 代码格式规范设置

VSCode 没有像 WebStorm 那样专门的 Code Style 配置。

你可以设置是否按 Tab 的时候用空格代替，多少个空格。

这块我目前没怎么设置，基本保持预设。

🍃 其他

命令行启动

快捷键 ⇧⌘P 打开命令面板，输入「install」，将 code 命令安装到 PATH，这样，在 Terminal 中临时想改文件就不再局限于 VIM 了（VIM 高手可鄙视此做法）。

取消烦人的声音

可能是最近才出的新功能吧，就是挺烦人的，画波浪线的地方响一声「咕咕」，代码折叠的地方响一声「咣」...不想在写代码的时候被奇奇怪怪的声音打扰。

搜「Audio Cue」可以看到一堆的设置，但没有一个统一的开关（不够友好）。

能关就都关了吧，希望可以出个总开关（虽然有个音量设置可以设为 0）。

🧩 插件推荐

Project Manager

编辑器向 IDE 迈进的第一步。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★★

GitLens

装它就是了。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★★

ESLint

前端开发，装它就是了。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★★

Stylelint

有节操的程序员，各种 Linter 都应该安排上。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★☆

Markdownlint

Webstorm 都没有这个插件。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★

Beautify

⚠️ 已停止维护。

开箱即用，方便；速度非常快。探查线上代码的时候我会用它先格式化一下。虽然已经停止维护了，我还是希望提一笔，因为真的好用。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★★

Prettier

不用 Beautify 的话，可以用 VSCode 自带的「Format Document With...」加「Prettier」，速度比不上 Beautify。

虽然个人不是 Prettier 的粉丝，因为我不喜欢编辑器改我的代码，但偶尔用来格式化部分代码还是可以的。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★

Code Snapshot

写 PPT 需要代码截图，用它。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★

Code Spell Checker

不要以为你英语好就可以不用 Spell Checker 了。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★★

Better Comments

人类友好的注释。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★★

String Manipulation

好多类似的插件，还有 Text Manipulator、change-case 等。

change-case 有个小小的 BUG（或者是 Feature），当没有选中的文本会弹窗报错。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★☆

Increment Selection

如果你喜欢写 Markdown 的时候，为每一行增加一个序号，那么这个插件能帮你省掉很多麻烦，多光标搭配快捷键 ⌥⌘I 瞬间搞定。

• URL：marketplace.visualstudio.com/items?itemN…
• 推荐指数：★★★☆

⌨️ 快捷键

官方文档：Key Bindings for Visual Studio Code

如何自定义

虽然之前已经有提到，但这里还是在啰嗦一遍。你可以通过以下两个方法唤出 VSCode 快捷键自定义界面：

• 快捷键（二级跳）：⌘K ⌘S
• 命令面板搜「keyboard」，找到「Preferences: Open Keyboard Shortcuts」

💡 快捷键小贴士（⌃⌥⇧⌘）：

• ⌘ Comand：最常用的快捷键组成，可配合任何键以及鼠标点击合并；很多 Windows 下以 ⌃ 作为快捷键主键的，在 Mac 下用 ⌘
• ⇧ Shift：一般不会单独在快捷键组合中出现，它的作用主要由两个：「反向」和「圈选」（记住这点非常重要）
  • 反向：改变行为的方向，比如 ⇥ 的行为是「下一个」，而 ⇧⇥ 是「上一个」
  • 圈选：产生圈效果，比如普通的点击只是切换了焦点，但配上 ⇧ 再点，则会圈选前后点击包含的所有元素，再比如编辑文本的时候按方向键只是改变了光标，配上 ⇧ 则会选中光标经过的地方的文本
• ⌥ Option：当 ⌘ 组合被用完后，可以用它作为主键
• ⌃ Control：和 ⌘、⌥ 差不多，唯一的区别是 ⌃Click 被系统默认用作打开右键菜单的方式

带 🌈 标记表示需要自定义。

高频快捷键 - 快速编辑

高频快捷键 - 移动光标

高频快捷键 - 选择文本

高频快捷键 - 查找替换

高频快捷键 - 多点编辑

在创建多个光标后，结合箭头、移动光标快捷键等，绝对是炫技提效必备。

高频快捷键 - 通用

高频快捷键 - 特有功能

🕸️ 有用链接

• VSCode 官网
• VSCode 插件
• VSCode Gold Series 很多经验和技巧
• VSCode Themes 你可以在这里搜索和预览主题，解决你的主题荒

🙋 FAQ

❓ 为什么不用默认的 ⌘⌫ 删除整行，而是 ⌘D 呢？

前者虽然删除了行的内容，但没有删除这一行，需要再敲一个 ⌫ 才能彻底让这一行消失，后者一次搞定。

❓ 如何切换偏好/快捷键的 JSON 编辑模式？

对应的界面右上角有个图标，点它就会切换到 JSON 格式，可以直接编辑：

❓ 如何解决 ESLint 无提示的问题？

最新版已经没有问题了。

ESlint 插件装了，项目下的依赖也装了，但编辑器上就是没有波浪线，这种问题通常出现在 TS 项目中。

首先确认一下状态栏下 ESLint 没有任何报错（没有警告 Icon）。

没问题的话，直接编辑偏好 JSON：

{
  ...,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [ "typescript", "typescriptreact" ]
}

🪭 写在最末

VSCode 可以说是最像 IDE 的编辑器了，下载的安装包其实是一个压缩包 200M，解压后 500M。 装了各种插件后，发现它的体积已经比 WebStorm 的 1.6G 要大了，居然有 1.9G。

VSCode 功能绝对强大，本文标题「看这一篇就够了」，纯属扯牛皮，更多的细节还待各位在使用的过程中慢慢发现。

「Happy using it」。