您好，我是沧沧凉凉，是一名前端开发者，目前在掘金、知乎以及个人博客上同步发表一些学习前端时遇到的趣事和知识，欢迎关注。

---

WebStorm一直是我最喜欢的前端开发编辑器，它集成了目前前端开发中几乎所有需要使用到的功能，在之前我也出过好几篇相关的文章，有兴趣的话可以看：

• WebStorm各种便利的功能
• WebStorm各种便利的功能-代码重构
• WebStorm好用的插件
• WebStorm好用的插件（二）
• WebStorm强大的Git版本控制

之前因为我最喜欢的主题One Dark theme不支持最新的体验版2021.2，而且在最初的体验版中存在着大量的BUG，导致使用体验很差，其实2021.2的体验版从5月27日就发布了，到目前经过2个多月的更新，它比起2021.1已经拥有了非常多的新功能，本篇文章就来说一说那些让我觉得有用的新功能。

1. 新功能

1.1 保存时重新加载

在不使用打包工具的情况下，隔壁VSCode可以通过插件获得更改源文件后刷新界面的功能，而在之前版本的WebStorm中，也可以通过打开调试模式来获得这项功能，而现在WebStorm支持了保存时重新加载的功能，不用再羡慕隔壁的VSCode了。

1.2 JSDoc中支持TypeScript类型

对于习惯了TypeScript的开发者而言，再让他们去使用JavaScript，往往会出现让他们非常难受的一些事情，比如大量的类型警告没有办法处理，使用对象时无法获取到对象中的属性提示，而JSDoc可以在一定程度上缓解这些问题（但依然无法全部解决）。

现在可以正确的使用下面的TypeScript语法作为变量的类型声明：

1.3 自动引入CommonJS模块

之前WebStorm对于自动引入的支持仅仅是针对ES Module，这对于Node.js用户来说相当的难受，虽然现在也可以使用某些办法让ES Module成为Node.js的引入方式。

而该次更新就添加了CommonJS的自动引入功能：

如果WebStorm不确定你使用的哪种模块导入方式，它还会进行询问：

1.4 Actions on save

这个也是我比较期待的功能之一，简单的说就是在你进行保存的时候可以自动执行格式化操作、删除无用的导入等等功能，在以前只有通过Save Actions这个插件进行实现，现在WebStorm自带了该插件的部分功能。

1.5 重命名useState hooks

对于React用户是极好的一个功能，当我们在使用useState时，如果发现变量命名不合理想重新进行命名时，因为后面的set变量一般情况下都需要和前面的变量名进行对应，所以我们时常会需要修改两次，而本次更新则仅仅只需要修改一次，就能够重新命名useState，当然快捷键依然是⇧F6 / Shift+F6。

1.6 改进Tailwind CSS支持

我个人比较期待的功能，因为我在写项目的时候很多情况下都会引用Tailwind CSS，WebStorm在该版本之前，如果是使用了className={}的形式，则不会正确的弹出Tailwind CSS的提示，而在隔壁VSCode却可以获得正确的提示，当时我十分羡慕VSCode的正确提示功能，好在现在WebStorm改进了对于Tailwind CSS的支持。

不仅如此，它还可以在styled-components这个库中得到正确的提示。

1.7 新的箭头函数模板

在现在的前端开发项目中，我们会大量的使用到箭头函数，新版本的WebStorm提供了新的箭头函数快速生成模板，只需要输入co，就可以得到箭头函数的快速生成提示：

2. 最后

无论你是使用的什么开发工具，都建议你对自己所用的开发工具了解的更深一点，发挥它的最大功效，提高自己的代码产出效率，这样才会有更多的时间划水去学习更多新的知识，而不能一味的成为一个花大量时间去写一些重复代码的码农。