2023你需要使用的最佳VSCode扩展

2023-09-05 20:10 由磁石空杯发表于 #其他

Visual Studio Code（VSCode）是一款广受欢迎的多功能代码编辑器，在最新的Stack Overflow开发者调查中，近75%的开发者将其选为首选集成开发环境。

VS Code 提供了一系列开箱即用的特性和功能，但其真正的威力在于市场上庞大的扩展生态系统。

整理了 VSCode 30大扩展列表，希望大家能使用这些扩展来提高工作效率、增强编码体验并提高工作流程的效率。

从Git集成和协作编辑到代码格式化和调试，这些扩展涵盖了广泛的功能，一定会让你的开发体验更加愉快。

本文持续更新，后续更新地址：https://www.cnblogs.com/testing-/p/17678797.html

1 VSCode扩展的重要性

提高效率

VS Code 插件可以自动执行格式化、生成模板代码和调试等重复性任务，从而节省时间和精力。

提高易用性

Visual Code插件可提供文本转语音、屏幕阅读器和高对比度主题，使编辑器更易使用。

个性化编辑器

自定义编辑器，以适应你的偏好和工作流程。例如，有一些扩展可以更改配色方案、字体和编辑器布局。

与外部工具集成

将VS Code与Git、Docker和ChatGPT等实用工具集成，提供无缝的开发体验。

协作

VSCode扩展工具可实现实时编辑和调试、代码共享和版本控制，从而促进开发人员之间的协作。

2 2023年最佳VSCode扩展

2.1 Settings Sync

主要功能：跨设备同步VSCode设置。此扩展已弃用，VSCode已经内置其功能。

该扩展允许你在不同机器上同步设置、按键绑定、快捷方式、扩展和片段。你可以将这些设置同步到你的GitHub账户，这样你就可以在任何设备上轻松访问你的设置。

这对于在多台设备上工作或需要快速设置新设备的开发人员来说非常有用，因为他们可以轻松地在所有机器上复制自己喜欢的设置。

2.2 Live Server

主要功能：启动本地服务器，实时查看静态或动态网页的变化。

这个visual studio代码插件可以启动本地开发服务器，并在浏览器中实时查看代码更改。只要你保存代码中的更改，它就会自动刷新浏览器，让你可以看到自己执行的更改。

2.3 Prettier

主要功能：前端语言自动代码格式化和样式执行。

Prettier 是一个独特的代码格式化和风格执行器。当你点击保存时，它会根据一系列规则和约定自动格式化你的代码。

如果你想确保代码格式的一致性和简洁性，而无需花时间手动格式化代码，那么你应该考虑使用这个扩展。它对团队也很有用，因为它能确保风格一致，只需团队成员付出很少的努力即可维护。

2.4 GitLens

主要功能：查看内联Git注释等。

GitLens可在代码编辑器中提供增强的Git功能。它增加了内联责备注释、代码透镜等功能，还能帮助你更好地理解代码及其历史。

有了GitLens，你可以看到代码行随着时间推移而发生的变化，以及谁做了这些变化。

2.5 VSCode-icons

主要功能：VSCode中文件和文件夹的图标。

如果您在大型项目中处理大量文件夹和文件，导航可能会令人厌烦，因为所有文件夹看起来都一样。
VScode-icons可为项目中的文件夹和文件图标添加风格和色彩，它可以帮助您轻松识别不同的文件夹和文件类型，从而减少浏览项目时的疲劳感。

2.6 Tabnine

主要功能： AI驱动的代码自动补全和建议。支持Python, Typescript, PHP, Go, Java, 等Javascript语言。

Tabnine使用AI在你输入时提供智能代码补全建议。它可以从你的代码中学习，并根据你当前的上下文和编码模式建议代码补全。这非常有用，因为它可以帮助你更快地完成代码，从而提高你的工作效率。

2.7 Peacock

主要功能：为不同的VS Code工作区添加颜色。

该扩展可让你为不同的项目自定义工作区颜色和设置，这对于同时处理多个项目的开发人员来说很有帮助，因为他们需要一个视觉线索来帮助他们跟踪正在处理的项目。

通过对工作空间进行颜色编码，你可以轻松识别和切换不同的项目。

2.8 Polacode

主要功能：创建精美的代码截图。

如果你想分享代码片段，在文档或演示文稿中加入代码片段，那么这个扩展就会派上用场。

Polacode可让你创建带有语法高亮显示的精美代码截图。高亮显示你想截取的代码，剩下的就交给Polacode吧。

2.9 Docker

主要功能：在VS Code中管理Docker容器。

Docker允许开发人员在代码编辑器中使用容器化应用程序。

对于需要在开发工作流中使用容器和映像的开发人员来说，它非常有用，因为它为管理和部署容器提供了精简的界面。

2.10 Better Comments

主要功能：为代码添加翔实的注释。

Better Comments可为注释添加颜色和格式，从而增强代码注释的可读性。使用该扩展，你还可以将注释分类为警报、查询、待办事项、亮点等。

2.11 Excel Viewer

主要功能：在 VS Code中查看Excel文件。

Excel Viewer可让你在代码编辑器中预览Excel文件。如果你需要处理Excel电子表格和 CSV 文件，并希望在不离开代码编辑器的情况下预览它们，那么你会发现这个扩展非常有用。

2.12 Code Spell Checker

主要功能检测并修复代码中的拼写错误。

该扩展可检查代码注释、字符串和标记文件中的拼写错误。如果你想提高代码的可读性和专业性，这个扩展就能帮你抓住常见的拼写错误。

2.13 Code Runner

主要功能：运行代码片段。

该扩展是一款允许你直接从VS Code编辑器中运行30多种编程语言的整个代码文件的代码片段的工具。当你不想运行整个代码库时，这对测试非常有用。

2.14 Turbo Console Log

主要功能：一键插入JS控制台日志语句。

Turbo Console Lo 允许你使用键盘快捷键快速为代码添加有意义的JavaScript控制台日志语句。当你需要调试代码，并希望以快速高效的方式添加控制台日志语句时，这个扩展就会大显身手。

2.15 Git History

主要功能：查看Git历史并比较文件版本。

Git History可以帮助你直观地查看Git日志，可在代码编辑器中交互式查看Git仓库历史。它还提供了简洁的界面来比较分支和提交。

2.16 Indent-rainbow

主要功能用彩色标记代码中的缩进级别。

缩进代码可以提高代码的可读性，使其更易于理解和维护。该扩展可为代码中的各级缩进添加颜色。它会自动使用你为编辑器设置的当前制表符大小。

2.17 Auto Rename Tag

主要功能：重命名HTML/XML标签。

当你重命名HTML/XML标签时，它会自动重命名这些标签。使用该扩展，您无需在重命名开头标签时手动更新结尾标签。

2.18 ChatGPT

主要功能： GPT-4,Key-free,Free of charge,免Key,免魔法,免注册,免费

ChatGPT 已成为最常用的人工智能工具之一，许多开发人员都使用 chatGPT 来帮助他们更快地工作。该扩展可帮助你将 ChatGPT 集成到你的 VS 代码中。这样，你就可以在不离开代码编辑器的情况下使用 ChatGPT。

2.19 Markdown All in One

主要功能：在VS Code中集成Markdown支持。

该扩展通过提供一套用于格式化、预览和导出Markdown文件的工具，帮助你在代码编辑器中编辑Markdown文件。

2.20 ES7+ React/Redux/React-Native Snippets

主要功能：收集最常用的JavaScript代码片段。

JavaScript Code Snippets收集了使用JavaScript时有用的代码片段。这是JavaScript开发人员的必备扩展，他们希望通过使用预置代码片段来完成常见任务，从而节省时间。

2.21 ES7+ React/Redux/React-Native 代码片段

主要功能：React和Redux代码片段集。

与JS代码片段类似，该扩展也提供了用于使用React和Redux的代码片段集。最新版本还增加了TypeScript代码片段。

2.22 CSS Peek

主要功能：浏览/查看代码中的 CSS 定义。

只需点击HTML文件中的CSS类或ID，就能快速从HTML跳转到CSS代码，然后再跳转回来。

参考资料

软件测试精品书籍文档下载持续更新 https://github.com/china-testing/python-testing-examples 请点赞，谢谢！
本文涉及的python测试开发库谢谢点赞！ https://github.com/china-testing/python_cn_resouce
python精品书籍下载 https://github.com/china-testing/python_cn_resouce/blob/main/python_good_books.md
Linux精品书籍下载 https://www.cnblogs.com/testing-/p/17438558.html
https://docs.platformio.org/en/latest

2.23 Remote - SSH

主要功能：在VS Code中通过SSH与远程服务器协作。

Remote - SSH允许你通过SSH连接到远程服务器或容器，并像在本地机器上一样编辑文件。

如果你经常处理存储在远程服务器或容器上的代码，你会发现远程SSH非常有用，因为它提供了一种无缝、安全的方式来访问和编辑代码。

2.24 GitHub Copilot(收费）

主要功能：人工智能驱动的代码建议和生成

GitHub Copilot 可在你输入代码时为你提供AI驱动的代码建议。通过提供自动完成和代码建议，它可以帮你节省时间并提高工作效率。它甚至可以根据你提供的注释编写代码。

2.25 colorize(css)

主要功能：为代码中的文本和十六进制色码着色。

colorize可根据代码的语法为文本添加颜色。对于想要在代码编辑器中为元素样式添加可视化颜色的前端开发人员来说，这也非常有用。

2.26 Bookmarks

主要功能：在代码中快速添加和浏览书签。

在处理大型代码库时，书签是最有用的visual studio 代码扩展之一。它允许你在文件中为代码行添加书签，以便快速导航。这样，您就可以轻松快速地浏览到这些特定的代码行。

2.27 REST Client

主要功能：REST Client。

REST Client可让您直接在Visual Studio Code中发送HTTP请求并查看响应。

2.28 Import Cost（Javascript and Typescript）

主要功能：显示import/require的包大小。

该扩展将在编辑器中内嵌显示导入软件包的大小。该扩展利用 webpack 来检测导入包的大小。

2.29 SonarLint

主要功能：多语言的静态分析工具。

SonarLint可在本地检测和修复 JS/TS、Python、PHP、Java、C、C++、Go、IaC 中的编码问题。与SonarQube和SonarCloud配合使用，以优化团队绩效。

主要功能：使用自己喜欢的工具进行实时协作开发。

Visual Studio Live Share 使您能够与他人实时协作编辑和调试，无论您使用何种编程语言或构建何种应用程序类型。它允许你即时（安全地）共享当前项目，然后根据需要共享调试会话、终端实例、本地主机网络应用程序等！加入会话的开发人员会从您的环境（如语言服务、调试）中获得所有编辑器上下文，这确保他们可以立即开始富有成效的协作，而无需克隆任何软件仓库或安装任何 SDK。

此外，与传统的结对编程不同，Visual Studio Live Share 允许开发人员一起工作，同时保留他们个人的编辑器偏好（如主题、键绑定），并拥有自己的光标。这样，开发人员就可以在相互跟随和独立探索想法/任务之间无缝切换。在实践中，这种既能协同工作又能独立工作的能力提供了一种协作体验，对于许多常见的使用案例来说，这种体验可能会更加自然。

2.31 Project Manager

主要功能：在项目之间轻松切换。

可以用它在 VS Code上同时监督多个项目。无论项目位于何处，您都可以使用项目管理器扩展从一台电脑上访问它们。

2.32 Polacode

主要功能：截图。

Polacode用于下载.png和.jpg 图像形式的代码片段。这些截图保留了当前VS Code的所有样式和代码字体，是创建教程和共享代码的便捷工具。

2.33 Draw.io Integration

主要功能：绘图。

Draw.io绘图工具集成。

2.34 Hex Editor

主要功能：使用十六进制编辑器查看和编辑文件

2.35 GitHub Repositories

主要功能：远程浏览编辑GitHub库

2.36 Todo Tree

主要功能：在树形视图中使用 TODO、FIXME 等注释标记

3 专有领域

3.1 Python

主要功能：python语言支持

为Python语言提供丰富的支持（适用于所有当前支持的 Python 语言版本：>=3.7），包括 IntelliSense (Pylance)、linting、调试、代码导航、代码格式化、重构、变量资源管理器、测试资源管理器等功能！

3.2 PlatformIO IDE

主要功能：PlatformIO IDE是下一代物联网集成开发环境。

嵌入式、物联网、Arduino、CMSIS、ESP-IDF、FreeRTOS、libOpenCM3、mbed OS、Pulp OS、SPL、STM32Cube、Zephyr RTOS、ARM、AVR、Espressif (E) 的专业开发环境。

4 在VS Code中查找和使用最佳扩展的技巧

使用VSCode官方市场：这里有大量 VSCode 推荐的扩展，可按类别、评级、受欢迎程度等进行浏览。
查看评论、评级和下载次数：在开始将扩展安装到 VSCode 扩展位置之前，请查看统计信息，了解是否值得安装，并阅读评论，查找问题或限制。
不要一次安装太多扩展：只安装那些对你的工作流程有用的扩展，因为某些VSCode扩展设置可能会产生冲突，所以请留意你的VSCode扩展文件夹中的数量。
自定义扩展：许多扩展程序都有自定义设置，因此一定要根据自己的需要进行配置。
定期更新扩展：保持扩展程序更新，以确保您使用的是最新功能和错误修复。你可以将VS Code配置为自动更新，也可以手动更新。

5 总结

Visual Studio Code是一款功能强大、可定制的代码编辑器，选择合适的VSCode扩展让它变得更加出色。在本文中，我们介绍了2023年你需要的最佳VSCode扩展，以增强你的编码体验。

花点时间探索这些VSCode扩展工具，找到最适合你需要的。有了正确的扩展，你的编码技能就能更上一层楼，成为更高效、更有效的开发者。