自从Web上JavaScript主要用于使Netscape浏览器咳嗽的弹出窗口和动画以来，已经过去了很长时间。 如今，JavaScript是开发网站和基于Web的应用程序时最流行的语言，它将在2020年及以后继续统治Web堆栈。
如果您是使用JetBrains IDE（WebStorm或Intellij Ultimate Edition）之一JavaScript开发人员，那么您会很幸运。 JetBrains和社区都提供了许多免费和高级的插件，使您的JS编程更快，更轻松，更有趣。
面临的挑战是找到在Jetbrains IDE上进行JavaScript开发的最佳插件。 谁想坐在那里浏览数百个插件以挑选最好的插件？ 好吧，我愿意！ 为了节省您的时间和麻烦，Codota团队在深层网络中进行了搜索，并收集了WebStorm和Intellij中用于JavaScript开发的最好，最有用的插件 ，并且因为我很好，我什至对列表进行了分类。 别客气。
值得注意的是，并非此列表中的所有插件对于您的日常开发工作都是必需的。 因此，在着急安装所有组件之前，请务必阅读说明并仅安装您认为对您的生产力有真正贡献的插件。 毕竟，众所周知，用不必要的插件加载一个IDE只会减慢它的速度。
寻找一般的IntelliJ插件？ 查看有关最佳IntelliJ插件的博客文章。
常规编码工具和IDE调整
该类别的工具不是JavaScript专有的，但对于在Intellij IDE上以任何语言进行编码的任何开发人员都非常有用并推荐使用。
1. 彩虹括号
这个简洁明了的插件将彩虹括号/彩虹括号添加到基于IntelliJ的IDE中 ，这对嵌套元素总是很有帮助的。
2. Codota （现在支持node.js）
我们自己的Java开发AI助手现在也支持node.js。 因此，如果您希望使用一个从数百万个开源Java和node.js程序中提取的插件以及您的上下文来帮助您更快，更有效地编写代码并减少错误 ？ 我们在这里有一个插件和服务来为您提供。
3. WakaTime
是否曾经在一天结束时保存了您的工作，却不知道您实际上是如何花时间编码的？ 好吧，这个小插件肯定会帮助您了解时间的流逝。 它衡量用不同的编辑器和语言进行不同项目所花费的时间 。
JavaScript工具
使Intellij IDEA适应JavaScript开发并不难，尤其是对于将JS开发特定工具和快捷方式添加到IDE的插件而言。
4. JS工具箱
这个有用的插件是快捷方式，工具和命令的集合，旨在在Intellij IDE上开发JavaScript时节省时间并提高效率 。
5. 资产压缩器
大小很重要，而对于CSS和JS资产，越小越好。 该插件可将那些资产的压缩置于菜单项中并单击 。
6. JSON解析器
JSON Parser是一个轻量级插件，用于在IDE中验证和格式化JSON字符串 ，而无需不断切换到浏览器。
7. Google Chrome JetBrain IDE支持
Chrome浏览器的此扩展程序可让您立即在浏览器中查看对HTML或CSS文件所做的更改，而无需重新加载页面 。 要启用它，您还需要安装其对应版本– JetBrains的LiveEdit 。
框架及其他
JavaScript的主要优势之一是其对不同产品，需求和开发任务的适应性。 JavaScript框架，库和运行时环境具有多种形状，颜色和风格 ，并且每个工具都包含一些必备的Intellij或Webstorm插件。
Node.js
那里的每个JavaScript开发人员都熟悉Node.js，这是开源服务器端JavaScript运行时环境。 因此，即使您当前不编写服务器端JavaScript，您也可能会遇到它，并且还会再次遇到它。
8. NodeJS
要从IDE运行Node.js应用程序并使用内置的可视化调试器对其进行调试，您需要从JetBrains本身安装此方便的插件。
9. Node.js远程解释器
JetBrains另一个有用的Node.js插件，可让您在远程环境中运行和调试Node.js应用程序。
Vue.js
Vue是一个通过其可采用性和适应性而广受欢迎的框架，Vue是最常用于构建Web UI的框架之一，并且对于熟悉CSS和HTML的任何人都易于学习。
10. Vue.js
要将Vue.js支持添加到Intellij IDE或Webstorm，您需要通过JetBrains安装此插件。 它将添加通常包含在框架或语言插件中的功能，例如代码完成和组件导航 。
要将Vue.js支持添加到您的IDE，您需要通过JetBrains安装此插件。 它将添加通常包含在框架或语言插件中的功能，例如代码完成和组件导航。
11. 类星体框架
Quasar基于Vue.js，是一个开放源代码框架，使Web开发人员可以快速创建具有完整Material Design 2.0支持的自适应网站和应用程序。 即使JetBrains插件市场中未包含此框架，也值得一试 ，甚至还有关于将Quasar添加到WebStorm IDE中的指南。
反应
由Facebook开发和维护的React是一个JavaScript库，用于为网站和应用程序构建用户界面。 如果您正在Intellij IDEA或Webstorm中开发React，则可以使用这些插件。
12. React CSS模块
这个插件为JavaScript和TypeScript编写的组件添加了React CSS Modules支持 。 它具有针对所使用的CSS类的完成和错误突出显示的功能，旨在从React中的用法中创建丢失的CSS类，并将React对CSS类名称的引用与“查找用法”，“重命名”和“转到声明”集成在一起。
13. 样式化的组件
根据其开发人员的说法，此插件可为您带来“组件时代的视觉原语”，如果您希望直接从IDE以创纪录的速度制作令人愉悦的界面，则该插件将非常有用。
14. 反应片段
就像包装盒上所说的一样-Intellij IDEA或WebStorm IDE的便捷React片段集合 。
Angular和AngularJS
Angular是Google开发的跨平台开发框架。 它最初以AngularJS开头，但后来发展壮大并扩展了其功能。
15. Angular和AngularJS for Intellij
要将框架集成到Intellij IDEA或Webstorm IDE中，您需要下载并安装此插件 。 它将代码完成，组件导航，代码段库添加到您的IDE中。
16. 角组件折叠
想要更整洁，更清洁的源树吗？ 然后，这是给您的插件 。 它将具有相同名称和不同扩展名的文件快速分组到具有相同名称的虚拟文件夹中。
其他插件 17. 哈巴狗
JetBrains的此插件以前称为Jade，它为您选择的Intellij IDE添加了对Pug模板语言的支持 。 而且，他们的徽标很可爱。
18. Ember.js
另一个带有吉祥物的框架是Ember.js， 这是一个开源Web开发框架，受到Netflix和Heroku等品牌的喜爱 。 该插件在Intellij IDE中增加了对它的支持。
19. JS GraphQL
GraphQL是一种用于API的开源数据查询和操作语言 ， 并且是用于使用现有数据执行查询的运行时 。 此插件向Intellij IDE添加了对GraphQL语言的支持，包括JavaScript和TypeScript中带标签的模板文字。
20. PostCSS
在您选择的IDE中添加了对PostCSS的支持，因此它将识别.pcss文件并启用代码完成和语法高亮显示 。
资料库
应用程序和网站将信息存储在数据库中，并始终可以访问它。 因此，即使您发誓永远都不会碰到后端，但对于任何Web开发人员而言，了解数据库架构的方式都是必要的。 这些工具将帮助您从IDE中完成所有工作。
21. 数据库浏览器
这个广泛而高级的数据库开发，脚本和导航工具使您可以开发和维护各种类型的数据库，包括Oracle，MySQL和其他数据库。
22. Mongo插件
MongoDB是JavaScript应用程序的流行数据库，该工具将使您可以直接从Intellij或Webstorm IDE 访问Mongo数据库并对Mongo集合执行CRUD操作 。
测试与整理
如果你盖了，他们会来的。 就是错误和构建错误。 您很清楚，输入代码后您的工作还没有结束，现在是开发中最困难的部分：测试和调试。 幸运的是，这些插件可以通过将流行的测试框架和调试工具集成到您的IDE中并向其添加有用的工具和快捷方式来节省您的时间。
23. 业力
Karma被誉为“ JavaScript的出色测试运行者”， 为开发人员提供了高效的测试环境 。 如果这是您选择的测试运行程序，则此插件会将其集成到您的Intellij IDE中。
24. JSTestDriver
该插件由Google和JetBrains共同开发， 通过将JsTestDriver集成到Intellij IDEA或WebStorm中来提供JavaScript单元测试支持 。
25. ESLint
ESLint是一个开放源代码JavaScript linting实用程序，此插件将为它添加集成到WebStorm和其他具有JavaScript开发支持的Idea系列IDE 。 安装后，它将在编辑器中显示错误和警告。
不好了！ 我们如何列出这么多的插件而忘记<您最喜欢的插件/工具在这里>？ 好吧，那仅仅是因为我们想为您留出空间，让您抓住所有在注释部分介绍它的荣耀。
From: https://blog.codota.com/top-25-javascript-plugins-for-webstorm-intellij/