高效的编码：个人VS Code设置

代码编辑器不少，有些是免费的，有些是付费的。其中最喜欢的代码编辑器是 Visual Studio Code。它是免费的，并具备强大的功能，我陆续抛弃了Atom、Sublime Text以及也很强大的Webstorm。

今天，我将分享我最喜欢的代码编辑器设置，用于个人 Web 开发。我将从代码编辑器的外观开始。毕竟外观颜值很重要。

🎨 主题

我最经常使用的 VS Code 主题是Snazzy Operator，目前正在使用。

此主题基于 hyper-snazzy 并针对与 Operator Mono 字体一块儿使用进行了优化。我喜欢 😍 这个主题。

⭐ 我以前使用过的其余一些主题：

• Oceanic Next - 我使用了 Oceanic Next (dimmed bg)
• emedy - 我使用了 Remedy Dark (straight)

✒ 字体

对个人代码编辑器来讲，另外一个重要的事情是，我用于代码编辑器的字体是 JetBrains Mono。这是带有连字支持的免费字体。

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

在使用 JetBrains Mono 以前，我使用了Operator Mono。这也是一个不错的字体。

⭐ 我之前使用过的其余一些字体：

• Operator Mono - 支持连字。
• Fira Code - 免费并支持连字。
• Dank Mono - 付费并支持连字。

🌟🌟🌟 您要使用个人设置，使用个人 VS Code 字体吗？在 VS Code 中，按 Ctrl + P，输入 settings.json 并打开该文件。如今，用个人给定值替换下面的属性值。

{
  "workbench.colorTheme": "Snazzy Operator",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier 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.cursorBlinking": "solid"
}

📁 图标

文件图标加强了 VS Code 的外观，主要是它能够帮助咱们经过给定的图标区分不一样的文件和文件夹。对于个人 VS Code，我使用两个文件图标：

• Material Icon Theme - VS Code 最受欢迎的图标主题之一。
• Material Theme Icons - 目前正在使用。

我使用的扩展

🟠 Auto Rename Tag

自动重命名配对的 HTML / XML 标签，也能够在 JSX 中使用。

在 settings.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一项以设置扩展名将被激活的语言。默认状况下，它是[“ *”]，将为全部语言激活。

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

🟠 Bracket Pair Colorizer 2

此扩展名容许用颜色标识匹配的括号，用户能够定义要匹配的符号，以及要使用的颜色。

🟠 Color Highlight

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

🟠 CSS Peek

• Peek：内联加载 css 文件并在那里进行快速编辑。（Ctrl + Shift + F12）
• Go to：直接跳转到 CSS 文件或在新的编辑器（F12）中打开
• Hover：在符号上悬停显示定义（Ctrl + hover）

🟠 DotENV

在 .env 文件中高亮显示键值对。

🟠 ES7 React/Redux/GraphQL/React-Native snippets

该扩展为您提供 ES7 中的 JavaScript 和 React / Redux 片断，以及 VS Code 的 Babel 插件功能。

🟠 Highlight Matching Tag

突出显示匹配的开始或结束标签。

我使用的扩展的样式：

"highlight-matching-tag.styles": {
  "opening": {
    "left": {
      "custom": {
        "borderWidth": "0 0 0 1.5px",
        "borderStyle": "solid",
        "borderColor": "yellow",
        "borderRadius": "5px",
        "overviewRulerColor": "white"
      }
    },
    "right": {
      "custom": {
        "borderWidth": "0 1.5px 0 0",
        "borderStyle": "solid",
        "borderColor": "yellow",
        "borderRadius": "5px",
        "overviewRulerColor": "white"
      }
    }
  }
}

🟠 Image preview

悬停时显示图像预览。

🟠 Indent Rainbow

此扩展使文本前面的缩进着色，在每一个步骤上交替使用四种不一样的颜色。

🟠 REST Client

REST Client 容许您发送 HTTP 请求并直接在 Visual Studio Code 中查看响应。

🟠 Settings Sync

使用 GitHub Gist 在多台机器上同步设置，代码片断，主题，文件图标，启动，键绑定，工做区和扩展。具体操做能够看个人这篇文章《小技巧|同步你的 VSCode 设置及扩展插件，换机不用愁！》

🟠 TODO Highlight

在代码中突出显示 TODO，FIXME 和其余注释。

🟠 Version Lens

显示 package.json 文件中每一个软件包的最新版本。

📃 Terminal 设置

个人操做系统是 Windows，我经过命令行使用 Git，因此我有一个 Git terminal，我用这个终端做为个人集成 terminal。个人 terminal 设置以下：

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.fontFamily": "FuraMono Nerd Font",
"terminal.integrated.fontSize": 12,
"terminal.integrated.rightClickCopyPaste": true

✔ 有用的 VS Code 快捷键

我在平常生活中使用了一些重要的键盘快捷键，这些快捷方式使 Visual Studio Code 提升了个人工做效率。

• Ctrl + P ：转到文件，您能够在 Visual Studio Code 中移动到打开的文件/文件夹的任何文件。
• Ctrl + ` ：在 VS Code 中打开 terminal
• Alt + Down：下移一行
• Alt + Up：上移一行
• Ctrl + D：将选定的字符移动到下一个匹配字符串上
• Ctrl + Space：触发建议
• Shift + Alt + Down：向下复制行
• Shift + Alt + Up：向上复制行
• Ctrl + Shift + T：从新打开最新关闭的窗口

---

感谢您的阅读和关注。

文章首发于同名公众号，若是你想第一时间接收最新文章，那么能够扫码关注。若是对你有一点点帮助，能够点喜欢点赞点收藏，还能够小额打赏做者，以鼓励做者写出更多更好的文章。