VSCode 插件推荐

发表于 更新于 分类于 阅读次数： 本文字数： 1.9k 阅读时长 ≈ 7 分钟

整理下自己常用的 VSCode 插件。其中标题带 ✨ 表示目前正在使用的。

Night Owl ✨

我最喜欢的 VSCode 主题，强烈推荐！

Color Highlight ✨

Color Highlight 插件能让十六进制（#FFFFFF）、RGB（rgb (255, 255, 255)）或者是其他颜色表示法的文本旁边或者背景显示出相应的颜色，这样就可以直观地看到当前的颜色是什么，而不必去查找或者预览。

CodeGeeX: AI Coding Assistant ✨

AI 编程助手。

功能名称 操作方法 描述
代码自动补全 按 Tab 键采纳建议，按任意键取消 在编码过程中，CodeGeeX 会根据上下文内容提供代码补全建议
代码生成 输入自然语言注释 CodeGeeX 可以生成相关代码片段
代码注释 选中代码，右键点击选择 CodeGeeX -> Add Comment 为代码添加注释
幽灵注释 选中代码，右键点击选择 CodeGeeX -> Add Ghost Comment 为代码添加幽灵注释。这些注释不会直接写入代码中，因此得名“幽灵”
代码解释 选中代码，右键点击选择 CodeGeeX -> Explain Code，或输入 /explain 解释选中的代码
代码优化 选中代码，右键点击选择 CodeGeeX -> Optimize Code 优化选中的代码
生成单元测试 选中代码，右键点击选择 CodeGeeX -> Generate Unit Test 为选中的代码生成单元测试
修复代码错误 选中代码，右键点击选择 CodeGeeX -> Fix Bug 修复选中的代码中的错误
行内对话编程 使用快捷键 Ctrl+I（Windows）或 Command+I（Mac） 触发行内对话编程功能
开源代码仓库智能问答 使用 @Repo 功能 对开源代码仓库进行提问

Code Spell Checker ✨

安装后，插件默认会自动识别单词的拼写错误，并在文件和 PROBLEM 选项框中提示，颜色默认是蓝色。
取消拼写检查:

  1. 完全禁用插件：如果不想进行拼写检查，可以在插件商城中将该插件禁用。
  2. 取消对单个文件的检查：在文件开头添加以下注释之一：
1
2
3
/* cspell:disable */
/* spell-checker: disable */
/* spellchecker: disable */

不同文件的注释方式可能不同，例如在 JavaScript 中可以使用 // cspell:disable，在 HTML 中可以使用 <!-- spell:disable -->。
忽略特定单词：在文件中添加以下注释，忽略特定单词：

1
// cspell:ignore Pinia,zaallano,wooorrdd

这适用于文件中引入的库名或自定义字段。

EditorConfig for VS Code ✨

在团队多人开发的项目中，不能保证团队成员都使用相同的编辑器，那么不同的编辑器之间的格式设置有可能各不相同，就无法保证项目代码格式的统一，往往会出现意想不到的问题。比如缩进大小、选项卡宽度、行尾字符、编码等。

那么如何保证团队代码在多人协同开发，使用编辑器格式不一的情况下仍然保证相同的格式呢，这就是 EditorConfig 要做的事情。

在项目的根目录下创建一个 .editorconfig 文件。
该文件用于定义项目的编码规范，确保团队成员之间的代码风格一致。

一个典型的 .editorconfig 文件示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 指定为顶级配置文件，停止递归查找其他 .editorconfig 文件
root = true

# 匹配所有文件
[*]
indent_style = space         # 使用空格缩进
indent_size = 2              # 缩进为 2 个空格
end_of_line = lf             # 使用 LF 换行符
charset = utf-8              # 文件编码为 UTF-8
trim_trailing_whitespace = true # 删除行尾多余空格
insert_final_newline = true  # 文件末尾保留空行

# 针对 Python 文件的特殊配置
[*.py]
indent_size = 4

# 针对 Markdown 文件的特殊配置
[*.md]
trim_trailing_whitespace = false # Markdown 文件不删除行尾空格

ESLint ✨

ESLint 是一个用于识别和报告 JavaScript（包括 JSX、ES6+）代码中的模式问题的工具。它可以帮助开发者保持代码风格的一致性，发现潜在的错误，并提高代码质量。

安装 ESLint：

1
npm install eslint --save-dev

配置 ESLint：

  1. 在项目根目录下创建一个 .eslintrc.js 文件。
  2. 在 .eslintrc.js 文件中添加 ESLint 配置。

一个典型的 .eslintrc.js 文件示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
module.exports = {

}

# GistPad ✨

可以在 VSCode 中直接编辑 GitHub Gist，快速保存代码片段。

# GitHub Copilot ✨

GitHub Copilot 是一个 AI 编程助手，它可以帮助开发者更快地编写代码，提高编码效率。GitHub Copilot 可以根据代码上下文自动生成代码，并提供代码建议和补全。

# GitLens ✨

GitLens 是一个强大的 Git 扩展，它可以帮助开发者更好地理解代码的版本历史和变更情况。GitLens 可以显示代码的提交历史、作者、变更内容等信息，还可以进行代码比较和搜索。

# Highlight Matching Tag ✨

在 HTML 或 XML 文件中，当您选择一个开始标签时，它会自动高亮显示对应的结束标签，反之亦然。这对于快速定位和验证标签对非常有帮助。

# HTML CSS Support ✨

为 HTML 文件提供 CSS 属性和值的自动补全功能。当您在 HTML 文件中输入 `<div class="` 时，插件会自动显示与该类名相关的 CSS 属性和值。

# Dracula Theme Official

一款好看的黑色主题。

# One Dark Pro

一款好看的黑色主题。

# DotENV

.DotENV 插件会自动检测项目根目录下的 .env 文件，并转为 process.env 变量的值。支持多个环境（如开发环境、测试环境、生产环境）.env 文件的自动加载。在代码中，可以通过 process.env 来访问这些环境变量。例如：

```JavaScript
console.log(process.env.DB_HOST); // 输出: localhost
console.log(process.env.DB_USER); // 输出: root
console.log(process.env.DB_PASS); // 输出: s1mpl3

CodeSnap

在 VS Code 中拍摄代码的精美截图！

  • 功能
    快速保存代码截图
    将截图复制到剪贴板
    显示行号
    许多其他配置选项

  • 使用说明
    打开命令面板（在 Windows 和 Linux 上是 Ctrl+Shift+P，在 OS X 上是 Cmd+Shift+P），并搜索 CodeSnap。
    选择您想要截图的代码。
    如有需要，调整截图的宽度。
    点击快门按钮，将截图保存到您的磁盘上。

  • 小贴士：
    您也可以通过选择代码，右键点击，然后选择 CodeSnap 来启动 CodeSnap。
    如果您想将 CodeSnap 绑定到一个快捷键，打开您的键盘快捷键设置，并将 codesnap.start 绑定到一个自定义的快捷键。
    如果您想将截图复制到剪贴板而不是保存，点击图片并按下复制的键盘快捷键（默认是 Windows 和 Linux 上的 Ctrl+C，OS X 上的 Cmd+C），或者在您的设置中将 codesnap.shutterAction 绑定为复制。

Better Comments

  1. 打开 Visual Studio Code 的设置（快捷键 Ctrl+,）。
  2. 在搜索框中输入 Better Comments。
  3. 根据需要调整以下设置：
    better-comments.multilineComments：控制是否对多行注释使用注释标签进行样式化。
    better-comments.highlightPlainText：控制是否对纯文本文件中的注释使用注释标签进行样式化。
    better-comments.tags：自定义注释标签及其样式。
  4. 自定义注释样式
    通过修改 better-comments.tags 设置来自定义注释的样式。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
"better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    }
  ]