12 个 VS Code 扩展让你的开发生活更轻松、更有趣

在本文中，我向您介绍我最喜欢的 VS Code 扩展。

自动重命名标签

使用此扩展，当您修改开放标签的名称时，相应的封闭标签的名称也会自动修改。

这是 IntelliJ 或 WebStorm 的默认功能之一，我也希望在 VSCode 中拥有它。

更好的评论

这使您能够根据单词为评论添加颜色。

您还可以设置自己的颜色和文字映射。

"better-comments.tags": [
  {
    "tag": "CUSTOMIZE",
    "color": "#8bffff",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]

我喜欢这个，因为它可以更轻松地查找 TODO 等。

括号对着色器

这会为诸如、、之类的括号涂上颜色{}。[]相应()的括号涂上相同的颜色，以便于跟踪代码。

变更案例

这将单词从当前格式转换为另一种格式。

以下是支持格式的示例。

选择并聚焦单词并Change Case在命令面板中输入以选择目标格式。

GitLens

这将为 VS Code 带来 Git 字符串集成。我将展示其众多功能中的几个示例。

正如您（勉强）在下面看到的，它显示了所选行的最新提交。

您可以在 FILE HISTORY 菜单中查看每次提交的更改。

您可以在 COMPARE 菜单中确认分支或标签之间的差异。

突出显示匹配的标签

正如其名称所示，它的作用是突出显示匹配的标签。

上图中黄色下划线是它的特点。简单但对于阅读长篇HTML很有用。

顺便说一句，就我而言，我必须添加这个片段才能settings.json使其正常工作。

"editor.occurrencesHighlight": false,

html标签换行

有了它，您可以轻松地用 HTML 标签包裹选定区域。

文字option + w和选中区域将被标签包裹<p>。包裹元素可配置。

缩进彩虹

这给缩进添加了颜色。

它增强了代码的可见性。如果缩进被破坏，它会以红色警告。

材料图标主题

这会在 EXPLORER 中显示图标，具体取决于文件扩展名或目录名。

除了上面的图片之外，还有许多受支持的图标。

孔雀

这会根据项目改变编辑器框架的颜色。

轻松区分多个项目！

输入Peacock: Change to a favorite color命令调色板，即可选择颜色。颜色设置将存储在settings.json中.vscode。

正则表达式预览器

这是为了检查正则表达式。

输入option + command + m后，右侧窗格中会打开一个检查窗口。当您在窗格中输入一些单词时，只有与所选正则表达式匹配的单词才会被高亮显示。

待办事项树

这收集了评论中的 TODO 和 FIX 并显示其列表。

就这些！感谢阅读🤗。希望你喜欢。