本文介绍5个非常实用的VS Code插件。

1. Prettier

安装链接：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier 是一个代码格式化程序，它会自动格式化代码，使代码看起来更“漂亮”；还会修复代码中的任何多余空格或不均匀的括号。

2. Bracket Pair Colorizer

安装链接：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Bracket Pair Colorizer 可以帮助开发者快速查找括号、括号和大括号，它通过为每个匹配的括号对分配不同的颜色来实现这一点。当光标位于一对括号内时，Bracket Pair Colorizer 会显示一条与括号对相同颜色的线条，将它们连接在一起，从而帮助识别每个开放括号的相应闭合括号的位置。

图片

此插件可以提高编码效率，减少由于括号错误导致的 bug。

3. Auto Rename Tag

安装链接：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag 非常实用，可以为开发人员节省很多时间和精力。它可以同时编辑开放标签和关闭标签的标签类型，使编写 HTML 标签变得更加轻松快捷。而且，当开发人员在开放标签中按下空格键时，第二个标签将停止复制，因此开发人员可以方便地为标签添加类名、href、ID 等属性。这个插件可以大大提高开发效率，减少编写错误的几率，是 Web 开发人员的必备工具。

图片

4. VSCode-Icons

安装链接：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

如果你非常在乎软件界面的视觉效果，那么会喜欢这个插件。这是一个为文件提供更多图标的扩展包，它可以帮助开发人员更快地识别和区分不同类型的文件。即使原来没有对应的唯一图标，这个扩展包也会为不同类型的文件提供更多的图标。这样一来，开发人员就可以更轻松地在多个文件之间进行切换和管理了。

以下是图标的示例：

图片

5. CSS Peek

安装链接：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

CSS Peek 允许开发人员在正在悬停的当前元素上查看所有 CSS 信息。这可以节省很多时间，同时在编码 HTML 或 JS 文件时允许更改 CSS 文件。它还可以用于仅查看和参考使用 CSS 显示的特定代码片段的方式。

• Peek：内联加载 CSS 文件并做快速编辑（Ctrl/Command+Shift+F12）
• Go To：直接转到 CSS 文件或在新编辑器中打开它（F12）

图片