前端工程师 VSCode 提效工具分享-技术圈

一、VSCode中常用画图的插件合集

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 中更高效、更方便地画图，以及创建交互式的代码片段。如果您有其他的插件推荐，欢迎在评论区分享。

二、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 - 这个插件可以帮助我们更好地注释代码。它支持不同类型的注释，并可以给不同类型的注释配上不同的颜色，让我们更加方便地区分不同类型的注释。