之前的一篇文章介绍了vscode好用的插件，但是我平时用的最多的还是WebStorm，就我个人而言，我还是比较喜欢WebStorm的，其实即便是不装任何插件，它已经足够好用，但是装上插件，让它变得更好用吧！

1. 实用插件

1.1 CodeGlance

Screenshot 1

推荐指数：***

在右侧生成一个代码缩略图，用过vscode的朋友肯定很熟悉了，但其实实用度也并没有太高，很多时候我都没有用到这项功能，反而有时候觉得它还比较碍事，遮挡住代码显示。

1.2 Rainbow Brackets

Screenshot 2

推荐指数：*****

实现括号配对，但是在白色主题下显示不明显，一定要使用黑色主题这款插件才会发挥出它的效果。

1.3 Translation

Screenshot 1

推荐指数：*****

非常好用的翻译插件，在编写代码的时候很多情况都需要用到翻译功能。

点击状态栏的翻译引擎图标或者使用快捷键 Ctrl + Shift + S（Mac OS: Control + Meta + Y）可以快速切换翻译引擎，目前有谷歌翻译、有道翻译和百度翻译。

使用该插件，可以直接在WebStorm中内嵌一个翻译界面。

1.4 IDE Features Trainer

Screenshot 2

推荐指数：***

会对IDE中的一些快捷键，以及实用功能进行交互式教学，从而达到抛弃官方手册，让你书写代码的效率更上一层楼。

1.5 String Manipulation

Screenshot 2

推荐指数：*****

提供了非常多的处理字符串的功能，比如换成camelCase驼峰命名，换成kebab-case命名、PascalCase命名，还有各种处理字符串、切换大小写、对字符串进行排序等等功能，实用性可以说是非常高。

1.6 Chinese (Simplified) Language Pack / 中文语言包

推荐指数：*****

Jetbrains官方出的中文语言包，以前的英文界面很多功能我都看不懂，所以错失了很多有用的功能。自从用了中文语言包后，虽然最开始从英文变成中文可能会出现找不到选项的情况，但是使用久了是真的香！而且官方还在快速迭代该中文语言包，汉化度越来越完善。

强烈推荐英文不好的朋友使用。

1.7 .env files support

推荐指数：*****

在使用Webpack进行打包的时候，我们会有一些环境变量，在编写代码的时候，如果安装了该插件，就会提示环境变量文件中所拥有的环境变量。

1.8 Comments Highlighter

Screenshot 1

推荐指数：****

丰富代码注释高亮样式，可以突出你代码中比较需要注意的一些文字。

1.9 Gist Snippet

gist

推荐指数：***

Gist插件，可以快速的在IDE中插入你Gist中的代码片段！

1.10 Jenkins Control Plugin

推荐指数：***

如果你使用了Jenkins，那么你可以直接通过该插件控制Jenkins打包，当然有些公司的Jenkins一般是由运维或者后端人员进行操作，前端根本不需要自行去配置Jenkins，但是我还是推荐前端开发者学一学Jenkins，因为如果你的个人项目数量比较多，使用Jenkins自动化部署还是非常方便的，可以省下非常多的时间。

关于Jenkins，我后面也会整理一篇我是如何使用Jenkins部署前端项目的文章。