作為前端開發者，最趁手的搬磚工具無外乎 Webstorm 和 VSCode，Webstorm 像蘋果系統，閉源、收費、官方有良好而強大的開發能力、智能索引和補全功能無出其右者，VSCode 就像安卓，開源、持續迭代更新、社區充滿活力。

Webstorm 的 2021.3 版更新後，以往卡頓的情況緩解了很多，就算重新安裝 node_modules 也不會像以前一樣卡死半天，因為卡頓退坑 Webstorm 的小夥伴可以回來看看

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

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

1. 推介幾款 windows 下非常好用的工具
2. 打造舒適搬磚環境，這些是我最想推介的桌面好物
3. 乾貨滿滿！推介幾款 Mac 下非常好用的軟體（第一彈）
4. 乾貨滿滿！推介幾款 Mac 下非常好用的軟體（第二彈）
5. 乾貨滿滿！推介幾款 Mac 下非常好用的軟體（第三彈）

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 插件，這個插件會在當前括弧上高亮之外，還會在左側代碼行數那顯示括弧範圍，比彩虹括弧插件更加直觀而且不容易看花眼。

HighlightBracketPair

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

很多大佬的博客推介 Key Promoter X，可以在你點某個功能的時候提示你這個功能的快捷鍵，多用一用就可以脫離滑鼠，使用快捷鍵觸發這些功能。

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

Presentation Assistant

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，這兩個差不多的快捷鍵也很好記。

CamelCase

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

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

在項目文件夾上右鍵、新建、.ignore File

在文件上右鍵也可以快速添加到忽略文件中，是使用 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

search everywhere

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 其他超級快捷鍵

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

查看官方的所有快捷鍵可以點擊 幫助->鍵盤快捷鍵 PDF，或者雙擊 shift 輸入「鍵盤快捷鍵」就可以看到官方快捷鍵參考 PDF，內容非常全，多看看經常可以發現驚喜。

快捷鍵PDF

網上的帖子大多深淺不一，甚至有些前後矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出，如果本文幫助到了你，別忘了點贊支持一下哦，你的點贊是我更新的最大動力~

參考文檔：

都 2021 了你居然還在用 WebStorm ？

Tips – WebStorm Guide

PS：本文收錄在在下的博客 Github – SHERlocked93/blog 系列文章中，歡迎大家關注我的公眾號 這裡，持續為大家推送前端以及前端周邊相關優質技術文，共同進步，一起加油~