我的 VS Code 设置

市面上有很多代码编辑器，有免费的，也有付费的。其中我最喜欢的是Visual Studio Code。它免费，而且功能强大。我从 Web 开发之旅伊始就一直在用它。

今天，我将分享我最喜欢的代码编辑器设置，用于我的 Web 开发。首先，我将介绍我的代码编辑器外观。毕竟，外观很重要。

🎨主题：

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

这款主题基于超炫酷的设计，并针对Operator Mono字体进行了优化。我太喜欢😍这个主题了。

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

• Oceanic Next - 我使用了 Oceanic Next（暗淡的背景）。
• 补救措施- 我使用了 Remedy Dark（直）。

✒字体：

另一个对我的代码编辑器外观很重要的方面是：我代码编辑器使用的字体是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 中，我使用了两个文件图标：

1. Material Icon Theme - VS Code 最受欢迎的图标主题之一。
2. Material Theme Icons - 目前正在使用这个。我使用的是 Material Theme Icons Light 版本。

🛠 我使用的扩展：

🔹自动重命名标签

自动重命名配对的 HTML/XML 标签，也适用于 JSX。

在settings.json文件中的 中添加条目auto-rename-tag.activationOnLanguage，以设置扩展程序将激活的语言。默认情况下，它是["*"]，表示将针对所有语言激活。

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

🔹括号对着色器 2

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

🔹颜色突出显示

此扩展样式化了您文档中的 css/web 颜色。

🔹 CSS 速览

• Peek：以内联方式加载 CSS 文件并立即进行快速编辑。（Ctrl+Shift+F12）
• 转到：直接跳转到 css 文件或在新编辑器中打开它（F12）
• 悬停：悬停在符号上显示定义（Ctrl+悬停）

🔹 DotENV

突出显示.env文件中的键、值对。

🔹 ES7 React/Redux/GraphQL/React-Native 代码片段

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

🔹ESLint​

VS Code 的“Linting”工具 - 或代码检查工具。

“Lint，或称 Linter，是一种分析源代码以标记编程错误、缺陷、风格错误和可疑构造的工具。”维基百科

🔹突出显示匹配的标签

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

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

🔹图片预览

在装订线和悬停时显示图像预览。

🔹缩进彩虹

此扩展程序会在每一步交替使用四种不同的颜色来为文本前面的缩进着色。

🔹直播服务器

启动具有静态和动态页面实时重新加载功能的本地开发服务器。

🔹更漂亮

Prettier 是一款规范的代码格式化工具。它会解析你的代码，并根据自己的规则重新打印，同时考虑到最大行长，并在必要时进行换行，从而强制保持一致的风格。

将以下属性值设置为true或将此属性添加到您的settings.json文件中，以便在保存时格式化代码。

  "editor.formatOnSave": true

🔹哈巴狗美化

VS Code 的 Pug 美化插件。按F1并运行名为Beautify pug/jade的命令来美化你的 Pug 文件。

🔹 REST 客户端

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

🔹设置同步

使用 GitHub Gist 在多台机器之间同步设置、代码片段、主题、文件图标、启动、键绑定、工作区和扩展。

🔹 TODO 突出显示

突出显示代码中的 TODO、FIXME 和其他注释。

🔹版本镜头

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

📃终端设置：

我使用 Windows 操作系统。由于我通过命令行使用 Git，所以我有Git 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 的效率。

感谢阅读并敬请期待。🙂👋