【编辑中】 VSCode 优化指北（设置、美化、插件）

前言

我们都知道 VSCode 是一款非常强大的编辑器，可以满足我们大部分的需求，而且也可以安装很多插件来扩展它的功能（**VSCode Yes!**）。但是它仍然有许多可以优化的地方。比如你吃着火锅唱着歌，电脑突然就崩溃了，而你千辛万苦写的代码却没保存（

上述案例是可以通过设置自动保存来解决的，让我们开始吧！

设置

工欲善其事，必先利其器。其实 VSCode 有很多实用的设置是没有默认打开的，你可以按需打开。一个个搜索配置有点浪费时间，如果你太懒，也可以看之后的懒人方案快速开启这些设置。

自动保存

在设置里（~~不会还有人不知道设置怎么打开吧~~）搜索 files.autoSave，选择 afterDelay，这样每当你修改代码时，VSCode 都会马上帮你保存。

我们还可以设置自动保存的延迟，如果你在延迟内再次改动，就不会保存，默认为 1000ms，也就是 1 秒的时间，你可以按需调整。搜索 files.autoSaveDelay，输入你想要的延迟即可，我这里设置为了 500ms。在一些修改代码后要马上测试的情况下，不建议把数值改的很大。

自动检测文本编码类型

开启这个功能后，VSCode 会在打开文件时自动判断文件编码类型，这样便不用担心文件打开是乱码了。搜索 files.autoGuessEncoding，勾选即可。

开启一些动画

VSCode 为了提升性能，关闭了一些动画，但是我们可以开启它，这样看起来反而会更加丝滑。直接在设置里搜索 smooth，像我这样开启即可。

可以看到光标的位移等效果变得丝滑流畅。

快捷缩放

开启这个设置后，我们便可以使用 Ctrl 加鼠标滚轮快捷缩放代码字体大小。搜索 editor.mouseWheelZoom 勾选即可。

温馨提示：重启 VSCode 即可恢复原来的大小。

自动格式化

接下来三个设置可以帮我们自动格式化代码，在美化代码的同时省去一些时间。搜索 editor.formatOn 勾选以下三个设置即可。

这样我们在粘贴别人的代码、保存文件、换行时，VSCode 都会自动格式化代码。但是经过我测试发现，这个自动格式化与自动保存搭配时，自动保存后似乎不会格式化（也不知道是不是错觉）。

自动折行

搜索 editor.wordWrap，选择 on，这样在代码过长时，就会自动折行，这样可以方便我们阅读。

虽是自动折行，但其实不会对代码有修改，只是在外观上进行了折行（~~是个人都知道吧~~）。

括号块参考线

搜索 editor.guides.bracketPairs，选择 true 即可。这样就会在两个括号之间显示一条竖线，方便我们辨认括号间的关系。

代码补全相关

搜索 editor.acceptSuggestionOnEnter 设置为 smart，这样在代码补全时会自动判断我们的回车是接受建议还是换行。

搜索 editor.suggestSelection 设置为 recentlyUsed，这样在代码补全的时候，会优先显示你最近接受的补全。

各位也可以根据自己的喜好灵活调整。

懒人方案

按 Ctrl + Shift + P 打开命令面板，输入 settings.json 并选择 首选项：打开用户设置(JSON)[^1]，然后复制张贴一下内容。如果你想了解更改了哪些内容，请看前文，不需要的可以删除。

{
  "files.autoSave": "afterDelay", // 自动保存
  "files.autoSaveDelay": 500, // 自动保存的延迟
  "files.autoGuessEncoding": true, // 自动检测文本编码类型
  "editor.smoothScrolling": true, // 以下 5 个为动画设置
  "editor.cursorSmoothCaretAnimation": "on",
  "workbench.list.smoothScrolling": true,
  "terminal.integrated.smoothScrolling": true,
  "editor.cursorBlinking": "smooth",
  "editor.mouseWheelZoom": true, // 快捷缩放
  "editor.formatOnPaste": true, // 以下 3 个为格式化设置
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.wordWrap": "on", // 自动折行
  "editor.guides.bracketPairs": true, // 括号块参考线
  "editor.acceptSuggestionOnEnter": "smart", // 这两个跟代码补全有关
  "editor.suggestSelection": "recentlyUsed"
}

其实建议大家可以对设置里的每一项改一下，试一下，这样才能把 vscode 调校成自己最喜欢的样子，不一定要全部照搬上面的设置，而且上面的设置只是我觉得大部分人用得到的，更多的还是适合自己的才好。

美化

爱美之心，人皆有之。适当的美化可以让我们心情愉悦，事半功倍。在 VSCode 上的美化，只能对主题和图标这两个地方下手，一些好的主题和图标都被打包成了插件，我们直接通过安装插件的方式就可以更改他们。主题就是对整个 VSCode 界面的一些颜色和外观进行调整，而图标指的并非 VSCode 的图标（~~谁会美化这个~~），而是 VSCode 内文件、文件夹名旁边的图标，方便我们快速辨识文件的语言和用处。

下面推荐一些我个人觉得还好的主题和图标。由于每个人的审美不一样，所以我就不过多评价，大家可以一个一个试一下，选出自己最喜欢的。

主题

一般安装好了主题插件以后就会弹出一个窗口供你选择样式，回车即可应用。如果你没有注意，可以按 Ctrl + Shift + P 打开命令面板，输入 theme 并选择 首选项：颜色主题 回车，再选择你要更改的主题。

One Dark Pro

一款很优秀的暗色主题，我也在用。

GitHub Theme

由 GitHub 官方开发的 GitHub 风格的主题，有亮色也有暗色。

Material Theme

也是一款很优先的主题，有五种样式可以选择。

还有其他好的主题这里就不在展示了，看多了有点眼花缭乱。如果你对上面的三个不满意，也可以看看下面几篇文章：

图标

同样的，一般安装好了主题插件以后就会弹出一个窗口供你选择样式，回车即可应用。如果你没有注意，可以按 Ctrl + Shift + P 打开命令面板，输入 theme 并选择 首选项：文件图标主题 回车，再选择你要更改的主题。

Material Icon Theme

Material 风格的图标主题，图标做的非常齐全。

由于图标过多这里就不放图片了，大家可以自己安装看一看。

vscode-icons

这个主题好像还是 VSCode 官方开发的，VSCode 风格，差不多是 VSCode 默认图标的扩展版吧。

不要图标

是的你没有听错，你也可以选择不要图标，~~或许有些特殊癖好的人会这么想吧~~。可以按 Ctrl + Shift + P 打开命令面板，输入 theme 并选择 首选项：文件图标主题 回车，再选择 无，即可禁用图标，效果如下：

如果你对上面的三个不满意，也可以看看下面这篇文章：

🗂 让你的 VSCode 文件图标更好看的 10 个文件图标主题

插件

磨刀不误砍柴工。众所周知我们的 VSCode 就是靠插件系统起家的，所以他的扩展能力非常强，极大的便利了我们的开发，那么接下来就到了插件推荐环节，我会把我觉得好用的插件都分享出来。但是需要注意的是，过多的插件会导致 VSCode 卡顿不流畅、打开速度慢等现象，建议不要添加一些平时用不着、不感兴趣的插件。

参考链接

设置章节部分参考了【教程】vscode 优化体验篇（推荐设置 && 推荐插件）

[^1]: VSCode 怎么打开 settings.json 文件

XShaw's Blog