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

作为前端开发者，最趁手的搬砖工具无外乎 Webstorm 和 VSCode，Webstorm 像苹果系统，闭源、收费、官方有良好而强大的开发能力、智能索引和补全功能无出其右者，VSCode 就像安卓，开源、持续迭代更新、社区充满活力。

Webstorm 的 2021.3 版更新后，以往卡顿的情况缓解了很多，就算重新安装 node_modules 也不会像以前一样卡死半天，因为卡顿退坑 Webstorm 的小伙伴可以回来看看

在下使用 Webstorm 较多，总结了一些不错的插件和实用 Tips，希望能帮到你~

本文是 <那些好用的工具> 系列文章之一：

1. 插件推介

以下推介的插件都可以在 Webstorm 官方插件市场下载，直接搜索插件名安装即可。

有一些感觉并没有解决痛点的插件比如打字特效 activate-power-mode、彩虹括号 Rainbow Brackets、彩虹进度条 Dmitry Batkovich 就没有推介了。

还有一些第三方智能代码补全的插件比如 Codota、Kite、Tabnine，我觉得 Webstorm 自带的机器学习智能补全就挺好用了，用第三方插件有时候代码补全速度有点慢，要额外占用内存，有时候还会跟自带的补全冲突或者重复。可能是我机器配置不够高，感兴趣可以安装了试试看。

Chinese Language Pack / 中文语言包

早期没有官方中文语言包，还要靠 Github 上有个长期没有更新的翻译插件，好在 2021 年官方推出了中文语言包，弥补了在下弱鸡的英语能力（六级 436 飘过），不是说原英文的界面不能用，只是觉得英文的有些设置不能做到一目了然，要找半天。

有的大佬可能觉得英文的用着挺好，用习惯了也一样，看你个人需要了~

AceJump：光标快速定位

可以将插入光标快速导航到编辑器中可见的任何位置，有了 AceJump 脱离鼠标全键盘开发不在话下，还有个很好的地方在于即使编辑器窗口拆分了，也可以在不同的窗口之间导航，快捷键 control/ctrl + ;

GitToolBox：Git功能扩展

很多 Git 的功能增强，比如自动 fetch 代码，状态栏中显示当前 Git 分支的未提交和落后提交数显示，过时分支清理，commit 窗口支持 emoji 表情，Inline Blame 可以看到每行代码是谁提交的、什么时候提交的、以及 commit 信息等等，如果你经常用 Git，这个插件必装了。

HighlightBracketPair：高亮括号

有些大佬会推介彩虹括号插件 Rainbow Brackets，我也下载过，但括号多了之后花花绿绿的看着也一样分不清。

后来发现 HighlightBracketPair 插件，这个插件会在当前括号上高亮之外，还会在左侧代码行数那显示括号范围，比彩虹括号插件更加直观而且不容易看花眼。

Key Promoter X / Presentation Assistant：快捷键显示

很多大佬的博客推介 Key Promoter X，可以在你点某个功能的时候提示你这个功能的快捷键，多用一用就可以脱离鼠标，使用快捷键触发这些功能。

还有一个很棒的插件叫 Presentation Assistant，支持功能的汉化显示，而且还可以将 Mac 和 Win 环境的快捷键都展示出来。

One Dark Theme / Material Theme UI Lite：好看的免费主题

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

Atom Material Icons：好看的图标

以前有个编辑器叫 Atom，现在用的人不多了，它最大的贡献就是主题和图标设计的非常好看，这个插件就是将 Atom 的图标引入到 Webstorm 的文件夹、文件上，让编译器看起来更美观。

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，这两个差不多的快捷键也很好记。

.ignore：版本管理工具的忽略文件插件

.ignore 插件支持创建多种 .ignore 文件比如 .gitignore、.eslintignore、.dockerignore 等等，我们最常用的基本都支持，新建的时候支持选择不同类型的框架或库常用的忽略配置，如 node_modules、dist、.cache 等。