微软公司的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. 遥控器–集装箱
![](https://blog.codota.com/wp-content/uploads/2020/04/remote-containers-readme-1.gif)
容器已在开发中流行,如果您使用远程容器,则此扩展适合您。 它提供了完善的工具和定义明确的运行时堆栈,可用于直接从VS Code UI容器化程序 。
19. 路径智能感知
Path Intellisense是一个Visual Studio Code插件,可以自动完成文件名 。 它将Intellisense样式的完成功能添加到文件名中,使您轻松键入长路径名。
20. 路径自动完成
与Path Intellisense相似,此扩展为VS Code 提供了路径完成功能 ,因此您不必记住那些长路径。
21. 设置同步
如果您在多台计算机上工作,或者只是想备份VS Code设置和首选项,则应该安装“设置同步”扩展程序。 它使您可以使用简单的Gist跨计算机同步设置,摘要,主题,文件图标,键绑定,工作区和扩展 。
22. Chrome调试器
![chrome-debugger-demo](https://i-blog.csdnimg.cn/blog_migrate/64d4719e3e02b3babe072d0482af5b11.gif)
该扩展是前端开发人员的必备功能。 它使您可以直接在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/