作為前端開發者，最趁手的搬磚工具無外乎 Webstorm 和 VSCode，Webstorm 像蘋果系統，閉源、收費、官方有良好而強大的開發能力、智慧索引和補全功能無出其右者，VSCode 就像安卓，開源、持續迭代更新、社群充滿活力。
Webstorm 的 2021.3 版更新後，以往卡頓的情況緩解了很多，就算重新安裝 node_modules 也不會像以前一樣卡死半天，因為卡頓退坑 Webstorm 的小夥伴可以回來看看 ?
在下使用 Webstorm 較多，總結了一些不錯的外掛和實用 Tips，希望能幫到你~
本文是 <那些好用的工具> 系列文章之一：
- 推介幾款 windows 下非常好用的工具
- 打造舒適搬磚環境，這些是我最想推介的桌面好物
- 乾貨滿滿！推介幾款 Mac 下非常好用的軟體（第一彈）
- 乾貨滿滿！推介幾款 Mac 下非常好用的軟體（第二彈）
- 乾貨滿滿！推介幾款 Mac 下非常好用的軟體（第三彈）
- 好用不卡，這些外掛和配置讓你的 Webstorm 更牛逼！
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 等。
在檔案上右鍵也可以快速新增到忽略檔案中，是使用 Git 必裝的小外掛。
也支援將檔案旋選中右鍵快速新增到 .gitignore 檔案中。
Import Cost：顯示引入的包體積大小
VSCode 上也有這個外掛，會在你引入的庫後面告訴你這個庫的體積大小，和 gzip 後的包體積。
CodeGlance：右側程式碼小地圖
在程式碼皮膚的右側顯示一個程式碼縮圖，像 VSCode 裡那樣。我看有人在用這個外掛，但在下不怎麼用，在編輯器裡使用分屏的時候覺得有些礙事，長檔案中用著還行，看你個人喜好了。
.env files support：配置檔案支援
可以給 .env 環境配置檔案增加語法高亮，給配置檔案中定義的變數增加智慧索引。另外在使用 Webpack 進行打包的時候，我們會有一些環境變，安裝該外掛後，就會提示環境變數檔案中所擁有的環境變數。
JetBrains Toolbox：全家桶管理軟體
用來集中管理 Webstorm、IntelliJ、GoLand 等 JetBrains 全家桶軟體，管理常用設定、專案導航，以及自動更新、外掛更新、回滾和降級軟體版本等功能，如果你 JetBrains 系列軟體安裝了不止一款，那十分推介安裝。
2. 實用設定 Tips
2.1 關閉不需要的外掛
Webstorm 安裝後自帶了很多內建外掛，有些不需要的或不常用可以將其關閉，專案開啟速度可以進一步增加。
2.2 連體字
現在不少字型都可以設定連體字，比如 Fira Code 或者 2021 年 JetBrains 增加的專用於程式設計的 JetBrains Mono 字型。強烈推介後者，2021 及以後版本內建於 Webstorm，是最新發布專用於程式設計的字型，清晰、易讀、辨識度高。
設定使用 JetBrains Mono 字型後，可以達到下面這樣的效果：
如果你喜歡這種風格，在設定的 編輯器->配色方案->配色方案字型 中修改。
2.3 設定預設記憶體
相信很多人裝上 Webstorm 第一件事就是改預設記憶體，可以在 .vmoptions 設定檔案裡手動改，也可以在 幫助->更改記憶體設定 中更改，建議設定為 4096 或者更高一點。
當前的佔用記憶體在軟體介面右下角可以看到，如果感覺記憶體設定的不夠，可以再改大點。
2.4 設定配置同步
可以在 檔案 -> 管理IDE設定 -> IDE設定同步 中設定配置同步，Webstorm 會將你的配置與你的賬戶繫結，這樣你家裡的電腦就可以和公司的電腦使用相同的配置和快捷鍵。
3. Tips
3.1 強悍的字尾補全功能
經常聽到別人說程式碼自動補全，但我很少聽人說過 Webstorm 的字尾補全，但特別實用，對於有些已經脫離或者希望脫離滑鼠的高手來說，字尾補全可以讓你少按很多次 ← 鍵。
下面是 .const 補全的例子：
還有補全表示式的括號 .par 和 return 語句的 .return 方式：
全部的字尾補全可以在 編輯器->常規->字尾補全 中看到，也可以自定義喜歡的補全方式。
3.2 正規表示式快捷驗證
在正規表示式上按 option/alt + enter 可以就地快捷驗證正規表示式，這是一個快速功能，在做表單驗證的一些正規表示式的時候非常實用
4. 實用快捷鍵
4.1 全域性搜尋
雙擊 shift 可以開啟隨處搜尋功能，這裡可以搜尋設定、程式碼、檔名、資料夾名、改變主題等等，是 Webstorm 上最強功能之一，相當於 VSC 的 command/ctrl + shift + P
4.2 開啟最近的檔案
command/ctrl + E 可以開啟最近的檔案，在這些檔案中間跳轉，檔案列表中也包括已關閉的檔案。比如你剛剛關閉了一個檔案，再想把這個檔案開啟，就可以使用這個快捷鍵，相當於瀏覽器的 command + shift + T
4.3 在專案檢視中開啟檔案
在專案檢視中開啟檔案是一個很方便的功能，就是專案檔案目錄皮膚上面兩個同心圓一樣的圖示，可以在檔案目錄中快速開啟當前並定位到當前檔案：
預設設定裡並沒有給這個功能增加快捷鍵，建議在 鍵盤對映->其他->在專案檢視中選擇檔案 中新增自己的快捷鍵，我設定的是 option/alt + 1 ，僅供參考：
4.4 檢視用途
使用 option/alt + F7 可以檢視當前變數、函式、類的使用、讀取、匯入的地方，在閱讀別人的程式碼理清邏輯關係的時候非常好用，有了這個功能閱讀原始碼終於不用 command/ctrl + shift + F 一個個找變數了。
快速顯示用法的快捷鍵是 command/ctrl + option/alt + F7
4.5 其他超級快捷鍵
command/ctrl + option/alt + O：import 優化，移除沒用到的 importcommand/ctrl + option/alt + L：重新格式化程式碼command/ctrl + option/alt + Z：Git 回滾當前區域的程式碼command/ctrl + J：檢視預定義程式碼模板command/ctrl + shift + up/down：智慧移動程式碼塊，如果移動函式，可以將這個函式整體移動到上一個函式上control/ctrl + shift + J：合併兩行command/ctrl + G：選擇下一個相同匹配項command/ctrl + D：複製當前行F2：導航到編輯器報錯或者報警告的地方
檢視官方的所有快捷鍵可以點選 幫助->鍵盤快捷鍵 PDF，或者雙擊 shift 輸入「鍵盤快捷鍵」就可以看到官方快捷鍵參考 PDF，內容非常全，多看看經常可以發現驚喜。
網上的帖子大多深淺不一，甚至有些前後矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出，如果本文幫助到了你，別忘了點贊支援一下哦，你的點贊是我更新的最大動力~
參考文件：
PS：本文收錄在在下的部落格 Github - SHERlocked93/blog 系列文章中，歡迎大家關注我的公眾號 前端下午茶，直接搜尋即可新增或者點這裡新增，持續為大家推送前端以及前端周邊相關優質技術文，共同進步，一起加油~
另外可以加入「前端下午茶交流群」微信群，微信搜尋 sherlocked_93 加我好友，備註加群，我拉你入群～