17个VSCode插件推荐
亚伯拉罕·林肯说：“给我六个小时砍一棵树，我会用前四个小时磨斧头。同样的原则也适用于 VSCode 及其内部的所有扩展。
在开始编码之前，您首先需要让您的工作流程适合您。让它更高效、更漂亮、更可定制。它会节省您大量的时间和精力，因此您将有更多的能力进行编码。
无论您是前端还是后端开发人员还是高级 Java 程序员，都没关系。这篇文章对你们大多数人来说仍然有用。特别是对于那些正在寻找一些新方法来改进我们常用的IDE 的人来说。
0. 适用于 VS Code 的 Figma
figma vs code插件是今年继chat gpt之后最好的插件。
Figma for VS Code 可让您导航和检查设计文件、与设计人员协作、跟踪更改并加快实施 - 所有这些都无需离开文本编辑器。通过消除将设计转化为代码所需的上下文切换和繁忙工作，提高开发人员的工作效率。
1.CodeTour
想象一下能够探索复杂的代码，就像您在导游的博物馆之旅中一样。这正是CodeTour所提供的。这种创新的扩展允许您记录和回放代码库的引导式浏览。这就像有一位私人导游带您穿越代码丛林。
对于试图掌握新代码库结构的初学者来说，CodeTour 不仅是一个令人惊叹的工具，而且对于您未来的编码自我来说，它也是一个方便的提醒！
2.GitHub Copilot
来认识一下GitHub Copilot，您的新编码助手。这个人工智能驱动的工具会在您键入时为您提供整行或整段代码的建议。不过，它的特别之处在于它能够从您正在处理的代码中学习并相应地调整其建议。
这就像拥有一位具有人工智能功能的编码导师。GitHub Copilot可帮助捕获错误、增强您的编码过程并一路学习。对于那些开始编码之旅的人来说，该工具提供了宝贵的支持和指导。
3. Turbo 控制台日志
调试就像解开一个谜。Turbo Console Log 是您执行此任务时值得信赖的伙伴。此扩展简化了创建信息丰富的console.log()语句的过程，使它们只需单击一下即可轻松完成。
通过使用 Turbo Console Log，您可以快速记录任何变量、对象或函数。这加快了调试速度，让编码初学者不再那么畏惧。告别敲出每条日志语句的费力过程。Turbo Console Log 为您提供支持。
4.实时分享
当您开始编码之旅时，协作是关键，而 Live Share 将协作编码提升到了一个全新的水平。此扩展可实现代码上的实时、双向协作。它就像 Google Docs，但用于编码。
您可以与其他人共享您的 VSCode 环境，以便他们与您一起编辑和调试。这对于向他人学习、结对编程、甚至在遇到困难时寻求帮助都是非常宝贵的工具。这是一种共享的编码体验，就在您的编辑器中。
5.TODO
当您刚开始时，跟踪多个TODO注释可能会让人感到不知所措。输入 Todo Tree，您在VSCode中的个人组织者。此扩展提供了工作区中所有TODO注释的鸟瞰图，提供了需要您注意的内容的全面视图。
待办事项树不仅仅是一个记住任务的工具；它也是一个工具。这是关于有效管理您的工作流程。通过清晰地显示所有待处理的任务，待办事项树可以帮助您保持井井有条，确保您永远不会措手不及。
6.Rest Client
在 VSCode 和 Postman 等工具之间切换可能会扰乱您的工作流程。但是如果您可以直接从编辑器发出 HTTP 请求怎么办？这就是 Rest Client 发挥作用的地方。通过此扩展，您可以发送 HTTP 请求并查看响应，而无需离开 VSCode。
Rest Client 不仅简化了您的流程，还让您专注于手头的任务。通过消除在应用程序之间切换的需要，Rest Client 使您的 VSCode 环境成为您的指挥中心。
7.CSS Peek
对于初学者来说，在 HTML 和 CSS 文件之间导航可能会感到困惑。CSS Peek 可以帮助您直接从 HTML 文件中查看 CSS ID 和类定义。这就像有一个放大镜，可以通过 HTML 查看 CSS。
通过消除在文件之间跳转的需要，CSS Peek 可以让您保持专注。作为初学者，这种无缝集成可以真正改变游戏规则。
8.Import Cost
曾经对您要导入的包的大小感到好奇吗？ Import Cost可帮助您消除猜测。此扩展显示导入包的大小以及导入语句。
注意要添加的库的大小对于维持应用程序的性能至关重要。 Import Cost是从一开始就开始培养这种意识的绝佳工具。
9.Thunder Client
Thunder Client 是您进行 API 测试的首选工具。Thunder Client 是 VSCode 中内置的轻量级、直观的扩展，是 Postman 等工具的绝佳替代品。它支持所有 HTTP 方法、自动 JSON 和 XML 格式化等等。
Thunder Client 使 API 测试尽可能简化和高效。对于任何开始编码之旅的人来说，它都是必备工具。
10. File Utils
创建、复制、移动、重命名、删除文件和目录的便捷方法。
11. Photopea
Photopea 在线照片编辑器可让您编辑照片、应用效果、滤镜、添加文本、裁剪图片或调整图片大小。直接在 Visual Studio Code 中免费使用 Photopea 编辑图像。
12. Better Comments
Better Comments 扩展将帮助您在代码中创建更人性化的注释。通过此扩展，您将能够将注释分类为：
- 警报
- 查询
- 待办事项
- 强调
- 注释掉的代码也可以进行样式设置，以明确该代码不应该在那里
- 您想要的任何其他评论样式都可以在设置中指定
13. Sort lines
在 Visual Studio Code 中对文本行进行排序。
14. Convert CSS to Tailwindcss
将CSS转换为Tailwindcss
15. vscode-pdf
在 VSCode 中显示 pdf。
16. Total TypeScript
从 IDE 中学习 TypeScript。获取有关语法的有用提示，并获取 TypeScript 最神秘错误的翻译。
17. CodeQue - 多行和结构代码搜索
CodeQue 是理解代码语法的代码搜索引擎。
它匹配结构而不是纯文本，这使得它对于复杂查询非常有效。
VSCode 扩展旨在改善代码搜索和导航体验。
高级搜索选项和类似待办事项的准确搜索结果列表使其成为您的新超能力。
它是生态系统中的工具之一。还有CLI 工具和ESLint 插件，可用于零时间创建自定义规则。
CodeQue 支持任何编程语言的多行代码搜索以及 JavaScript 和 TypeScript 的结构代码搜索。
很快就会添加对其他编程语言的结构搜索支持。