作者：侑夕

其實都用，平時寫 Demo 或格式化文檔時用 VSCode，寫項目以及閱讀源碼會用 WebStorm，我認為兩者更多是 IDE 和 Editor 的差別，放一起比較必要性也不大；敲代碼用啥隻有一個條件就是你可以超級熟練使用那個工具，重點是可提高你獨有的敲代碼效率，有些像「君子性非異也，善假于物也」這句話表達的觀點。

那麼到底 WebStorm 更香在哪兒，周末花了個下午寫篇文章來開一個 “曆史倒車輪“，給大夥介紹一下「如何用上 WebStorm 最新正版？」「如何讓 WebStorm 好用不卡？」，以及「WebStorm 香的地方在哪裡？」，以下文章将單詞

WebStorm

換成

IntelliJ IDEA

也合适。

如何用上 WebStorm 最新正版？

很建議初步使用的時候「用上 WebStorm 30天[1]内免費」的福利，等到覺得好用再去考慮申請正式版本，防止造成不必要的浪費！

1. 自費去官方購買個人版

資金允許的同學可以直接上官網買個人版本[2]，首年 59 美元，後面年續會便宜不少(59->47->35)，假如不更新的話還可一直用下去不續費。同時對于個人版官方說[3]同樣支援用于商業項目，隻需要保證一個人用即可。

2. 通過開源項目申請一年的使用

講道理，JetBrains 公司真的很良心，提供了開源開發許可證福利，讓大夥免費用他家軟體進行開源貢獻，一般項目維護在 3 個月以上大機率可通過。可從此入口免費許可證計劃[4] 進入申請，也可參考這篇教程[5]；除去開源申請外，還可試試學術許可[6]、使用者組[7]、開發者活動[8]、開發者認可[9]方式擷取，但都「不能用于商業項目」請斟酌使用。

綜上，若資金允許就買個人正式版，有些緊就用開源項目的方案。同時不建議用淘寶購買自己郵箱授權的教育版或用 ide-eval-resetter[10] 插件延遲試用期的灰色地帶方式來開發商業項目。

如何讓 WebStorm 好用不卡？

都 2021 了你居然還在用 WebStorm ？是的！如何用上 WebStorm 最新正版？如何讓 WebStorm 好用不卡？WebStorm 香的地方在哪裡？

打開我 Mac 上最大的一個項目 xRender，沒有插電情況下，實際的啟動效果錄屏 mp4

1. 安裝幾個常用的插件

直接

command + .

打開設定，找到 plugin，複制後在插件市場進行搜尋安裝：

中文語言包：講道理程式設計的同學應該預設全英文，但是安裝後你會一眼發現很多之前英語下“看不到“的東西。想起之前自己強迫自己蘋果全家桶都用英文，堅持了 1 個月就忍不下去了，雖然看得懂，但是需要腦袋 proxy 翻譯的時間，回想起來何必呢？不過看英語如看中文無需反應的同學可忽視（等到哪一天功能熟練以後其實也可以關閉中文）。
Coderpillr Theme：超級好看的一個主題，之前試過很多如 One Dark、Material Theme Ul 都不是很滿意，其實最愛 Dracula Theme，但遺憾在這裡不好看，剛好 Coderpillr 這個小衆的很有 Dracula 風格，深得我心。
Key Promoter X：快捷鍵愛好者的神器，會來智能教你記住快捷鍵。
.ignore：自動提示你哪些檔案可以被 ignore，省去新項目場景一個一個找的問題
WakaTime：需要稍微配置一下，可以将你所有敲代碼的地方裝上這個插件，可以很通路的統計你敲了多長時間的代碼，詳細見官網[11]。

對于插件，不建議安裝太多，滿足使用即可，太酷炫的反而影響性能，同時也建議禁用掉一批你用不上的。

2.修改一下文字大小

主要有 3 個常用地方要修改下，可也按照個人喜好配置（截圖說明[12]）：

一是外觀字型，預設有些小了，建議 .ApplesystemUIFont 16；
二是編輯器字型，推薦 JetBrains Meno 20，行高 1.16，不要連體；
三是控制台字型，推薦 JetBrains Meno 18，行高 1.14，緊湊一些，不要連體；

3. 禁止掉不用的插件

繼續在 plugin 中已安裝 Tab 中，對你覺得你用不上的取消勾選禁止掉一批可能用不上的，減少使用記憶體，我禁止了很多，其中「Code With Me」不用也可以關閉，可以在「幫助->診斷工具->分析插件記憶體」來看到[13]更多可優化的空間，選擇性參考如下：

都 2021 了你居然還在用 WebStorm ？是的！如何用上 WebStorm 最新正版？如何讓 WebStorm 好用不卡？WebStorm 香的地方在哪裡？

4. 将預設記憶體設定大一些

都 2021 了你居然還在用 WebStorm ？是的！如何用上 WebStorm 最新正版？如何讓 WebStorm 好用不卡？WebStorm 香的地方在哪裡？

目前占用記憶體，可在底部欄看到，如果沒有，可以右鍵底欄選擇打開，也可以關閉一些不用的狀态顯示（1）
在頂部菜單欄找到「幫助->更改記憶體設定」(2)，M1 很牛逼不動也行，其他的更新到 4096 即可(3)。

5. 記住和設定常用的快捷鍵

建議從這裡開始，打開本地有 Git 釋出記錄的前端項目來測試，借此熟練一遍，建議在「設定->鍵盤映射」中，将「在 Touch Bar上顯示F1、F2等鍵」勾選上。由于正常軟體為了最大化主編輯區，操作動作都在埋在菜單内部了，導緻不能所見所得進而想不到使用，記住快捷鍵可以讓你沒有想到情況下比普通使用者用到多 50% 的潮流功能。

常用的一些好用快捷鍵，建議強迫多用最後到肌肉記住：

## 查找替換操作
shift 按兩次             // 随處搜尋，搜尋檔案、功能、代碼很友善
command + f              // 目前頁搜尋
command + shift + f      // 全局搜尋字段
command + r              // 替換目前文檔
command + shift + r      // 全局替換字段
## 視圖展示
command + 1              // 顯示隐藏左側檔案樹
command + 0              // 顯示目前待送出代碼，用于送出前 diff
command + 9              // 顯示目前曆史所有的送出記錄
command + 7              // 顯示目前檔案的結構，特别是看 Class 時候很友善
command + 上箭頭         // 跳轉到導航欄
command + 點選           // 跳到代碼調用位置
## 代碼操作
command + option + l     // 格式化代碼(常用)
shift + f6               // 使檔案、标簽、變量名重命名
f2, shift + f2           // 切換到上\下一個突出錯誤的位置
shift + 回車             // 無論在什麼位置，自動跳到下一行
option + 回車            // 警告代碼快速給出自動修正
command + 回車           // 跳到目前調用檔案
command + delete         // 删除目前行，command + x也可以
command + d              // 複制新增一行一樣的代碼
command + w              // 關閉目前檔案頁籤
command + /              // 注釋行代碼
command + b              // 跳轉到變量聲明處
command + shift + c      // 複制檔案的路徑
command + shift + [ ]    // 頁籤快速切換，很有用
command + shift + u      // 大小寫自動轉
command + shift + /      // 注釋塊代碼
command + shift + +/-    // 展開/折疊 目前選中的代碼塊
command + shift + v      // 從剪切闆裡選擇黏貼
## git 操作
command + k              // 填寫代碼送出記錄
command + option + k     // 送出代碼
command + option + z     // 撤銷目前代碼改動
command + d              // 選中兩個檔案進行對比，充當檔案夾 diff 工具

找到「設定裡的鍵盤映射」，進行操作文字「搜尋」，設定幾個有用的自定義快捷鍵，我習慣用左邊豎直對齊的 control+shift ，也可以設定自己順手的:

- 打開最近 ：設定成 control+shift+r 或者更順手的 command+e ，recent 可以将曆史開發過的項目快速打開
- 打開.. control+shift+o ，open 用于打開新項目，後面更多使用 command+e 快速啟動
- 關閉項目 control+shift+w ，用于關閉目前項目的 WebStrom 視窗
- 終端 control+shift+i ，iterm 用于打開指令行視窗，這個指令用得很多
- 注解 control+shift+b ，blame 可以顯示目前檔案代碼每行的開發記錄
- 顯示曆史送出記錄 control+shift+h ，history 可以顯示目前檔案所有的送出改動記錄
- 拉代碼 control+shift+p ，pull 目前分支最新的的 git 代碼
- 與分支比較 control+shift+d ，diff 可以将目前檔案/檔案夾（選擇左側的檔案樹）和曆史分支對比，排查線上問題簡直神器
- 切換示範模式 : 設定成 command+option+control+v ，view 特别合适在代碼示範和分享給他人看的時候的場景
- 切換免打擾模式 command+option+control+m ，mute 特别合适想安靜敲代碼的時候

剛開始不習慣使用快捷鍵的同學，可以在頂部菜單欄、在編輯器上、底部狀态欄上、左側導航檔案樹上多用用 右鍵 ，可以發現很多新玩意，通過 Key Promoter X 來輔助記憶

6. 可能用不上的進階設定

假如設定平時不卡，但是在 Webstorm 自帶終端

npm i

以後，特别是依賴 node_modules 檔案索引超多變化導緻無響應的問題（好電腦一般不會），可以試試我這邊調試了好多次的進階設定。

在頂部菜單找到「幫助->編輯自定義屬性」，打開

idea.properties

檔案，編輯如下：

idea.cycle.buffer.size=4096
idea.max.intellisense.filesize=50

繼續在「幫助->編輯自定義VM選項」打開

webstorm.vmoptions

-ea
-server
-Xms2048m
-Xmx8192m
-Xss16m
-XX:MaxMetaspaceSize=2G
-XX:MetaspaceSize=1G
-XX:ConcGCThreads=8
-XX:ParallelGCThreads=8
-XX:NewRatio=2
-XX:ReservedCodeCacheSize=240m
-XX:+AlwaysPreTouch
-XX:+UseG1GC
-XX:+DoEscapeAnalysis
-XX:+TieredCompilationUseG1GC
-XX:SoftRefLRUPolicyMSPerMB=50
-XX:+UnlockExperimentalVMOptions
-Dsun.io.useCanonPrefixCache=false
-Djava.net.preferIPv4Stack=true
-Dsun.io.useCanonCaches=false
-XX:LargePageSizeInBytes=256m
-XX:+UseCodeCacheFlushing
-XX:+DisableExplicitGC
-XX:+ExplicitGCInvokesConcurrent
-XX:+AggressiveOpts
-XX:+CMSClassUnloadingEnabled
-XX:CMSInitiatingOccupancyFraction=60
-XX:+CMSParallelRemarkEnabled
-XX:+UseAdaptiveGCBoundary
-XX:+UseSplitVerifier
-XX:CompileThreshold=10000
-XX:+OptimizeStringConcat
-XX:+UseStringCache
-XX:+UseFastAccessorMethods
-XX:+UnlockDiagnosticVMOptions
-XX:+HeapDumpOnOutOfMemoryError
-XX:-OmitStackTraceInFastThrow
-Djdk.attach.allowAttachSelf=true
-Dkotlinx.coroutines.debug=off
-Djdk.module.illegalAccess.silent=true
-XX:+UseCompressedOops
-Dfile.encoding=UTF-8
-XX:CICompilerCount=2
-Xverify:none

最後在頂部菜單欄找到「檔案->清楚緩存..」，然後重新開機 WebStrom 後，再試試

npm i

安裝巨多依賴應該也不會卡了。

當你上面都熟練了，很建議在右下角狀态欄[14] 中登入賬号進行同步，防止設定丢失，等你用過一段時間後，你就會發現 WebStorm 慢慢的就香起來了。

WebStorm 香的地方在哪裡？

1. 世界上最好用 Git 管理工具

看這一行代碼是誰寫的：也叫 git blame，快捷鍵 control+shift+b ，或者在代碼行數數字式右鍵「使用 Git Blame 注解」，就可以出現了這樣效果[15]，同時可滑鼠點選下對應的名稱，會出現當時那次送出的詳細記錄[16]。
送出前 CR 代碼改動：很建議保持這個習慣，每次送出前都對比一下改動了下，快捷鍵為 command + 0 ，這個 diff 對比超級清晰，同時很容易發現粗心的代碼，這樣的效果[17]，确定無誤後 command+k 填寫送出記錄， command+shift+k 送出代碼，送出完成後 command+1 切回到代碼開發。
檢視目前的所有送出記錄：快捷鍵 control+shift+h 可以檢視所有的曆史送出記錄，假如你隻想看某個檔案或者某個檔案夾，選中，然後快捷鍵即可，或者右鍵找到 git 裡面的「顯示曆史記錄」。
檢視目前分支和主幹的改動點：這個是我覺得最好用的地方，也叫「救命操作」，比如說線上出現了問題，想對比上線版本和上一個版本的全部代碼改動點就用得上他了，或者你需要合并 master 之前用于最後的 CR 也是很合适的，快捷鍵為 control+shift+d ，或者在對應的總檔案夾上面點選右鍵找到 git 裡面的「與分支比較」,就可看到如下效果，同時可以按下 F7 來看下一個改動點。

都 2021 了你居然還在用 WebStorm ？是的！如何用上 WebStorm 最新正版？如何讓 WebStorm 好用不卡？WebStorm 香的地方在哪裡？

2. 很安穩的重構&優化代碼的神器

檔案、變量重命名會幫忙将所有的調用也修改掉：快捷鍵為 shift+f6 ，也可以直接在檔案或者變量上右鍵找到重構，改後所有地方都會幫你自動改動。
檔案修改位置後，也會自動修改調用處的引用。
檔案删除前，會檢測調用是否清理幹掉：可以在一個檔案上 command+delete 試試，會提示你哪兒還在使用。
拼寫錯誤、文法錯誤、代碼寫得不優雅都會有提示：可以 option+回車 來按照建議修複，有時候拼寫錯誤可能是自有單詞，可将此單詞存到 WebStorm 字典裡面。
可以将某一塊代碼提煉成一個方法使用：找到一塊可以提煉成方法的代碼，選中，然後 command+option+m 即可抽象方法并智能幫你方法命名。
可替換成使用 Prettier 作為預設格式化：這個功能可以更好的和其他同僚 VSCode 開發場景中代碼格式保持一緻，可見設定示範[18]。
告訴你哪些代碼可以優化：特别是重複代碼的提示查找工具很是不錯，此處偷偷 @NASA FR 有可優化代碼。

都 2021 了你居然還在用 WebStorm ？是的！如何用上 WebStorm 最新正版？如何讓 WebStorm 好用不卡？WebStorm 香的地方在哪裡？

3. 智能提示真的很強

顯示目前包資訊：可以将滑鼠放到對應的引入包上面一會兒，會顯示這個包的 README，省去去看如何使用：

機器學習來提示代碼：寫代碼過程中，目前 WebStorm 2021 支援機器學習所有人的代碼習慣來優化代碼提示功能，支援簡潔的代碼提示（VSCode 有時候會有很多用不上的提示），用了一段時間後你就慢慢發現了。

都 2021 了你居然還在用 WebStorm ？是的！如何用上 WebStorm 最新正版？如何讓 WebStorm 好用不卡？WebStorm 香的地方在哪裡？

都 2021 了你居然還在用 WebStorm ？是的！如何用上 WebStorm 最新正版？如何讓 WebStorm 好用不卡？WebStorm 香的地方在哪裡？

4. 潮流功能 Code With Me 實時調試他人的代碼

回想起之前給同學排查代碼問題，特别是不坐到一起的場景，你需要先讓他加代碼權限，然後 clone 代碼，切分支，npm i，然後告訴你代碼哪兒可能有問題，這裡就浪費了很多時間了。
有時候可能會用 Mac 遠端控制，但是有這裡體驗很不好，很多時候都是卡頓掉幀反應慢，寸步難行的感覺，更不要說去調試代碼了。
有了這個 Code With Me 後（沒有開啟需要去插件中去開啟），直接對方分享一個 url 給你，會自動将對方代碼包括安裝好的依賴同步到你的 WebStorm，然後你在你本地修改時候，對方電腦也會修改，更潮流的你兩還可以視訊會議的方式來聊哪兒問題，使用幾乎原生秒開的體驗，可通過官方視訊[19] 了解更多。

5. 還有不少小驚喜的功能

給你一個清晰的 node_modules：可能很多用 VSCode 的同學都很困惑，我的 node_modules 根本找不到東西，但是 WebStorm 就很清晰了：

左邊為 WebStorm，右側為 VSCode（不過可通過 Node Modules Context Menu 這個小衆插件解決）
獨特的示範模式和專注模式，可以在通過自定義快捷鍵 command+option+control+v 打開，或者在「視圖->外觀->進入示範模式」找到（可去設定->外觀->最下面将示範模式字型設定到 28），省去示範代碼時下面看不清的尴尬；使用自定義快捷鍵 command+option+control+v 進入免打擾模式，也可以「視圖->外觀->進入專注模式」認真敲代碼，也是很清晰的。

回到開始所說，提高操作效率不在乎你用哪一個工具，而在乎你熟練哪個工具，同時很建議大夥對于自己常用的軟體，慢慢讓自己習慣使用快捷鍵，并逐漸脫離滑鼠，會有有趣事情發生的。