轻松入门VSCode，这篇教程带你搞懂一切

最编程 2024-07-19 10:21:59

...

???? 前言

跟着本文章节，一步一步操作（设置、插件、快捷键等），一定能把 VSCode 打造成作者我喜欢的样式和行为，加上读者你自己的一些喜好，一定可以把 VSCode 打造成你自己趁手的编辑器。

入坑 VSCode，看这一篇就够了。

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

来看这篇文章的，想必 VSCode 粉丝差不了，但我依然 强烈推荐 你去试试 WebStorm，如果你没怎么用过的话，可以看看我的另外一篇文章《入坑 WebStorm，看这一篇就够了》。

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

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

主要内容

适合读者

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

编辑历史

日期	版本说明
2023/09/02	V2，由《玩转...》重命名为《入坑...》
2023/08/31	V1

???? Why VSCode

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

那些年我用过的编辑器

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

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

编辑器	收费	支持 OS	推荐指数	一句话说明
Vim	免费	Windows / Mac / Linux	★★★★★	编辑器之神
Emacs	免费	Windows / Mac / Linux	★★★	神之编辑器
Sublime	免费	Windows / Mac / Linux	★★★★☆	掀起了编辑器革命，但界面有点单调，这么多年了，连个设置界面都还没做起来
Nova 前 Coda	付费	Mac	★★★★	漂亮、强大，主攻前端，非常值得一试，但用来做主开发器有点适应不了
Brackets	免费	Windows / Mac	★★★☆	界面漂亮，有很多亮眼功能（Adobe 发起，曾经死了，2023 再看，又活过来了居然）
Komodo IDE	开源免费	Windows / Mac / Linux	★★★☆	看上去不错
Atom	免费	Windows / Mac / Linux	★	已停止维护
LightTable	免费	Windows / Mac / Linux	★	已停止维护
BBEdit 前 TextWrangler	免费 / 付费	Mac	★★☆	老牌 Mac 编辑器，我浅浅用了一下，没什么深的印象
TextMate	开源免费	Mac	★★★	个人觉得比 BBEdit 好用，但已经快维护不动了似乎（上次更新是 2021 年）
Kate	免费	Windows / Mac / Linux	★★★☆	界面有些类似 VSCode，但整体风格偏向 Linux 多一些，偏硬
UltraEdit	付费	Windows / Mac / Linux	★★★★	早期的业界老大
~~Notepad++~~	免费	Windows	☆	~~UltraEdit 之后的 Windows 编辑器王者~~ 作者在软件中带政治色彩，尤其有「反华」言论，抵制吧 ????
AkelPad	免费	Windows	★★★☆	主打一个轻量绿色，我是在 TotalCmd 里认识的它
EditPlus	付费	Windows	★★★	「顶部超多按钮」
PsPad	免费	Windows	★★★	有点特色，用过一段时间
HippoEdit	免费	Windows	★★★	可能是 WinXP 下算漂亮的编辑器
EditPadPro	付费	Windows	★★★★	有 Lite 版本，JGSoft 家的 RegexBuddy 是最强的正则学习分析工具
CotEditor	开源免费	Mac	★★	没用过，界面比较老派
Textastic	付费	Mac	★★	没用过，在 iPad 上体验据说不错，还可以做 SFTP、SSH 客户端
EditRocket	免费	Windows / Mac / Linux	★★	没用过，界面比较老派，看风格有点像 JGSoft
Smultron	付费	Mac	★	没用过
CudaText	开源免费	Windows / Mac / Linux	★	没用过
Nano a.k.a Pico	免费	Mac / Linux	★	-	知道有 `nano` 或 `pico` 这两个命令就好了

我选择编辑器的偏好

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

VSCode 的亮点

开源免费，处于积极维护的状态，基于 Monaco
初始界面干净友好，不像 Sublime 那样，初始态就一个框，也不像某些编辑器那样顶部有超多的按钮
很多优秀的从 Sublime 学习来的特性（命令面板、MiniMap、多点编辑）
丰富的配置项，既有 GUI 设置界面，又可以直接文本编辑
强大的编辑器
海量的插件

⚙️ 常用设置

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

新装的 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」

取消 ⇧⌘W 的默认行为「Close Window」
取消 ⌘W 在条件允许的时候「Close Window」
为「View: Close All Editors」添加快捷键 ⇧⌘W

接下来就不会被 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…
推荐指数：★★★★

Tabnine ★★★★☆

AI 这么火，怎能不装它。WebStorm 下也有此插件。

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…
推荐指数：★★★☆

Draw.io Integration ★★★★★

这也太强大了。

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

⌨️ 快捷键

官方文档：Key Bindings for Visual Studio Code

如何自定义

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

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

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

⌘ Command：最常用的快捷键组成，可配合任何键以及鼠标点击合并；很多 Windows 下以 ⌃ 作为快捷键主键的，在 Mac 下用 ⌘

⇧ Shift：一般不会单独在快捷键组合中出现，它的作用主要由两个：「反向」和「圈选」（记住这点非常重要）

反向：改变行为的方向，比如 ⇥ 的行为是「下一个」，而 ⇧⇥ 是「上一个」

圈选：产生圈效果，比如普通的点击只是切换了焦点，但配上 ⇧ 再点，则会圈选前后点击包含的所有元素，再比如编辑文本的时候按方向键只是改变了光标，配上 ⇧ 则会选中光标经过的地方的文本

⌥ Option：当 ⌘ 组合被用完后，可以用它作为主键

⌃ Control：和 ⌘、⌥ 差不多，唯一的区别是 ⌃Click 被系统默认用作打开右键菜单的方式

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

高频快捷键 - 快速编辑

快捷键	预设值	功能	Command	说明
⇧⇥	⇧⇥	取消缩进（反向 Tab）	`outdent`
???? ⌘D	⌘⇧K	删除光标所在行（所选行）	`editor.action.deleteLines`
⌥↑	⌥↑	所选行/光标所在行上移	`editor.action.moveLinesUpAction`	没有 WebStorm 智能
⌥↓	⌥↓	所选行/光标所在行下移	`editor.action.moveLinesDownAction`	没有 WebStorm 智能
⌘/	⌘/	单行注释	`editor.action.toggleLineComment`
???? ⇧⌘/	⌥⇧A	多行注释	`editor.action.blockComment`	需要改系统快捷键，对应系统快捷键是呼出帮助
⌥⇧F	⌥⇧F	格式化代码	`editor.action.formatDocument`	???? 和 WebStorm 不一样
???? ⇧⌘J	⌃J	合并所选行	`editor.action.joinLines`
???? ⇧⌘X	-	切换成大写	`editor.action.transformToUppercase`	没有 WebStorm 好用，可以一个快捷键在大小写间来回切换
???? ⌥⇧⌘X	-	切换成小写	`editor.action.transformToLowercase`	前面的快捷键上附加一个 ⌥
???? ⌥⌘↑	⌥⇧↑	向上复制一行	`editor.action.copyLinesUpAction`
???? ⌥⌘↓	⌥⇧↓	向上复制一行	`editor.action.copyLinesDownAction`
???? ⌘⌫	⌥⌫	从光标处删除到整个词首	`deleteWordLeft`	VSCode ⌘⌫ 默认为到行首，先解除之
???? ⌘⌦	⌥⌦	从光标处删除到整个词尾	`deleteWordRight`
???? ⌥⌫	⌃⌥⌫	从光标处删除到分词的词首	`deleteWordPartLeft`
???? ⌥⌦	⌃⌥⌦	从光标处删除到分词的词尾	`deleteWordPartRight`

高频快捷键 - 移动光标

快捷键	预设值	功能	Command	说明
⌘↑	⌘↑	移动光标至文首	`editor.action.goToTopHover`
⌘↓	⌘↓	移动光标至文尾	`editor.action.goToBottomHover`
⌘←	⌘←	移动光标至行首	`cursorHome`	忽略行首空白
⌘→	⌘→	移动光标至行尾	`cursorEnd`	但是不会忽略行尾空白
⌥←	⌥←	移动光标到上一个词	`cursorWordLeft`
⌥→	⌥→	移动光标到下一个词	`cursorWordRight`
⌥⇧\	⌥⇧\	移动光标到对应的括号处	`editor.action.jumpToBracket`

高频快捷键 - 选择文本

快捷键	预设值	功能	Command
⇧⌘↑	⇧⌘↑	移动光标至文首，选中经过的文本	`cursorTopSelect`
⇧⌘↓	⇧⌘↓	移动光标至文末，选中经过的文本	`cursorBottomSelect`
⇧⌘←	⇧⌘←	移动光标至行首，选中经过的文本	`cursorHomeSelect`
⇧⌘→	⇧⌘→	移动光标至行尾，选中经过的文本	`cursorEndSelect`
⌥⇧←	⌥⇧←	移动光标到上一个词，选中经过的文本	`cursorWordLeftSelect`
⌥⇧→	⌥⇧→	移动光标到下一个词，选中经过的文本	`cursorWordRightSelect`

高频快捷键 - 快速导航

快捷键	预设值	功能	Command	说明
⌘P	⌘P	根据名字搜索文件等资源	`workbench.action.quickOpen`	???? 和 WebStorm 设的不一样
⌘T	⌘T	命令面板查找 Symbol 模式	`workbench.action.showAllSymbols`	和 WebStorm 的查找类型有点类似
⌘Click	⌘Click	跳到定义	-

高频快捷键 - 查找替换

快捷键	预设值	功能	Command	说明
⌘F	⌘F	文件内搜索	`actions.find`
⌥⌘F	⌥⌘F	文件内替换	`editor.action.startFindReplaceAction`	???? 和 WebStorm 设的不一样
⌘G	⌘G	查找并将光标移动到下一个搜索命中文本	`editor.action.nextMatchFindAction`
⇧⌘G	⇧⌘G	查找并将光标移动到上一个搜索命中文本	`editor.action.previousMatchFindAction`
???? ⌃H	⇧⌘F	全局内容搜素	`workbench.action.findInFiles`
???? ⌃⇧H	⇧⌘H	全局内容替换	`workbench.action.replaceInFiles`
???? ⌥⌘G	⌥⇧F12	查找引用	`references-view.findReferences`	???? 不支持文件

高频快捷键 - 多点编辑

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

快捷键	预设值	功能	Command	说明
⌥Click	⌥Click	增加光标	无	基础
???? ⌃⌘G	⌃⌘L	选中所有选中的文本，或光标所在的词	`editor.action.selectHighlights`	???? 和 WebStorm 不一样的是，VSCode 选中后所有的光标在词尾
???? ⇧⌘L	⌥⇧I	所有选中行末添加光标	`editor.action.insertCursorAtEndOfEachLineSelected`
???? ⌥⇧↑	⌥⌘↑	向上复制光标	`editor.action.insertCursorAbove`
???? ⌥⇧↓	⌥⌘↓	向下复制光标	`editor.action.insertCursorBelow`
⌥⇧鼠标拖拽	⌥⇧鼠标拖拽	纵向拖出一条光标	-	类似连续多次向上或向下复制光标的效果，但附加带选中效果

高频快捷键 - 通用

快捷键	预设值	功能	Command	说明
???? ⌘1	⌘.	展示快速修复菜单	`editor.action.quickFix`	有病没病都可以按
⌃`	⌃`	展示/隐藏 Terminal	`workbench.action.terminal.toggleTerminal`
⌘\	⌘\	编辑器向右切屏	`workbench.action.splitEditor`
???? ⌥⌘\	⌘K ⌘\	编辑器向下切屏	`workbench.action.splitEditorDown`
⏎	⏎	重命名文件	`renameFile`	???? 和 WebStorm 不一样，保持系统的原汁原味
⌥Z	⌥Z	代码软折行	`editor.action.toggleWordWrap`

高频快捷键 - 特有功能

快捷键	预设值	功能	Command	说明
⇧⌘P	⇧⌘P	展示命令面板	`workbench.action.showCommands`	Sublime 最大的创举
⌘K ⌘S	⌘K ⌘S	打开快捷键偏好设置	`workbench.action.openGlobalKeybindings`
⌘B	⌘B	显示 / 隐藏侧边栏	`workbench.action.toggleSidebarVisibility`