Draw.io Integration ：这个插件可以在 VS Code 中集成 Draw.io，这个插件可以帮助我们在 VSCode 中创建流程图、UML图以及其他各种类型的图表。它提供了丰富的图形库和工具，让我们可以轻松地创建各种类型的图表。此外，它还支持将图表导出为PNG、PDF、SVG、XML等格式，方便我们在其他地方使用。

Mermaid Markdown Syntax Highlighting - 这个插件可以帮助我们在 VSCode 中编写 Mermaid Markdown 语法，并提供代码高亮和预览功能。Mermaid Markdown 是一种简单易懂的语法，可以让我们在 Markdown 中快速创建流程图和时序图等。它还支持将图表导出为PNG、SVG、PDF等格式，方便我们在其他地方使用。

Mermaid Diagrams - 这个插件可以帮助我们使用 Mermaid 语言进行图表绘制。它支持多种类型的图表，如流程图、时序图、甘特图等，并提供了多种主题和样式选项，可以让我们更加方便地进行个性化的图表绘制。

PlantUML - 这个插件可以帮助我们在 VSCode 中使用 PlantUML 语法创建 UML 图。它提供了丰富的图形库和工具，让我们可以轻松地创建各种类型的 UML 图。与 Draw.io Integration 不同的是，PlantUML 更加注重代码风格和规范，可以让我们在编写代码的同时，创建出规范的图表。

CodePen - 这个插件可以帮助我们在 VSCode 中创建交互式的代码片段。通过它，我们可以快速创建 HTML、CSS 和 JavaScript 代码，并在预览窗口中直接查看效果。它还支持分享代码片段和嵌入代码片段到其他网站中。

CodeTour ：这个插件可以帮助您在 VS Code 中创建交互式的代码演示，其中包括绘图和注释功能。

Graphviz (dot) language support - 这个插件可以帮助我们使用 Graphviz 语言进行图表绘制。它支持多种类型的图表，如有向图、无向图、流程图等，并提供了丰富的语法支持和自定义选项，可以让我们更加轻松地进行图表绘制。

Pikchr - 这个插件可以帮助我们使用 Pikchr 语言进行图表绘制。它提供了简单易用的语法和绘图工具，可以让我们更加方便地进行图表绘制。

Viz - 这个插件可以帮助我们使用 Viz 语言进行图表绘制。它支持多种类型的图表，如有向图、无向图、流程图等，并提供了丰富的语法支持和自定义选项，可以让我们更加轻松地进行图表绘制。

CodeSandbox Visualizer - 这个插件可以帮助我们将代码转换为可视化的图表，如树状图、词云图、饼图等。它支持多种类型的代码语言和图表类型，可以让我们更加轻松地进行代码可视化。

这些插件能够帮助您在 VSCode 中更高效、更方便地画图，以及创建交互式的代码片段。如果您有其他的插件推荐，欢迎在评论区分享。

Live Server - 这个工具可以帮助我们启动一个本地服务器，自动刷新页面，使我们能够立即看到更改，无需手动刷新页面。这个工具的作用是帮助我们提高工作效率，同时让我们更快地看到我们所做的更改。在开发过程中，这个工具是非常必要的。- 这个工具可以帮助我们启动一个本地服务器，自动刷新页面，使我们能够立即看到更改，无需手动刷新页面。这个工具的作用是帮助我们提高工作效率，同时让我们更快地看到我们所做的更改。在开发过程中，这个工具是非常必要的。

ESLint - 这是一个非常有用的工具，可以帮助我们检查代码标准和错误。使用ESLint，我们可以在编码时实时查找错误，从而提高我们的代码质量。这个工具的作用是帮助我们保证代码质量，并且减少出错的可能性。。

Prettier - 这是一个自动化代码格式化工具，可以帮助我们节省大量时间。使用Prettier，我们可以确保我们的代码始终保持一致的格式和风格，使其更易于阅读和维护。这个工具的作用是让我们的代码更加规范，提高我们的工作效率。

Auto Rename Tag - 这是一个非常有用的工具，可以帮助我们自动重命名HTML/XML标记。使用此工具，我们可以避免手动更改标记名称时可能出现的错误，从而提高我们的工作效率。这个工具的作用是让我们在修改代码的时候更加方便，减少出错的可能性。

Path Intellisense - 这是一个自动文件路径完成工具，可以帮助我们快速找到需要的文件。通过使用此工具，我们可以消除手动输入文件路径的需要，从而提高我们的工作效率。这个工具的作用是让我们更加快速地找到我们需要的文件，减少我们在文件路径上花费的时间。

GitLens - 这个插件可以帮助我们更好地使用Git进行版本控制。它提供了代码评论和代码比较等功能，可以使我们更方便地管理我们的代码。这个工具的作用是让我们更加方便地管理我们的代码，更好地使用版本控制工具。

REST Client - 这个插件可以帮助我们在VSCode中发送HTTP请求，支持多种HTTP请求方法，使我们更方便地测试和调试API。这个工具的作用是让我们更加方便地测试和调试API，减少我们在测试和调试上花费的时间。

Code Spell Checker - 这个插件可以帮助我们检查代码中的拼写错误，支持多种语言，使我们更方便地找到拼写错误。这个工具的作用是让我们更加方便地找到代码中的拼写错误，提高我们的代码质量。

Rainbow Brackets - 这个插件可以帮助我们更好地区分代码中的括号。它为每一对括号添加不同的颜色，使我们更方便地阅读代码。这个工具的作用是让我们更加方便地阅读代码，减少我们在代码阅读上花费的时间。

TabNine - 这个插件可以帮助我们更快地编写代码。它基于机器学习，可以预测我们接下来要输入的代码，并提供自动补全功能，让我们更加高效地编写代码。而且，TabNine 还支持多种语言，包括 Python、Java、JavaScript、C++ 等，使得我们可以在不同的开发环境中使用它。

Bracket Pair Colorizer - 这个插件可以帮助我们更好地区分代码中的括号对。它会为每一组括号对添加相同的颜色，让我们更加方便地阅读代码。除此之外，它还支持自定义括号对的颜色以及样式，使得我们可以根据自己的喜好来设置。

Settings Sync - 这个插件可以帮助我们将 VSCode 的设置和插件同步到不同的设备上。它可以将我们的设置和插件上传到 GitHub Gist，并在不同设备上进行同步，让我们更加方便地管理 VSCode。

Code Runner - 这个插件可以帮助我们在 VSCode 中直接运行代码。它支持多种编程语言，可以让我们更加方便地运行代码。此外，该插件还支持调试功能，可以帮助我们更加深入地理解代码运行时的情况。

Indent-Rainbow - 这个插件可以帮助我们更好地区分代码中的缩进。它会为每一层缩进添加不同的颜色，让我们更加方便地阅读代码。此外，该插件还支持自定义颜色、缩进空格数等功能，可以让我们更加方便地适应个性化需求。

Import Cost - 这个插件可以帮助我们计算导入的模块的大小。它可以让我们更加方便地优化代码，减小代码体积。另外，它还可以提供可视化的分析结果，帮助开发者更好地理解项目的架构。除此之外，该插件还支持自定义大小限制、自定义显示单位等功能，可以让我们更好地掌控项目的代码质量。

Polacode - 这个插件可以帮助我们生成代码截图。它提供了多种主题和样式，可以让我们更加方便地分享代码。此外，它还可以生成基于当前代码的图片，方便我们在文档中插入代码示例。

Quokka.js - 这个插件可以帮助我们在 VSCode 中进行实时代码评估。它可以让我们更加方便地测试代码。此外，它还可以为我们提供实时反馈，帮助我们更快地找到代码中的错误。

Visual Studio IntelliCode - 这个插件基于人工智能，可以帮助我们更快地编写代码。它可以预测我们接下来要输入的代码，并提供自动补全功能，让我们更加高效地编写代码。

Vetur - 这个插件可以帮助我们更好地开发 Vue.js 项目。它提供了代码高亮、语法检查、代码补全等功能，可以让我们更加方便地开发 Vue.js 项目。

Debugger for Chrome - 这个插件可以帮助我们在 VSCode 中调试 JavaScript 代码。它支持在 Chrome 中调试代码，并提供了调试器界面和调试功能，可以让我们更加方便地调试代码。

Python - 这个插件可以帮助我们更好地开发 Python 项目。它提供了代码高亮、语法检查、代码补全等功能，可以让我们更加方便地开发 Python 项目。

Material Icon Theme - 是一个用于改善 VSCode 文件图标的插件，这个插件可以帮助我们更好地视觉化文件和文件夹。它提供了丰富的图标库，可以让我们更加方便地区分文件和文件夹。此外，它还支持自定义图标，让我们可以根据自己的喜好来设置。

CSS Peek - 这个插件可以帮助我们更好地查看 CSS 样式。它支持在 HTML 文件中查看 CSS 样式，并提供了代码跳转和代码预览功能，可以让我们更加方便地查看 CSS 样式。

Markdown Preview Enhanced - 这个插件可以帮助我们更好地预览 Markdown 文件。它提供了丰富的预览功能，可以让我们更加方便地查看 Markdown 文件。并提供了许多有用的功能，如数学公式、代码块高亮、表格生成等。它还支持导出文件为 HTML、PDF、PNG、JPEG 等格式，方便您在其他地方使用。

Better Comments - 这个插件可以帮助我们更好地注释代码。它支持不同类型的注释，并可以给不同类型的注释配上不同的颜色，让我们更加方便地区分不同类型的注释。

下面是一些常用的 VSCode 快捷键，它们可以帮助您更高效地使用这个编辑器、更快地访问常用功能和快捷操作，提高工作效率。如果您刚刚开始使用 VSCode，建议您先掌握这些快捷键，以便更快地完成您的工作。

Ctrl + Shift + P：打开命令面板，可以搜索并执行 VS Code 中的任何命令。

Ctrl + Shift + N：打开新的 VS Code 窗口。

Ctrl + Shift + E：显示/隐藏资源管理器面板，它显示您的文件系统，并允许您浏览项目。

Ctrl + Shift + F：打开搜索面板，可以在您的文件中搜索文本，跨多个文件在您的项目中搜索，甚至跨多个项目搜索。

Ctrl + Shift + G：打开源代码控制面板，可以管理您的 Git 存储库并执行 Git 操作。

Ctrl + Shift + D：打开调试面板，可以调试您的代码并设置断点。

Ctrl + Shift + X：打开扩展面板，可以安装、管理和配置 VS Code 扩展程序。

Ctrl + P：打开快速打开面板，可以通过键入文件名称来快速打开项目中的文件。

Ctrl + /：注释或取消注释当前行或选定的代码块。

Alt + ↑ / ↓：将当前行或选定的代码块上移或下移一行。

Ctrl + K Ctrl + S：打开键盘快捷键设置。

Ctrl + W：关闭当前编辑器或终端。

Ctrl + Shift + T：重新打开最后关闭的编辑器。

Ctrl + Tab：在打开的编辑器之间切换。

Ctrl + \\：打开集成终端。

Ctrl + J：显示/隐藏底部的面板。

Ctrl + B：显示/隐藏侧边栏。

Ctrl + K M：更改当前文件的语言模式。

Ctrl + Shift + V：在预览模式下打开 Markdown 文件。

Ctrl + Shift + I：在开发者工具中打开选定的元素。

F12：转到定义。

Alt + F12：查找所有引用。

Ctrl + K Ctrl + C：注释选定代码块。

Ctrl + K Ctrl + U：取消注释选定代码块。

Ctrl + Shift + [：将选定的代码块向左缩进。

Ctrl + Shift + ]：将选定的代码块向右缩进。

Ctrl + Shift + Enter：在当前行上方插入新行。

Ctrl + Shift + Alt + Up/Down：复制当前行或选定的代码块，并将其粘贴到上方或下方。

F2：重命名当前选定的符号。

Ctrl + Shift + F7：高亮匹配的括号。

Alt + Left/Right：在编辑器历史记录中向后/向前导航。

Ctrl + Shift + Alt + Left/Right：在编辑器组之间切换。

F9：在当前行设置断点。

F5：启动调试。

F10：逐过程调试。

F11：逐语句调试。

Shift + F11：从当前函数调用中退出调试。

Ctrl + K Z：切换 Zen模式，隐藏所有UI元素以提供更好的阅读体验。

Ctrl + Shift + K：删除当前行。

Ctrl + Alt + Up / Down：在当前行上方/下方插入新行。

Ctrl + Enter：在当前行下方插入新行。

Shift + Alt + F：格式化整个文档。

Ctrl + Shift + V：在侧边栏中打开 Markdown 预览。

Ctrl + Shift + F10：在终端中运行当前文件。

Alt + Z：切换单词包裹（将单词从长行中折叠成多行）。

Ctrl + K Ctrl + K：从光标到行尾删除。

Ctrl + K Ctrl + U：将选定文本转换为小写。

Ctrl + Shift + Alt + F：格式化选定代码。

Ctrl + Shift + Alt + O：删除所有未使用的导入。

Ctrl + Shift + Alt + F12：显示所有引用。

Ctrl + Shift + Alt + T：重命名符号。

Shift + Alt + Down / Up：将当前行向下/上复制一行。

如果您有其他更好用的工具和快捷键推荐，欢迎在评论区分享。

往期回顾

#

如何使用 TypeScript 开发 React 函数式组件？

#

11 个需要避免的 React 错误用法

#

6 个 Vue3 开发必备的 VSCode 插件

#

3 款非常实用的 Node.js 版本管理工具

#

6 个你必须明白 Vue3 的 ref 和 reactive 问题

#

6 个意想不到的 JavaScript 问题

#

试着换个角度理解低代码平台设计的本质

回复“加群”，一起学习进步