面向生产性开发人员的前40多个[免费] VS代码扩展

微软公司的Visual Studio Code（VS Code）已使IntelliJ（获得它？！Eclipsed…）超越了市场上领先的IDE。 在2019年接受stackoverflow调查的开发人员中，有超过一半表示他们将VS Code作为主要开发环境。 当然，有些人仍旧喜欢Eclipse和Emacs等旧的收藏。 我们不判断。 VS Code越来越受欢迎，主要是因为它是一个真正的IDE平台，考虑到扩展性而构建。

这很快就导致了活跃的扩展市场，这些扩展向免费代码编辑器添加了功能，从而使VS Code适用于越来越多的编码器，并且对越来越多的编码器有用。 似乎连苹果迷们都勉强跳上了VS Code潮流。

显然，拥有如此广泛的Visual Studio Code扩展选择才是VS Code的原因。 通过安装实际上不需要的过多扩展程序来避免过度使用布丁的挑战。

为了帮助您选择将带来更多价值的扩展，而不是从系统中获取的资源，我们创建了这份当今最佳扩展的详尽清单。 虽然其中一些是众所周知的且通常安装的，但另一些是使用Visual Studio Code的经验丰富的开发人员向我们推荐的隐藏的宝石。

2020年排名前43的VS Code扩展

1. LiveServer

此扩展程序将启动本地开发服务器，以启用静态和动态页面的实时重新加载功能 。 您可以将其配置为在保存当前工作后自动重新加载页面。

2. TabNine

TabNine是您的多语言AI编码助手。 TabNine基于GPT-2模型，使用机器学习来帮助您更快更好地编写代码 。 只需安装并开始输入即可，无需进行任何配置。 AI通常会在10毫秒内自动完成代码。

3. 实时分享

如果您倾向于在代码上进行协作，则此VS Code的官方Microsoft扩展名是您所需要的。 它允许即时共享当前项目以及调试会话，终端实例，使用localhost的Web应用程序等 。

4. Quokka.js

Quokka.js是JavaScript的实时暂存器 。 它实时检查您JavaScript代码，并让您知道哪些块已执行，哪些块未执行。

5. 代码拼写检查器

错别字造成了特别烦人的错误。 此扩展可以通过在代码中强调拼写错误来防止这种特殊类型的烦恼。 Code Spell Checker可以很好地与camelCase代码配合使用，同时保持较低的误报率。

6. 自动关闭标签

Web开发中常见的另一种特别令人不快的错误类型是开放标记。 顾名思义， 自动关闭标签会自动关闭标签 。 当您打开<p>之类的标签时，</ p>会立即添加，并且光标会位于两者之间。

7. GitLens

VS Code附带了Git支持。但是，如果要增强它的功能，GitLens帮助会添加一些功能，这些功能可帮助您可视化，导航和更好地了解项目的Git历史记录 。

8. GitHub扩展

如果您倾向于在GitHub上工作很多，那么Microsoft已经为您服务。 使用GitHub扩展，您可以克隆，创建或发布存储库，而无需退出VS Code 。

9. 更漂亮

你以为你自以为是？！ 查看Prettier，因为它很可能对您的代码有所批评。 它通过使用自己的规则重构代码来实现一致的样式，该规则考虑了最大行长，并在必要时包装代码 。 建议您将其与ESLint结合使用，以确保它遵循您自己的棉绒配置。

10. 美化

Beautify 是Prettier的替代产品 ，它将重新格式化用Javascript，JSON，Sass，CSS和HTML编写的代码。

11. 材质图标主题

通过此有用的扩展， 将Material Design图标添加到VS Code。

12. ESLint

保持代码干净和一致的另一个扩展是ESLint。 ESLint涵盖了代码质量和编码样式问题， 是一种静态代码分析工具，用于识别代码中有问题的模式 。

13. 支架对着色器

确实按名称所述，并为成对的括号上色，以便于识别嵌套的组件括号对 。 它在屏幕上看起来也很有趣而且色彩丰富，可以完全自定义。

14. 颜色突出显示

您是否在前端开发中将十六进制值用于颜色，并且不会自动将十六进制转换为头部阴影？ 然后，您需要此扩展程序以在VS Code编辑器中突出显示Web颜色 。

15. 拾色器

颜色选择和分配的另一个有用扩展是颜色选择器，它添加了UI选项以生成颜色代码 。

16. TODO要点

在代码注释中留**释并不是一个坏习惯。 但是，它们很容易被忘记和忽略。 为确保您不会，这个方便的扩展程序将为您突出显示注释 。

17. 更好的评论

好的注释通常会在可维护的代码和巨大的混乱之间产生区别。 此扩展名完全符合名称要求，它使您可以将注释分类为警报，查询，TODO，突出显示等内容，从而使注释更加人性化 。

18. 遥控器–集装箱

容器已在开发中流行，如果您使用远程容器，则此扩展适合您。 它提供了完善的工具和定义明确的运行时堆栈，可用于直接从VS Code UI容器化程序 。

19. 路径智能感知

Path Intellisense是一个Visual Studio Code插件，可以自动完成文件名 。 它将Intellisense样式的完成功能添加到文件名中，使您轻松键入长路径名。

20. 路径自动完成

与Path Intellisense相似，此扩展为VS Code 提供了路径完成功能 ，因此您不必记住那些长路径。

21. 设置同步

如果您在多台计算机上工作，或者只是想备份VS Code设置和首选项，则应该安装“设置同步”扩展程序。 它使您可以使用简单的Gist跨计算机同步设置，摘要，主题，文件图标，键绑定，工作区和扩展 。

22. Chrome调试器

该扩展是前端开发人员的必备功能。 它使您可以直接在VS Code环境中在Google Chrome浏览器 （或支持Chrome DevTools协议的其他目标）中调试前端代码。

23. 浏览器预览

手动启动众多不同的浏览器以预览跨平台的更改可能会很麻烦。 浏览器预览可能会有所帮助。 此扩展在编辑器内创建可调试的真实浏览器预览 。

24. JavaScript（ES6）代码段

代码段是保存击键的好方法。 该扩展包含 VS Code编辑器的ES6语法JavaScript代码片段 （同时支持JavaScript和TypeScript）。

25. ES7，React，Redux和GraphQL片段

该扩展为您提供了带有Babel插件功能的ES7中JavaScript和React / Redux代码片段的另一个集合 。

26. Reactjs代码片段

用于ES6语法的Reactjs开发的代码片段的集合，该代码片段来自最初为Sublime文本编辑器创建的集合。

27. 进口成本

此扩展名可以帮助您检查捆绑包的大小。 它将在编辑器中内联显示导入/需要包的大小 。

28. 文件大小

您的代码有多胖？ 此扩展程序可以帮助您查找。 该扩展名在编辑器的状态栏中显示聚焦文件的大小 。 如果单击状态栏组件，它将显示有关文件的更多信息。

29. 自动重命名标签

非常简单地自动重命名配对的HTML / XML标签 。

30. TinyPNG

如果您的项目具有大量视觉资产，则可能需要压缩它们。 此扩展使用TinyPNG API 直接在VSCode内部压缩JP（E）G和PNG图像 。

31. 图像优化器

替代TinyPNG的是Image Optimizer， 除了JPEG，PNG文件格式外 ，它还支持动画GIF压缩 。

32. 代码时间

被编码任务吞噬很容易。 很难意识到您已经呆了多长时间。 此扩展将帮助您跟踪和了解在各种编码任务上花费的时间 。 是的，它需要您创建一个帐户，但是值得花几分钟时间创建一个帐户，以便从长远来看可以优化您的时间管理。

33. Turbo控制台日志

该扩展旨在自动执行有意义的日志消息的过程，从而使调试工作更加轻松。

34. NPM

如果您使用Node.js，则必须具有此扩展名。 节点软件包管理器可帮助您直接从VS Code编辑器管理package.json文件 。 该扩展支持运行package.json文件中定义的npm脚本，并支持根据package.json中定义的依赖项验证已安装的模块。

35. REST客户端

如果您使用第三方工具和API，此简单扩展将使您更轻松地对应用程序进行故障排除。 它使您可以结束HTTP请求并直接在Visual Studio Code中查看响应 。

36. CSS速览

顾名思义，此扩展使您可以查看css ID和类字符串，作为从html文件到相应CSS的定义 。

37.正则表达式预览器

Regex与VS Code中JavaScript，TypeScript，PHP和Haxe匹配预览器。 为了使这些正则表达式神秘化，它会在并排文档中显示当前正则表达式的匹配项 ，您可以打开和关闭这些匹配项 。

38. 实时SASS编译器

看那个萨斯！ 此VS Code扩展名将帮助您实时将SASS / SCSS文件编译/转换为CSS文件 ，并通过实时浏览器预览重新加载。

39. 波兰码

如果您倾向于阅读教程和操作方法，则可能会遇到作者有时包括的完美代码屏幕截图。 这些都是使用Polacode（ 您的代码的宝丽来）产生的。

40. Excel查看器

如果您的代码使用电子表格，则此方便的扩展名将使您可以在Visual Studio Code工作区中查看Excel电子表格和CSV文件 。

41. 任务浏览器

通过此扩展，您可以轻松地在VS Code中管理系统任务。 它支持npm，vscode，ant，gradle，grunt，gulp，batch，bash，make，python，perl，powershell，ruby和nsis。 它整齐地将所有任务组织在树中，并支持某些任务执行 。

42. 远程– SSH

Remote-SSH扩展使您可以将带有SSH服务器的任何远程计算机用作开发环境 。 只需使用SSH打开远程计算机上的任何文件夹就可以了！

如果您认为我们的广泛清单缺少扩展名，请在评论部分中添加自己的扩展名，以进行扩展。

From: https://blog.codota.com/top-42-free-vscode-extensions/