<aside> ☝🏻 后面计划出一期视频说明,因为有些设置的效果需要演示才能看出差异,而我又懒得制作动图在博客中了。

</aside>

前言

刚开始学习前端的时候,还没有 VSCode,那时我用的是 WebStorm(当时是学生,所以用的盗版)。开箱即用的体验让人爱不释手。后来由于办公电脑配置的下沉,以及它对 4K 及多显示器卡顿问题的长久不解决,再加上周围同事的影响, 最终一击是「配置同步」让我最终切换到 VSCode 。

在适应了没有单独的悬浮搜索框这一史诗级割裂之后,很快就摸索出了我个人认为好用的配置,下面就详细得说一说。如果有人觉得自己的设置比我的更好的,欢迎在下方留言然后附上原因和效果截图。

<aside> 📖 默认的设置我基本不说了(除非非常好用),我就说我对于默认配置的修改部分。VSCode 中大部分配置都能修改,比如「是否在右侧小地图位置显示光标行」这种的都能,非常好。

</aside>

主题/字体

主题是 One Dark Pro:

字体是 Fira Code:

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

Fira Code 是官方推荐字体,内部也在使用

Fira Code 对一些符号的变体支持非常好看,如 ===<= 等(有些需要手动启用字符集和变体):

Fira Code 字体

Fira Code 字体

很多人不习惯 Fira Code 默认的 & 符号,这可以通过配置来禁用它的变体,具体可以参看其 Github 的介绍,我的设置是:

{
  "workbench.colorTheme": "One Dark Pro",
  "editor.fontFamily": "'Fira Code', Monaco, 'Courier New', monospace",
  "editor.fontLigatures": "'ss01', 'ss02' off, 'ss03', 'ss04', 'ss05', 'ss07', 'cv29', 'cv28', 'cv13'"
}

另外,行高是 1.4,字号是 13。

编辑器

最主要的就是编辑器设置了,好的编辑器当然是为了提高编码效率,下面逐个说说。

渲染空白字符

Editor: Render Whitespace

Editor: Render Whitespace