JavaScript的开发不仅仅是制作代码。有效的开发者经常用最好的插件围绕着自己，通过渐进式的时间增益来提高他们的生产力。在插件的帮助下，你的时间收益可以对你的代码和功能的质量产生复合效应。
这里有26个用于JavaScript开发的WebStorm插件，它们将帮助减少你的沉没时间成本，提高工作流程的凝聚力，并确保你能够以最小的障碍创建代码。
提高生产力的编码工具
1.Tabnine
Tabnine for WebStorm
Tabnine不仅仅是你普通的IntelliSense--它是一个AI驱动的预测性编码工具，可以从你的项目模式中学习到你下面的想法。
Tabnine的人工智能驱动的预测性建议算法的一个特点是，它还使用来自每个Tabnine用户的集合知识，使其更加智能，并随着时间的推移不断提高效力。你的代码越多（以及Tabnine社区的每一个开发者），Tabnine就越能成为一个高度节省时间的IntelliSense。
2. 环境文件支持
拥有超过500万次下载。 支持.env文件是一个非常受欢迎的小插件，可以简化.env文件的创建。每个需要数据库连接的项目都会涉及到某种形式的.env变量。连接变量的过程可能涉及到在.env文件和你正在工作的模块之间的导航。对.env文件的支持使它更容易处理。
数据和数据库
3.Json解析器
JSON是数据格式化的通用标准，特别是对于JavaScript开发来说。然而，JSON的阅读可能有些烦人，因为它回来的时候是一个广泛的行。Json解析器使你的JSON在视觉上更容易阅读和浏览，特别是对于嵌套的值。
4 .CSV
CSV，即逗号分隔值，是许多从事数据工作的JavaScript开发人员必须处理的另一个痛苦。虽然这种文件格式对于保持数据的标准化是很好的，但对于人类的理解却不是最好的。 CSV的流行标志是其+600万的下载量，并具有灵活的表编辑器、语法验证、结构高亮和有用的检查功能。
5.5.GraphQL
GraphQL是你的数据库的替代查询接口。WebStorm的 GraphQL插件非常强大，下载量超过一百万，并具有模式感知完成、错误高亮和括号匹配功能。
React生产力工具
6.React CSS 模块
React CSS Modules让你快速创建CSS类，以便在React中使用。它包括代码完成和错误高亮。它允许你快速搜索CSS类的名称，重命名功能，以及声明来源。
7.样式化组件和样式化JSX
当涉及到前端开发时，CSS代码完成是经常被搁置的东西。然而，它也构成了我们工作流程的一个重要部分。 Styled Components & Styled JSX将CSS集成到工作流程中，并通过代码完成的可预测性和通过关键代码Alt + Enter的自动格式化，使其更容易工作。
8.React片段
React已经存在了足够长的时间，建立了一个有用的模板和片段的仓库。WebStorm IDE的 React代码段使React开发的常用接口更容易使用。它包括对React钩子的支持，并让你创建与你的编码偏好、风格和项目相关的临时片段。
JavaScript、辅助工具和框架
9.9.PostCSS
PostCSS将你的CSS转化为JavaScript，使其能够被IntelliSense访问，并减少对全局CSS值的需求。它通过CSS模块公式工作，这意味着你的CSS不再依赖于一个单一的表单来呈现。 PostCSSfor WebStorm允许IDE识别.pcss文件，并通过智能代码完成和自动格式化实现支持。
10.NodeJS
当我们谈论JavaScript开发时，它经常以某种形式涉及NodeJS。WebStorm的 NodeJS插件可以让你直接从IDE中快速运行Node.js应用程序，并将这一过程与内置的可视化调试器集成。这个插件可以让你从IDE中对Node.js应用程序进行剖析，并运行Mocha测试来帮助调试过程。
11.Node.js远程解释器
远程环境是DevOps的一部分。这意味着，远程调试问题的能力使我们能够在不拆解我们的实时部署的情况下创建修复程序。WebStorm的 Node.js远程解释器可以让我们实现这一目标，而不需要离开IDE的范围。
12.JS工具箱
JS Toolboxfor WebStorm是一个插件，可以让你快速测试、查看、导航到构造器、加入多行字符串和变量声明，此外还有其他实用的JavaScript相关代码流程。这个工具很有帮助，特别是在试图通过键绳快速导航你的代码，而不是明确告诉IDE你所寻求的东西时。
13.Handlebars/Mustache
Handlebars.js和 Mustache.js是模板系统，允许你通过预先写好的语义模板快速构建应用程序。这些模板被编译成JavaScript函数，最终缩短了你的应用开发时间。Handlebars/Mustachefor Webstorm使用这两个JavaScript库，为你提供一个完整的极简主义模板系统，就在你的指尖。
14.AWS工具包
如果你正在开发一个全栈应用程序，那么你很有可能也在使用AWS。这个 AWS工具包已经覆盖了你，从认证和资源探索者到运行和调试本地lambda函数。在你的Webstorm IDE中与AWS合作的能力使你在开发和部署你的JavaScript应用时少了一个额外的接口。
测试、提示和调试
15.伪装
Prettier已经存在了很长时间，是JavaScript的一个主要工具。它使你的代码在视觉上保持有序，并防止团队对括号位置的争议。如果你想让你的代码在几乎没有干预的情况下格式化，那么Prettierfor WebStorm是一个必备的插件。
16.彩虹括号
你很容易忘记你的括号，特别是当你在一个涉及到大量嵌套和{}值的环境中工作时。JavaScript框架和库倾向于将前端HTML与JS代码混合在一起，这使得你很难从视觉上跟踪事物的开始和结束。
彩虹括号通过对括号对进行着色来解决这个问题，把你从跟踪代码中这样一个微小但结构上重要的部分所需的精神负担中解放出来。
17.彩虹缩进
是的--有彩虹括号--但它只包括{}和<>语法。间隔也很重要，特别是在YAML文件等空间。这就是Indent Rainbow插件发挥作用的地方。Indent Rainbow的工作原理是用交替的颜色和不同的步骤对缩进进行着色，使其在视觉上更容易识别文件中的错误。
富有成效的控制台工具
18.Bashsupport
有时我们需要编写基于JavaScript的Bash脚本或在控制台中执行某些命令。 Bashsupport这使你不必离开你的Webstorm IDE，并使开发shell脚本、调试、重命名和导航变得容易。
20.Grep控制台
Grep是一个用于搜索纯文本的命令行工具。然而，你需要打开一个不同的窗口来访问它。有了 Grep控制台，你可以直接从你的WebStorm IDE中执行grep命令。
21.思想学
当事情出错时，我们都会看一下日志文件。然而，阅读日志文件可能是漫长而乏味的。 Ideolog是一个交互式的.log文件查看器，它根据警告级别来突出显示日志级别。它还可以超链接堆栈痕迹，使其更容易在不同的日志之间导航。这可以通过提高可读性来提高你在调试时间方面的生产力。
杂项生产力增强器
22.词汇表（Codeglance
代码地图可以让你看到你目前在文件中的位置，从而显著提高你的工作效率。它有助于弄清你的方位，并牢记某些变量、函数和类的位置。 密码锁语法高亮 "在你的Webstorm IDE边上嵌入了一个迷你的代码地图，并且可以通过你的自定义主题颜色来定制语法高亮。
23.Wakatime
Wakatime是一个开源的指标仪表盘，可以跟踪你在代码上花费的时间。当涉及到时间跟踪时，你对自己实际所做的事情的可见度越高，就越有利于你根据现有的数据来优化你的时间。Wakatime对所使用的语言、所做的项目以及总体生产力的平均数和比较有很好的洞察力。
24.关键促进者X
学习快捷键可能是一件很痛苦的事情，尤其是当你不知道你不知道的事情时。 Key Promoter X是WebStorm的一个学习插件工具，帮助你学习IDE中可用的快捷键。这意味着，一旦你习惯了键绳和快捷键，你就可以把它关掉，以最大的潜在生产速度进行操作。
25.VSCode Keymap
有了 VSCode Keymap，你不必学习一套新的键绳就能在基于IntelliJ的IDE（如WebStorm）内有效工作。这个插件可以让你迁移和同步你的键盘地图，使你在VSCode和WebStorm之间轻松切换。
26.EduTools
想提升你的编程技能吗？ EduTools是一个插件，可以让你在WebStorm IDE中通过开放的课程库或JetBrains Marketplace进行学习。你还可以通过EduTools设置基于工作场所的培训，以分享知识并提高你的团队在需要专业改进的空间的专业知识。
这些是我们最喜欢的插件，用于提高2022年的生产力。这些插件的好处是，它们还可以帮助你成为一个更好的JavaScript开发人员，让你深入了解格式化惯例和额外的行业培训轮，而不需要在课程上花费额外的钱。
除此之外，像TabNine这样优秀的智能感应器和代码片段可以通过减少打字的物理行为来提高生产力，让你有能力专注于逻辑实现，而不是编写和连接实际的JavaScript。
The postTop 26 WebStorm Plugins for JavaScriptappeared first onTabnine Blog.
