好用不卡，这些插件和配置让你的 Webstorm 更牛逼！

原来有个很好用的插件 Material Theme UI，但后来收费了，不过没关系，还有一些免费的主题也很好用，比如 Material Theme UI Lite、Coderpillr Theme、One Dark theme 等等，都挺好看的，自己挑个喜欢的主题吧~

 

 

 

IntelliVue：Vue功能增强

Webstorm 上对 Vue 支持很棒的插件，现在已经支持 Vue3 的一些语法，可以快速创建 Vue2 的 data、methods 等，或者 Vue3 的 setup method 等，帮你少些一些模板代码。

安装后菜单栏会多一个 Vue 的选项，下拉框里有一些操作功能，对 Vue2 项目比较好用。

 

Translation：最佳翻译插件

可以便捷地在 Webstorm 中进行翻译，省去了打开翻译软件的操作，支持右键方式选中翻译，也可以打开独立窗口进行整段的翻译。

个人感觉最方便的功能就是翻译并替换功能，Mac 上快捷键 command + control + O，Win 上为 ctrl + shift + X，在写业务代码的时候会自动翻译汉字的业务词条自动翻译，字符串可以选择大驼峰或小驼峰什么的。

 

String Manipulation / CamelCase：字符串处理

这两个插件都是处理字符串的，可以将英文字符串在 kebab-case、SNAKE_CASE、PascalCase、camelCase、snake_case、space case 形态间切换。

第一个 String Manipulation 插件比较大，推荐经常处理字符串的小伙伴用，第二个 CamelCase 插件比较轻量，日常使用完全足够，使用也很简单，快捷键 option/alt +shift + U 就可以进行切换了。Webstorm 自带切换大小写的快捷键是 command/ctrl + shift + U，这两个差不多的快捷键也很好记。

 

 

Import Cost：显示引入的包体积大小

VSCode 上也有这个插件，会在你引入的库后面告诉你这个库的体积大小，和 gzip 后的包体积。

 

 

.env files support：配置文件支持

可以给 .env 环境配置文件增加语法高亮，给配置文件中定义的变量增加智能索引。另外在使用 Webpack 进行打包的时候，我们会有一些环境变，安装该插件后，就会提示环境变量文件中所拥有的环境变量。