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

作為前端開發(fā)者，最趁手的搬磚工具無外乎 Webstorm 和 VSCode，Webstorm 像蘋果系統(tǒng)，閉源、收費(fèi)、官方有良好而強(qiáng)大的開發(fā)能力、智能索引和補(bǔ)全功能無出其右者，VSCode 就像安卓，開源、持續(xù)迭代更新、社區(qū)充滿活力。

Webstorm 的 2021.3 版更新后，以往卡頓的情況緩解了很多，就算重新安裝 node_modules 也不會像以前一樣卡死半天，因?yàn)榭D退坑 Webstorm 的小伙伴可以回來看看 ??

在下使用 Webstorm 較多，總結(jié)了一些不錯的插件和實(shí)用 Tips，希望能幫到你~

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

1. 神器推薦！讓我用的最爽的幾款 Windows 軟件，非常實(shí)用！
   
2. 打造舒適搬磚環(huán)境，這些是我最想推介的桌面好物
   
3. 干貨滿滿！推介幾款 Mac 下非常好用的軟件（第一彈）
   
4. 干貨滿滿！推介幾款 Mac 下非常好用的軟件（第二彈）
   
5. 干貨滿滿！推介幾款 Mac 下非常好用的軟件（第三彈）
   

1. 插件推介

以下推介的插件都可以在 Webstorm 官方插件市場下載，直接搜索插件名安裝即可。

有一些感覺并沒有解決痛點(diǎn)的插件比如打字特效 activate-power-mode、彩虹括號 Rainbow Brackets、彩虹進(jìn)度條 Dmitry Batkovich 就沒有推介了。

還有一些第三方智能代碼補(bǔ)全的插件比如 Codota、Kite、Tabnine，我覺得 Webstorm 自帶的機(jī)器學(xué)習(xí)智能補(bǔ)全就挺好用了，用第三方插件有時候代碼補(bǔ)全速度有點(diǎn)慢，要額外占用內(nèi)存，有時候還會跟自帶的補(bǔ)全沖突或者重復(fù)?？赡苁俏覚C(jī)器配置不夠高，感興趣可以安裝了試試看。

Chinese Language Pack / 中文語言包

早期沒有官方中文語言包，還要靠 Github 上有個長期沒有更新的翻譯插件，好在 2021 年官方推出了中文語言包，彌補(bǔ)了在下弱雞的英語能力（六級 436 飄過），不是說原英文的界面不能用，只是覺得英文的有些設(shè)置不能做到一目了然，要找半天。

有的大佬可能覺得英文的用著挺好，用習(xí)慣了也一樣，看你個人需要了~

AceJump：光標(biāo)快速定位

可以將插入光標(biāo)快速導(dǎo)航到編輯器中可見的任何位置，有了 AceJump 脫離鼠標(biāo)全鍵盤開發(fā)不在話下，還有個很好的地方在于即使編輯器窗口拆分了，也可以在不同的窗口之間導(dǎo)航，快捷鍵?control/ctrl + ;

GitToolBox：Git功能擴(kuò)展

很多 Git 的功能增強(qiáng)，比如自動 fetch 代碼，狀態(tài)欄中顯示當(dāng)前 Git 分支的未提交和落后提交數(shù)顯示，過時分支清理，commit 窗口支持 emoji 表情，Inline Blame 可以看到每行代碼是誰提交的、什么時候提交的、以及 commit 信息等等，如果你經(jīng)常用 Git，這個插件必裝了。

HighlightBracketPair：高亮括號

有些大佬會推介彩虹括號插件 Rainbow Brackets，我也下載過，但括號多了之后花花綠綠的看著也一樣分不清。

后來發(fā)現(xiàn) HighlightBracketPair 插件，這個插件會在當(dāng)前括號上高亮之外，還會在左側(cè)代碼行數(shù)那顯示括號范圍，比彩虹括號插件更加直觀而且不容易看花眼。

HighlightBracketPair

Key Promoter X / Presentation Assistant：快捷鍵顯示

很多大佬的博客推介 Key Promoter X，可以在你點(diǎn)某個功能的時候提示你這個功能的快捷鍵，多用一用就可以脫離鼠標(biāo)，使用快捷鍵觸發(fā)這些功能。

還有一個很棒的插件叫 Presentation Assistant，支持功能的漢化顯示，而且還可以將 Mac 和 Win 環(huán)境的快捷鍵都展示出來。

One Dark Theme / Material Theme UI Lite：好看的免費(fèi)主題

原來有個很好用的插件 MaterialTheme UI，但后來收費(fèi)了，不過沒關(guān)系，還有一些免費(fèi)的主題也很好用，比如?Material Theme UI Lite^[6]、Coderpillr Theme^[7]、One Dark theme^[8]?等等，都挺好看的，自己挑個喜歡的主題吧~

Atom Material Icons：好看的圖標(biāo)

以前有個編輯器叫 Atom，現(xiàn)在用的人不多了，它最大的貢獻(xiàn)就是主題和圖標(biāo)設(shè)計(jì)的非常好看，這個插件就是將 Atom 的圖標(biāo)引入到 Webstorm 的文件夾、文件上，讓編譯器看起來更美觀。

IntelliVue：Vue功能增強(qiáng)

Webstorm 上對 Vue 支持很棒的插件，現(xiàn)在已經(jīng)支持 Vue3 的一些語法，可以快速創(chuàng)建 Vue2 的 data、methods 等，或者 Vue3 的 setup method 等，幫你少些一些模板代碼。

安裝后菜單欄會多一個 Vue 的選項(xiàng)，下拉框里有一些操作功能，對 Vue2 項(xiàng)目比較好用。

Translation：最佳翻譯插件

可以便捷地在 Webstorm 中進(jìn)行翻譯，省去了打開翻譯軟件的操作，支持右鍵方式選中翻譯，也可以打開獨(dú)立窗口進(jìn)行整段的翻譯。

個人感覺最方便的功能就是翻譯并替換功能，Mac 上快捷鍵?command + control + O，Win 上為?ctrl + shift + X，在寫業(yè)務(wù)代碼的時候會自動翻譯漢字的業(yè)務(wù)詞條自動翻譯，字符串可以選擇大駝峰或小駝峰什么的。

String Manipulation / CamelCase：字符串處理

這兩個插件都是處理字符串的，可以將英文字符串在 kebab-case、SNAKE_CASE、PascalCase、camelCase、snake_case、space case 形態(tài)間切換。

第一個 String Manipulation 插件比較大，推薦經(jīng)常處理字符串的小伙伴用，第二個 CamelCase 插件比較輕量，日常使用完全足夠，使用也很簡單，快捷鍵?option/alt +shift + U?就可以進(jìn)行切換了。Webstorm 自帶切換大小寫的快捷鍵是?command/ctrl + shift + U，這兩個差不多的快捷鍵也很好記。

CamelCase

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

.ignore?插件支持創(chuàng)建多種?.ignore?文件比如?.gitignore、.eslintignore、.dockerignore?等等，我們最常用的基本都支持，新建的時候支持選擇不同類型的框架或庫常用的忽略配置，如?node_modules、dist、.cache?等。

在項(xiàng)目文件夾上右鍵、新建、.ignore File

在文件上右鍵也可以快速添加到忽略文件中，是使用 Git 必裝的小插件。

image-20220222094324570

也支持將文件旋選中右鍵快速添加到?.gitignore?文件中。

Import Cost：顯示引入的包體積大小

VSCode 上也有這個插件，會在你引入的庫后面告訴你這個庫的體積大小，和 gzip 后的包體積。

CodeGlance：右側(cè)代碼小地圖

在代碼面板的右側(cè)顯示一個代碼縮略圖，像 VSCode 里那樣。我看有人在用這個插件，但在下不怎么用，在編輯器里使用分屏的時候覺得有些礙事，長文件中用著還行，看你個人喜好了。

.env files support：配置文件支持

可以給?.env?環(huán)境配置文件增加語法高亮，給配置文件中定義的變量增加智能索引。另外在使用 Webpack 進(jìn)行打包的時候，我們會有一些環(huán)境變，安裝該插件后，就會提示環(huán)境變量文件中所擁有的環(huán)境變量。

JetBrains Toolbox：全家桶管理軟件

用來集中管理 Webstorm、IntelliJ、GoLand 等 JetBrains 全家桶軟件，管理常用設(shè)置、項(xiàng)目導(dǎo)航，以及自動更新、插件更新、回滾和降級軟件版本等功能，如果你 JetBrains 系列軟件安裝了不止一款，那十分推介安裝。

2. 實(shí)用設(shè)置 Tips

2.1 關(guān)閉不需要的插件

Webstorm 安裝后自帶了很多內(nèi)置插件，有些不需要的或不常用可以將其關(guān)閉，項(xiàng)目開啟速度可以進(jìn)一步增加。

2.2 連體字

現(xiàn)在不少字體都可以設(shè)置連體字，比如?Fira Code?或者 2021 年 JetBrains 增加的專用于編程的?JetBrains Mono?字體。強(qiáng)烈推介后者，2021 及以后版本內(nèi)置于 Webstorm，是最新發(fā)布專用于編程的字體，清晰、易讀、辨識度高。

設(shè)置使用?JetBrains Mono?字體后，可以達(dá)到下面這樣的效果：

如果你喜歡這種風(fēng)格，在設(shè)置的?編輯器->配色方案->配色方案字體?中修改。

2.3 設(shè)置默認(rèn)內(nèi)存

相信很多人裝上 Webstorm 第一件事就是改默認(rèn)內(nèi)存，可以在?.vmoptions?設(shè)置文件里手動改，也可以在?幫助->更改內(nèi)存設(shè)置?中更改，建議設(shè)置為 4096 或者更高一點(diǎn)。

當(dāng)前的占用內(nèi)存在軟件界面右下角可以看到，如果感覺內(nèi)存設(shè)置的不夠，可以再改大點(diǎn)。

2.4 設(shè)置配置同步

可以在?文件 -> 管理IDE設(shè)置 -> IDE設(shè)置同步?中設(shè)置配置同步，Webstorm 會將你的配置與你的賬戶綁定，這樣你家里的電腦就可以和公司的電腦使用相同的配置和快捷鍵。

3. Tips

3.1 強(qiáng)悍的后綴補(bǔ)全功能

經(jīng)常聽到別人說代碼自動補(bǔ)全，但我很少聽人說過 Webstorm 的后綴補(bǔ)全，但特別實(shí)用，對于有些已經(jīng)脫離或者希望脫離鼠標(biāo)的高手來說，后綴補(bǔ)全可以讓你少按很多次?←?鍵。

下面是?.const?補(bǔ)全的例子：

還有補(bǔ)全表達(dá)式的括號?.par?和 return 語句的?.return?方式：

全部的后綴補(bǔ)全可以在?編輯器->常規(guī)->后綴補(bǔ)全?中看到，也可以自定義喜歡的補(bǔ)全方式。

3.2 正則表達(dá)式快捷驗(yàn)證

在正則表達(dá)式上按?option/alt + enter?可以就地快捷驗(yàn)證正則表達(dá)式，這是一個快速功能，在做表單驗(yàn)證的一些正則表達(dá)式的時候非常實(shí)用

4. 實(shí)用快捷鍵

4.1 全局搜索

雙擊?shift?可以打開隨處搜索功能，這里可以搜索設(shè)置、代碼、文件名、文件夾名、改變主題等等，是 Webstorm 上最強(qiáng)功能之一，相當(dāng)于 VSC 的?command/ctrl + shift + P

search everywhere

4.2 打開最近的文件

command/ctrl + E?可以打開最近的文件，在這些文件中間跳轉(zhuǎn)，文件列表中也包括已關(guān)閉的文件。比如你剛剛關(guān)閉了一個文件，再想把這個文件打開，就可以使用這個快捷鍵，相當(dāng)于瀏覽器的?command + shift + T

4.3 在項(xiàng)目視圖中打開文件

在項(xiàng)目視圖中打開文件是一個很方便的功能，就是項(xiàng)目文件目錄面板上面兩個同心圓一樣的圖標(biāo)，可以在文件目錄中快速打開當(dāng)前并定位到當(dāng)前文件：

在項(xiàng)目視圖中打開文件

默認(rèn)設(shè)置里并沒有給這個功能增加快捷鍵，建議在?鍵盤映射->其他->在項(xiàng)目視圖中選擇文件?中添加自己的快捷鍵，我設(shè)置的是?option/alt + 1?，僅供參考：

4.4 查看用途

使用?option/alt + F7?可以查看當(dāng)前變量、函數(shù)、類的使用、讀取、導(dǎo)入的地方，在閱讀別人的代碼理清邏輯關(guān)系的時候非常好用，有了這個功能閱讀源碼終于不用?command/ctrl + shift + F?一個個找變量了。

查看用途

快速顯示用法的快捷鍵是?command/ctrl + option/alt + F7

4.5 其他超級快捷鍵

1. command/ctrl + option/alt + O：import 優(yōu)化，移除沒用到的 import
2. command/ctrl + option/alt + L：重新格式化代碼
3. command/ctrl + option/alt + Z：Git 回滾當(dāng)前區(qū)域的代碼
4. command/ctrl + J：查看預(yù)定義代碼模板
5. command/ctrl + shift + up/down：智能移動代碼塊，如果移動函數(shù)，可以將這個函數(shù)整體移動到上一個函數(shù)上
6. control/ctrl + shift + J：合并兩行
7. command/ctrl + G：選擇下一個相同匹配項(xiàng)
8. command/ctrl + D：復(fù)制當(dāng)前行
9. F2：導(dǎo)航到編輯器報(bào)錯或者報(bào)警告的地方

查看官方的所有快捷鍵可以點(diǎn)擊?幫助->鍵盤快捷鍵 PDF，或者雙擊?shift?輸入「鍵盤快捷鍵」就可以看到官方快捷鍵參考 PDF，內(nèi)容非常全，多看看經(jīng)?？梢园l(fā)現(xiàn)驚喜。

快捷鍵PDF

網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過程中的總結(jié)，如果發(fā)現(xiàn)錯誤，歡迎留言指出，如果本文幫助到了你，別忘了點(diǎn)贊支持一下哦，你的點(diǎn)贊是我更新的最大動力~

參考文檔：

1. 都 2021 了你居然還在用 WebStorm ？^[9]
2. Tips - WebStorm Guide^[10]

PS：本文收錄在在下的博客?Github - SHERlocked93/blog^[11]?系列文章中

參考資料