代码编辑器许多，有些是免费的，有些是付费的。其间最喜爱的代码编辑器是 Visual Studio Code。它是免费的，并具有强壮的功用，我陆续抛弃了 Atom、Sublime Text 以及也很强壮的 WebStorm。

高效的编码：我的VS Code设置

今日，我将共享我最喜爱的代码编辑器设置，用于我的 Web 开发。我将从代码/ e 6 * v编E R e g ! 5 T辑器的外观开端。毕竟外观颜值很重要。

主题

我最常用的 VS Co^ 0 . I 8 K 2de 主题是Sna9 m A D W p ` @zzy Operator$ 9 { ; Q V s u 2，目前正S E F 8 p在运用。

高效的编码：我的VS Code设置

此主题基于 hyper-snazzy 并针对与 Operator Mono 字体一同运用进行了优化。我喜爱 这个主题。

⭐ 我之前运用过的其他一些主题：

  • Oceanic Next – 我运用了 Oceanic Next (R Z & Q U + ; tdimmed bg)
  • emedy – 我运用了 Remedy Dark (straight)

✒ 字体

对我的代码编辑器来说，另一个重要N @ Z 0的工作是，我用于代码编辑器的字体是 JetBraN ) ? U N p oins Monoi t B R ~ z。这是带有连字支持的免费字体。

高效的编码：我的VS Code设置

连字是一种新的字体格式，支持符号装修，而不是= >、< =。

高效的编码：我的VS Code设置

在运用 JetBrains Mon7 S $ z ~ Co 之前，我运用了Operator Mono。这也是一个不错的字体。

⭐ 我以前运用过的其他一些F ? c k & j ? v *字体：

  • Operatk V B | & M For Mono – 支持连字。
  • Fira Code – 免费E # d g并支持连字。
  • Dank Mono – 付费并支持连字。

您要运用我的设置，运用我的 VS Code 字体吗？在 VS Code 中，按 Ctrl + P，输入 settings.json 并翻开该文件。现^ : U d ! : $在，用我的给定值替换下面的特点值。

{
"workbench.colorTheme": "Snazzy Operator",
"editor.fontFamily": "'JetBrains Mono', Consolas, 'Z n M cCourier New', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 22,
"editor.letterSpacing": 0.5,
"editor.fontWeight": "400",
"editor.cursorStyle": "line",
"editor.cursorWidth": 5,
"editor.cursor; a G } !Blinking": "solid"
}

图标

文件图标增强了 VS Code 的外观，主要是它能够协助咱们经过给定的图标区别不同的文件和文件夹。对于我的 VS Code，我运用两个文件图标：

  • Material Icon Theme – VP : e ( r 9S Code 最受欢迎的图标主题之G H D 2一。
  • Material Theme Icons – 目前正在运用] | S。
高效的编码：我的VS Code设置

我运用的扩展

Auto Rename Tag

主动重命名配对的 HTML / XML 标签= ^ y H，也能p A b ! g m 4 k够在 JSX 中Q : x运用。

在 settings.json 文件中的 auto-rename-ta) t `g.activationOnLanguage 中增加一项以设置扩展名将S % . h ~ #被激活的言语。默许情况下，它是**[“ *”]**，将为所有言语激活。

"au6 T X y =to-rename-tag.activationOnLanguage": ["html", "x{ W A i ( K } Rml", "? B Y U tphp", "javascript"]
高效的编码：我的VS Code设置

Bracket Pair Colorizer 2

此扩( l B } )展名答应用色彩标识匹配的括号，用户能m F z & : I 0够界说要[ @ 7 % % ;匹配的符号，以及要运用的色彩。

高效的编码：我的VS Code设置

Color Highlight

此扩展程序设置在文档中找到的 css / web 色彩的样式。

高效的编码：我的VS Code设置

CSS P~ ~ w ; P & Z K ,eek

  • Peek：内联加载 css 文件并在那里进行快速编辑。（Ctrl + Shift + F12）
  • Go to：直接跳转到 CSS 文件或T X [ n |在新的编辑器（F12L J j W c G i m）中翻开
  • Hover：在符号上悬停显现界说（Ctrl + hover）
高效的编码：我的VS Code设置

DotENV

在 .env# = x i 8 $ 9 s 文件中高亮显现键值对。

高效的编码：我的VS Code设置

ES7 React/Redux/GS ? ? & L ,raphQL/React-Native snippets

该扩展为您供给 ES7 中的 JavaScript 和 React / Redux 片段，以及 VS Ci D X w x sodh Y V x { + L X ne 的 Babel 插件功用。

Highlight Maz S ; J ] `tching Tag

杰出显现匹配的开端或完毕标签。

高效的编码：我的VS Code设置

我运用的扩展的样式：

"highlight-matching-tag.styles": {
"opening": {
"left": {
"custom": {
"borderWidth": "0 0 0 1.5px",
"borderStyle": "} R G ( l .solid",
"borderColor": "yellow",
"borderRadius": "5px",
"overvie; V 9 E B %wRulerColor": "white"
}
},
"right": {
"custom"d X E ] =: {
"borderWidth": "C : i = _ p0 1.5px 0 0",
"borderStyle": "solid",
"borderColor": "yellow",
"borderA L ( 2 Z lRadius": "5px",
"overviewRulerColor"Y O N 4 : ~: "w5 | w :  , Dhite"
}
}
}
}

Image preview

悬停时显现图像预览。

高效的编码：我的VS Code设置

Indent Rainbow

此扩展使文本前面的缩进上色，在每} C B a个步骤上交替运用四种不同的色彩。

高效的编码：我的VS Code设置

RESTe q s f 3 W X Client

REST Client 答应您发送 HTTP 恳求并直接在 Visual Studio Code 中检查响应。

高效的编码：我的VS Code设置

Settings Sync

运用E O k U j C r l y GitHub Gist 在多台机器上同步设置，代码片段，主题，文件图标，发动，键绑定，工作区和扩展。具体操作能够看我的这# O * L U d / J篇文章《小技巧|同步你的 VSCode 设p 7 S L , I置及扩展插件，换机不用愁！》

高效的编码：我的VS Code设置

TODO Highlight

在代码中杰出显现 TODO，FIT X g PXME 和其G 7 X他注释。

高效的编码：我的VS Code设置

Version Lens

显现 package.json 文件中每个软件包的最新版别。

高效的编码：我的VS Code设置

Terminal 设置

我的操作系统是 Windows，我经过命令行} R H M 2运用 Git，所以我有一个 Git terminal，我用这个终端作为我的集成 terminal。我的 terminal 设置B T z P & 3 W如下：

"terminal.integrated.shell.windows": "C:\Program Files\Git\bin\bash.exe",
"terminal.integrated.fontFaZ ! ~ 6 O ! - +mily": "FuraMono Nerd Font",
"termi~ x tnal.integrated.fontSi| b u Z lze": 12,
"term* z c } o `inal.integrated.rightClickCopyPaste": true

✔ 有用的 VS Code 快捷键

我在日常日子中运用了一些重要的键盘快捷键，这些快捷方式使 Visual Studi* q U r t a U +o Code 提高了我的工作效率。

  • Ctrl + P ：转到文件，您能够在 Visual Studio Code 中移动到翻开的文件/文件夹的任何p 8 ) l l l ^文件。
  • Ctrl + ` ：在 VS Code 中翻开 terminal
  • Alt + Down：下移一行
  • Alt + Up：上移一行
  • Ctrl + D：将选定的字符移动到下一个匹配字符串上
  • CY ; _ s }trl + Space：触发建议
  • Shd c mift + Alt + Down：向下仿制行
  • Shift + Alt + Up：向上仿制行
  • Ctrl + Shif{ & ] o `t + T：从头翻开最新封闭的窗口

感谢您的阅读和重视。: ( H . # b

假如对你有所启示和协助，能够点个重视、转发、收藏，也能够留言评论，这是对作者的最大鼓舞。

作者简介：Web前端工程师，全栈e # y V B r开发工程师、继续学习a R 1 R ; t %者。

现在重视《前端外文精选》微信大众号，现在重视还送& B 9 f | O 0某网精品视频课程网盘资料啊，准能为你节省不少钱！

高效的编码：我的VS Code设置