玩转 VSCode，看这一篇就够了

驳是2023-09-01 16:21

🎼 前言

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

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

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

主要内容

适合读者

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

编辑历史

日期 版本说明
2023/08/31 第一版

💋 Why VSCode

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

那些年我用过的编辑器

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

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

编辑器 付费 支持 OS 推荐指数 一句话说明
Vim 免费 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 年）
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 ★ 没用过

我选择编辑器的偏好

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

VSCode 的亮点

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

⚙️ 常用设置

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

新装的 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」
  1. 取消 ⇧⌘W 的默认行为「Close Window」
  2. 取消 ⌘W 在条件允许的时候「Close Window」
  3. 为「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 的主题对黑党来说会好一些，我也常改来改去。主题太多对选择困难症来说真的是一个灾难。

个人对主题的要求：

  1. 配色温柔，第一眼要有眼缘（这点很玄学）
  2. 背景色尽可能不要有色调，能够接受偏蓝，但接受不了偏粉之类的
  3. 各个区块明确，过度平滑，要么背景色有差别，要么有相对温和的分割线

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

白党

主题 推荐指数 推荐理由 截图
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，如：

json 复制代码 
{
  "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 迈进的第一步。

GitLens

装它就是了。

ESLint

前端开发，装它就是了。

Stylelint

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

Markdownlint

Webstorm 都没有这个插件。

Beautify

⚠️ 已停止维护。

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

Prettier

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

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

Code Snapshot

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

Code Spell Checker

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

Better Comments

人类友好的注释。

String Manipulation

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

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

Increment Selection

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

⌨️ 快捷键

官方文档：Key Bindings for Visual Studio Code

如何自定义

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

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

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

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

高频快捷键 - 快速编辑

快捷键 功能 Command 说明
⇧⇥ 取消缩进（反向 Tab） outdent
🌈 ⌘D 删除光标所在行（所选行） editor.action.deleteLines
⌥↑ 所选行/光标所在行上移 editor.action.moveLinesUpAction 没有 WebStorm 智能
⌥↓ 所选行/光标所在行下移 editor.action.moveLinesDownAction 没有 WebStorm 智能
⌘/ 单行注释 editor.action.toggleLineComment
🌈 ⇧⌘/ 多行注释 editor.action.toggleBlockComment 需要改系统快捷键，对应系统快捷键是呼出帮助
⌥⇧F 格式化代码 editor.action.formatDocument 💥 和 WebStorm 不一样
🌈 ⇧⌘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 说明
⌘F 文件内搜索 actions.find
⌥⌘F 文件内替换 editor.action.startFindReplaceAction 💥 和 WebStorm 设的不一样
⌘G 查找并将光标移动到下一个搜索命中文本 editor.action.nextMatchFindAction
⇧⌘G 查找并将光标移动到上一个搜索命中文本 editor.action.previousMatchFindAction
🌈 ⌃H 全局内容搜素 workbench.action.findInFiles
🌈 ⌃⇧H 全局内容搜素 workbench.action.replaceInFiles
⌘P 根据名字搜索文件等资源 workbench.action.quickOpen 💥 和 WebStorm 设的不一样
⌘T 命令面板查找 Symbol 模式 workbench.action.showAllSymbols 和 WebStorm 的查找类型有点类似
🌈 ⌥⌘G 查找引用 references-view.findReferences 💥 不支持文件

高频快捷键 - 多点编辑

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

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

高频快捷键 - 通用

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

高频快捷键 - 特有功能

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

🕸️ 有用链接

🙋 FAQ

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

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

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

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

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

最新版已经没有问题了。

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

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

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

json 复制代码 
{
  ...,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [ "typescript", "typescriptreact" ]
}

🪭 写在最末

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

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

「Happy using it」。

相关推荐
daily_23331 天前
c++领域展开第十六幕——STL（vector容器的了解以及各种函数的使用）超详细！！！！
开发语言·c++·vector·visual studio code
小溪彼岸2 天前
【VS Code】Aide一个强大的AI提效扩展
aigc·visual studio code
肉肉不吃 肉4 天前
TONGYI Lingma（通义灵码）,GitHub Copilot和Cursor 对比
github·visual studio code
前端幼儿园4 天前
从零实现一个 VS Code TODO 插件
前端·visual studio code
magic 2456 天前
CSS-基础选择器，字体属性，文本属性介绍
css·html5·visual studio code
Eric_见嘉7 天前
当敦煌壁画遇上 VS Code：我用古风色系开发了编程主题
前端·产品·visual studio code
anyup7 天前
最终！我还是抛弃了 VSCode 这个开发工具
前端·aigc·visual studio code
gz_zg8 天前
关于windows系统中vscode的中文乱码问题
visual studio code
家有琦琦果10 天前
【无标题】
visual studio code
热门推荐
01如何在WPS和Word/Excel中直接使用DeepSeek功能02DeepSeek各版本说明与优缺点分析03本地部署DeepSeek教程（Mac版本）04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07USC-HAD数据集介绍及仿真实验08DeepSeek RAGFlow构建本地知识库系统09太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）10【文献阅读】DeepRAG：大语言模型的检索增强推理新范式