vscode 你离不开的10个插件

vscode 是一款非常流行的代码编辑器，它不仅拥有强大的功能，还支持各种插件来扩展其能力。在这篇博客文章中，我将向你介绍我认为你离不开的10个vscode插件，它们可以帮助你提高编程效率，改善代码质量，增强视觉体验，甚至让你的编程过程更有趣。

• Prettier

  Prettier 是一个代码格式化工具，它可以自动地将你的代码按照一致的风格进行排版。你可以在 vscode 中安装 Prettier 插件，然后在保存文件时或者使用快捷键时自动格式化你的代码。Prettier 支持多种语言，如 JavaScript, TypeScript, HTML, CSS, Markdown 等，你也可以自定义一些格式化选项，如缩进大小，单引号还是双引号，分号的使用等。

• ESLint

  ESLint 是一个 JavaScript 代码检查工具，它可以帮助你发现和修复代码中的错误和不规范的地方。你可以在 vscode 中安装 ESLint 插件，然后在编辑器中看到 ESLint 的提示和警告，并且可以一键修复部分问题。ESLint 也支持自定义规则和配置文件，你可以根据你的项目和团队的要求来设置 ESLint 的行为。

• Live Server

  Live Server 是一个可以让你在本地运行一个简单的 HTTP 服务器的插件，它可以让你快速地预览和调试你的网页。你只需要在 vscode 中打开一个 HTML 文件，然后右键选择 Open with Live Server，就可以在浏览器中看到你的网页，并且当你修改文件时，浏览器会自动刷新。Live Server 还支持一些高级功能，如 HTTPS, 自定义端口号, 代理等。

• Code Runner

  Code Runner 是一个可以让你在 vscode 中运行各种语言的代码片段的插件，它支持超过 40 种语言，如 Python, Ruby, Java, C#, Go 等。你只需要选中一段代码，然后右键选择 Run Code 或者使用快捷键，就可以在 vscode 的输出窗口中看到运行结果。Code Runner 还支持一些选项，如显示时间和内存消耗，自定义运行命令等。

• Bracket Pair Colorizer

  Bracket Pair Colorizer 是一个可以让你的括号更加清晰可见的插件，它会根据括号的层级给不同的括号配上不同的颜色，并且在括号之间画上一条连线。这样一来，你就可以很容易地看出哪些括号是匹配的，哪些括号是多余或者缺失的。Bracket Pair Colorizer 支持多种括号类型，如圆括号，方括号，花括号等。

• GitLens

  GitLens 是一个可以让你更好地使用 Git 的插件，它可以在 vscode 中显示 Git 的相关信息和操作。例如，你可以在编辑器中看到每一行代码是谁写的，什么时候写的，以及对应的提交信息；你也可以在侧边栏中看到当前分支的历史记录和文件变化；你还可以在编辑器中进行一些 Git 操作，如比较文件版本，切换分支，撤销更改等。

• Auto Rename Tag Auto Rename Tag 是一个可以让你更方便地重命名 HTML 或 XML 标签的插件，它会自动地将开始标签和结束标签同步修改。例如，如果你将一个 <div> 标签改为 <span> 标签，那么对应的 </div> 标签也会自动变为 </span> 标签。这样一来，你就不用再手动去修改结束标签了。

• VSCode Icons VSCode Icons 是一个可以让你的 vscode 更加美观和个性化的插件，它会给 vscode 的文件和文件夹图标换上一套新的图标风格。VSCode Icons 支持多种图标主题和颜色方案，并且覆盖了大量的文件类型和语言。你可以根据自己的喜好来选择和切换图标主题。

• Quokka.js Quokka.js 是一个可以让你实时地运行和调试 JavaScript 和 TypeScript 代码的插件，它会在编辑器中显示代码的执行结果和变量值，并且支持断点和控制台输出。Quokka.js 可以让你快速地验证和测试代码逻辑，并且提供了一些高级功能，如代码覆盖率分析，内联值显示等。

• Power Mode Power Mode 是一个可以让你的编程过程更有趣和动感的插件，它会在你敲击键盘时产生各种粒子效果和声音效果，并且随着敲击次数增加而增强效果。Power Mode 还支持自定义粒子效果和声音效果，并且提供了一些预设主题供你选择