2022年面向开发者的40多个VSCode扩展项目介绍

在编写代码时，一个富有成效的工作空间不仅仅是要找到合适的代码编辑器。开箱即用的VS Code是为开发人员制作的。根据2021年StackOverflow的调查，71.06%的受访者使用Visual Studio Code作为IDE的首选。

使得VS Code如此受欢迎的是 市场中可用的扩展程序的数量。有超过30,000个扩展在流通，选项感觉几乎是无限的--同时也是压倒性的。

根据程序员的时间跟踪工具WakaTime，Visual Studio Code在2020年的开发工作中超过了1800万小时。此外，Visual Studio Code占开发人员使用的所有编辑器中跟踪的总时间的46%。

你应该选择哪些扩展？哪些扩展对生产力来说是最好的？代码版本管理？美观性？格式化和提示性？如果你想要的话，可能在市场的某个地方就有一个扩展。

这里有40多个VS Code扩展--经过策划、排序和分类，以帮助你提高生产力，使你作为一个开发者更加有效。

生产力

1. GraphQL在VS Code市场上有超过50万的下载量，GraphQL是一个新兴的插件扩展，值得关注。GraphQL本身也在不断普及和实施，这意味着如果你在下一个项目中遇到它，VS Code上的GraphQL扩展是一个必须的选择。

这个插件由官方GraphQL基金会维护，这意味着它得到了积极的支持，并保持着最新的实现。

2. TabnineTabnine是你的多合一人工智能助手，可以帮助你更快地编码。到目前为止，这个插件已经有超过200万的安装量，它由机器学习驱动，与你项目的现有模式一起工作。在其预测性的代码自动完成中，Tabnine采用了同样下载和使用该插件的其他人的综合知识。

   
   Tabnine不仅仅是一个自动完成器--它是一个独特的由AI驱动的预测性代码完成器，你越是使用它就越能提高你的生产力。

3. YAMLYAML 的设置可能很棘手。一个杂乱的空格或不正确的制表符就会导致一个无效的YAML文件。YAML插件由红帽公司维护，作为一个验证工具。

4. 远程 - SSH发布于2019年的远程SSH已经发展到500多万次下载。这个扩展可以让你使用一个远程服务器作为你的开发环境。你的连接通过SSH保持安全，而且通过Remote - SSH，你可以在VS Code内完成。

   

   通过这种设置，你可以有一台机器在云端运行，将你的工作流程集中到一个来源，而且不需要在你工作的机器上有源代码。

5. 设置同步在多个设备上工作？设置同步解决了你的工作空间设置无法使用的恼人问题。有了Settings Sync，你可以在GitHub Gists的帮助下将片段、主题、文件图标、密钥绑定和扩展带到你需要的地方。

   

   Settings Sync最好的部分是它完全免费、开源，并且有超过200万的安装量。

6. 自动重命名标签
   由TabNine赞助，自动重命名标签于2016年首次在市场上推出。此后，它的下载量增长到600多万次，并被开发人员广泛使用，以帮助完成简单而重复的讨厌的重命名成对的HTML/XML标签的任务。

   

   我们都经历过这样的情况--试图寻找标签对，尤其是在有嵌套、{{双曲线}}和逻辑条件的情况下--只是因为手动操作而沮丧地举手。自动重命名标签可以节省时间和开发人员的理智。

7. CSS Peek
   如果你在前台工作，CSS是工作流程中不可避免的一部分。随着项目的发展，你的风格设计也要配合要求。CSS在本质上是线性的，这可能会让人感到沮丧，尤其是当你想检查造型时，不需要滚动和穿越所有不同的文件来找到你想要的东西。

   

   CSS Peek是VS Code的一个扩展，它让你只需简单地点击几下，就能进入工作区的CSS定义和符号。

8. 代码运行器
   有时，你不需要运行你的整个项目，只需要其中的一小段。这就是Code Runner的用武之地。这个VS代码插件支持多种语言，可以通过预定义的键盘快捷键或在鼠标的帮助下运行高亮代码。

   
   由TabNine赞助，这个节省时间的扩展受到了开发者的喜爱，已经被安装了900多万次。

它内置了Kubernetes语法支持，并有五个核心功能--验证、文档大纲、自动完成、如果模式提供，则支持显示描述的过度，以及格式化。

美学 生产力 工作流程

9. 材料图标主题
   当你只有文件和文件夹的时候，一切都开始变得一样了。随着项目的增长，你很快就会失去直观地扫描你的文件结构的能力。材料图标主题通过安装视觉上吸引人的图标，把这种能力还给你，其灵感来自谷歌的材料设计。

   

   有了大量的文件夹和文件图标，你可以确信你所有的编码需求都被直观地分类了，使你很容易及时获取你需要的东西。

10. 支架对色器

    让我们说实话--我们都在某个时候失去了我们的括号和大括号。当你处理嵌套和逻辑条件时，情况会变得更糟。括号对着色器通过给每对括号附加不同的颜色来解决我们代码中的括号对猎取问题。

    这意味着，如果你有多个括号，它可以很容易地进行颜色匹配，以方便我们的工作和编码效率。

11. 孔雀
    有时，你需要打开VS Code的多个实例。这可能是你在同时处理多个代码库，或者需要在项目之间快速切换，而不需要打开和关闭它们。

    

    通过颜色，Peacock使我们很容易识别工作区。你所要做的就是打开VS Code工作区，按F1键打开命令调色板，输入Peacock，从预定义的颜色中选择适合你的编辑器。

12. 色彩化
    颜色的使用是一个强大的生产力工具。当融入你的代码时，它可以加快你的工作流程。Colorize是在考虑到CSS的情况下创建的，它通过CSS变量、预处理器变量、hsl/hsla颜色、跨浏览器颜色、exa、rgb、rgba和argb的彩色背景，帮助你立即将CSS颜色可视化。

    

    它支持你的标准CSS、SASS、LESS、post CSS、stylus和XML。

13. vscode-icons
    如果你喜欢受材料设计启发的图标，那么vscode-icons也是一个不错的选择。vscode-icons拥有超过900万的安装量，它支持全球化，并且能够使用你的图标包进行定制，自动检测你的项目，并允许自定义配置。

    

14. 图标字体
    你在你的项目中是 Font Awesome的用户吗？或者你使用 安卓图标？你想在不需要一直快速参考文档的情况下进行原型设计吗？Icon Fonts是一个生产力工作工具，它结合了自动完成和IntelliSense，用于将各种图标字体纳入你的前端的HTML。

    

    支持主要的图标字体，如 Creative Commons Icon Fonts、 Font Logos和 Bootstrap Glyphicons，图标字体插件是一个生产力的必备工具。

15. 实时SASS编译器
    SASS是保持你的CSS集中化和组织化的绝佳方式。然而，当你没有实时重载时，它也可能是一个痛苦的处理方式。实时SASS编译器使你很容易看到你的变化如何影响你的视觉输出。

    

    这个VS Code扩展可以实时编译/转写你的SASS和SCSS文件到CSS文件，并自动实时重载，不需要做任何额外的事情。

代码、版本管理和协作

16. 实时服务器
    Live Server是市场上安装最多的VS Code扩展之一，安装量超过1500万。为什么？因为它让你把你的VS Code编辑器变成一个全功能的IDE。

    

    功能包括启动具有实时重载功能的本地开发服务器，纳入启动和停止服务器的快捷方式，热键控制，远程连接，以及Chrome调试。

17. GitLens
    在Live Server之后，GitLens也很受欢迎，安装量超过1100万，并获得了近乎完美的5星评价。GitLens的创建是为了帮助开发者快速浏览和了解他们的代码是如何被修改、编辑、变更和导致冲突的。

    

    有时，在控制台中处理git的过程会让人不知所措。GitLens 通过将 git 文件移到我们的工作区，减少了在控制台中翻阅 git 文件的心理负担。

18. Git历史
    Git历史是一个VS Code插件扩展，让你可以轻松地查看历史并搜索提交、信息、分支、文件和作者。除此之外，它还可以让你通过几个简单的点击和命令来摘取提交、比较文件、软复位和硬复位、还原、合并和重定位。

    

19. 代码时间
    你是否曾想过你花了多长时间来编码？尽管已经转变为远程工作，但我们仍然很容易被生活中的事情所干扰，比如孩子、包裹的交付，甚至是狗--就像我们坐在办公室里通过同事和即兴会议一样。Code Time通过跟踪你的时间，让你对你的生产力负责，并可以帮助你划分你在哪个项目上工作得最多。

    

    像 "进入流程模式 "这样的功能可以帮助你保护你的时间，跟踪开发指标，把你的编码指标看成是一种统计趋势。

20. Polacode
    想分享一个代码片段吗？想让它看起来更专业吗？Polacode是一个很酷的小插件，它可以让你拍下你的代码的 "宝丽来"，而不需要拿出剪接工具。你突出显示你想要的代码，它将自动创建一个格式化的代码文件。

    

21. Docker Explorer
    Docker是一个奇妙的想法，但保持所有的图像、集线器和注册表的顶部可能很复杂。Docker Explorer使它更容易，并直接连接到Azure容器注册处进行实时管理。

    

22. 远程开发
    所以你有一些代码。或者你已经有了一个容器。远程开发可以让你连接、开发和部署环境。这个插件由微软开发和发布，目前处于积极的开发阶段，支持WSL、SSH和容器连接，用于远程应用开发。

    

格式化和林特化

23. 伪装
    谁不喜欢漂亮的代码？Prettier是你最受欢迎的格式化和提示工具，它根据行业惯例对你的代码进行标准化。它还能确保你的团队在外观上创造出视觉上无缝的代码--因此不再为你应该使用多少个制表符或空格或括号应该放在哪里而争论。

    

24. 美化
    如果你想成为一个叛逆者，Beautify是你在Prettier之外的选择。拥有超过700万的安装量，Beautify是另一个坚实的代码 "美化器"，以最小的干预来衬托和格式化你的代码。

    

25. 突出显示TODO
    我们在代码中都有一个工作清单，列出了要做的事情。我们也经常以注释的形式为自己和他人留下笔记。然而，注释往往会淡化和消失在背景中。TODO Highlight是一个VS Code插件，它允许我们利用代码中的注释来提高生产力。它的工作原理是突出显示代码注释，并将它们与原始待办事项列表进行颜色配对。

    

26. 更好的评论
    需要比TODO Highlight更强大的东西吗？更好的注释将它提升到一个新的水平，允许你根据不同类型的注释来突出显示你的注释。

    

    支持的类型有警报、查询、TODO和高亮。它还可以通过评论样式进行扩展，你可能需要其他东西。

27. Excel浏览器
    如果你正在处理数据，很有可能你也会遇到某种形式的Excel电子表格。Excel Viewer通过将长字符串和逗号分隔的字符串格式化为表格格式，使你在VS Code编辑器中处理excel数据变得容易。这对你的.csv、.tsv和.tab扩展名有奇效。

    

28. 标注nlint
    在某种程度上，markdown是新的HTML。然而，当你的markdown在某处漏掉了*、#或空格时，处理起来会很麻烦。markdownlint可以处理写markdown时出现的格式不一致问题。它还通过提醒你是否违反了markdown规则来帮助你学习正确的markdown。

    

29. ESLint
    ESLint是一个JavaScript代码的链接器，可以发现并修复你的JavaScript代码中的问题。它能很好地检测出你的代码中可能存在的问题模式，并帮助你修复它们以避免不一致和避免bug。

    

调试

30. 代码拼写检查器
    我们都有过这样的经历--我们都曾在某个地方出现过错别字，并花了宝贵的时间去寻找它们。代码拼写检查器是一个方便且广泛使用的拼写检查工具，它也适用于camelCase代码。

    

    这个VS Code插件已经帮助超过300万安装用户在编码工作流程中出现问题之前抓住拼写错误。

31. JavaScript 调试器
    在Visual Studio市场上有几个JavaScript调试器。一个可靠的插件扩展是JavaScript Debugger。这个基于DAP的JavaScript调试器可以在终端显示的进程中调试Node.js。

    

32. Turbo Console Log
    控制台日志可以提高或破坏你的生产力。Turbo Console Log是VS Code的一个活动插件，它可以让你选择调试对象的变量，并自动将日志信息添加到最近的相对行。这让你在不写任何console.log代码的情况下迅速进行调试。

    

33. **Regex预览器
    **Regex有时会让人困惑。这就是为什么Regex Previewer对你的VS Code设置来说是一个非常方便的扩展插件工具。它以一个并排的窗口显示正则表达式的匹配情况，并根据你的正则表达式进行实时的更新。

![vscode-regex-previewer](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b95b667e0b854785b3f75f12bbb7fd9a~tplv-k3u1fbpfcp-zoom-1.image)

34. 进口成本
    导入模块可能是昂贵的。导入成本可以让你看到导入包的大小--除非你去寻找它，否则这通常是隐藏的。这可以在现在和将来为你节省时间，使你不会开发出运行成本很高的代码。

    

35. 任务资源管理器
    npm、grunt、sass、yarn、docker，以及其他任何你需要运行的东西，都可以通过任务管理器有效地完成。这个VS Code插件扩展了你的侧边栏和/或资源管理器的运行任务的能力。因此，现在不需要离开你的VS Code工作区来完成工作。

    

36. 测试浏览器用户界面
    测试可以是一个手动的过程，如果不是一个复杂的过程。TEST Explorer UI是一个扩展，它为开发者提供了一个在Visual Studio Code中运行测试的用户界面。这个插件扩展支持无数种语言，包括JavaScript、ABAP、C、C++、Exlir、Elm、Go、Haxe、Java、Python、Ruby、REST/GraphQL以及其他流行语言和实现。

    

特定语言

37. Python
    VS Code的Python插件是一个丰富的支持，包括Pylance IntelliSense、提示、调试、代码导航、代码格式化、重构和变量探索器。

    

    这个特定的Python插件扩展也支持Jupyter笔记本，并有一个快速启动选项，使你的流程易于访问。

38. JavaScript代码摘录
    除了支持JavaScript，JavaScript Code Snippets还支持TypeScript、TypeScript React、Html和Vue代码片段。所有的代码片段都有一个最后的;分号， 这里有一个 非分号的分叉。

    

    代码片段包括类的辅助工具、方法和控制台方法，以加快编码。

39. Quokka。jsQuokka.js是一个有趣的生产力工具，让你在运行时值的帮助下快速创建JavaScript/TypeScript原型。那么Quokka到底是做什么的呢？它告诉你在编码时你是如何出错的。它非常适合于通过现场执行和结果来学习和测试。

    

40. Docker
    Docker拥有超过1100万的安装量，是Visual Studio Code上任何与Docker有关的插件扩展的首选。这个扩展可以让你轻松构建、管理和部署容器化的应用程序，并提供单键调试。你可以用Docker轻松地编辑和生成docker文件。

    

41. ES7、React、Redux和GraphQL片段
    

    JavaScript无处不在，而ES7、React、Redux和GraphQL Snippets几乎涵盖了你有效地开始现代应用开发所需的一切。这个插件扩展是你可能已经在使用的任何其他基于JavaScript的代码片段的一个很好的替代品。

42. Reactjs代码片段
    如果你正在做一个React项目，Reactjs Code Snippets可以帮助改善你的工作流程和代码速度，提供整齐的包装和预写模板供你使用。你所要做的就是开始输入触发命令，你就会得到有用的片段。

    

43. 支持HTML CSS
    没有HTML和CSS的现代应用开发是什么？HTML CSS支持是您在VS Code中对HTML和CSS的终极智能感应。功能包括id和class属性的完成，链接和嵌入的样式表，继承和CSS选择器的验证。

    

你不必下载所有的插件来拥有一个高效的工作空间。你只需要在上述每个类别中选择几个就可以开始使用，并通过减少你手动输入的代码量来减少你的编码时间。

The postTop 40+ VSCode Extensions for Developers in 2022appeared first onTabnine Blog.