高效编码？我的VS Code设置

拼搏现实的明天。 2022-09-03 15:21 183阅读 0赞

![ebcc42208d94f91988ec83397ca8d7b9.png][]

来源: 做工程师不做码农

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

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

## **????** 主题 ##

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

![bd33b85bb59fc3ba393b763dc85416c1.png][]

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

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

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

## **✒** 字体 ##

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

![465308b69a948d2dde90e6c438a7b265.png][]

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

![d2e8060216371f98cd6594973daedbd3.png][]

在使用 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 - 目前正在使用。

![3ac994a5c289320a95b124ee7ec99ae4.png][]

## 我使用的扩展 ##

### Auto Rename Tag ###

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

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

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

![cfbcf3f6e01e314017edfc458c58b783.gif][]

### Bracket Pair Colorizer 2 ###

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

![302725bf57187e3471afaa8bd50c481f.png][]

### Color Highlight ###

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

![fd9d00f97d5f870e8ccff6d47446459c.png][]

### CSS Peek ###

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

![df36cc3508106f397376c93272d1f062.png][]

### DotENV ###

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

![8bdc8a4e02049d4f5a0e549dab71a22b.png][]

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

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

### Highlight Matching Tag ###

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

![b3cc1c652c907c4b65ae346959f4ea69.gif][]

我使用的扩展的样式：

"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 ###

悬停时显示图像预览。

![3284153b338dce042c7bbadd6c23d7d9.png][]

### Indent Rainbow ###

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

![7c8074a464ffb49cc30a1bc02b3016f3.png][]

### REST Client ###

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

![e380785a797e39c5930549284bb48339.gif][]

### Settings Sync    ###

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

![7372b97f68d282a65ef3b0a36345215c.png][]

### TODO Highlight ###

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

![1e736ff756763894f928f57465e84152.png][]

### Version Lens ###

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

![165bedac996f4cc4c9cae4ce1a25ad40.gif][]

## ???? 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**：重新打开最新关闭的窗口

往期干货：
     26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费） 干货~~~2021最新前端学习视频~~速度领取
     前端书籍-前端290本高清pdf电子书打包下载
    点赞和在看就是最大的支持❤️

[ebcc42208d94f91988ec83397ca8d7b9.png]: /images/20220829/0d3e0613374b4be8bf03129bd63c34d8.png
[bd33b85bb59fc3ba393b763dc85416c1.png]: /images/20220829/7edf40dff8694de6914d1fdabd6b4800.png
[465308b69a948d2dde90e6c438a7b265.png]: /images/20220829/91f810d74b06458a90f57ea5afd7994d.png
[d2e8060216371f98cd6594973daedbd3.png]: /images/20220829/f9fafc067533499faee851b7391c66b6.png
[3ac994a5c289320a95b124ee7ec99ae4.png]: /images/20220829/cfe5f512a84c4cab85c3f7f0696059c9.png
[cfbcf3f6e01e314017edfc458c58b783.gif]: /images/20220829/fb4a71cc21254bff8881f8e03ef1132d.png
[302725bf57187e3471afaa8bd50c481f.png]: /images/20220829/772d803a9cd74550bc6d5f6b4274efd3.png
[fd9d00f97d5f870e8ccff6d47446459c.png]: /images/20220829/13032f1a4cb142c784a7db7ee279cd05.png
[df36cc3508106f397376c93272d1f062.png]: /images/20220829/683993f575a1424e9d5e97141148aade.png
[8bdc8a4e02049d4f5a0e549dab71a22b.png]: /images/20220829/693dadfa9f644fe2a2d3edc09a1ac7ea.png
[b3cc1c652c907c4b65ae346959f4ea69.gif]: /images/20220829/844e75770a79437e916e6eb899d2ad36.png
[3284153b338dce042c7bbadd6c23d7d9.png]: /images/20220829/202b4add85a940a6ad488d21961ca3b5.png
[7c8074a464ffb49cc30a1bc02b3016f3.png]: /images/20220829/6c19e853eaeb41a3bae2a2e51ce0fc3c.png
[e380785a797e39c5930549284bb48339.gif]: /images/20220829/58cfef9cce944145b8e602a2030453c6.png
[7372b97f68d282a65ef3b0a36345215c.png]: /images/20220829/87f1f0d11e9b427c9aa8774dde1ed38b.png
[1e736ff756763894f928f57465e84152.png]: /images/20220829/1ad4c73e4b3448a5bf08300d186050f8.png
[165bedac996f4cc4c9cae4ce1a25ad40.gif]: /images/20220829/bb40938bb72b463dbfd9f09a8edb899a.png