WebStorm 設定

都 2022 年了，你居然還在用 WebStorm？VSCode 不香嗎？😤

都 2022 年了，你居然還在用 WebStorm？VSCode 不香嗎？😤

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

那麼到底 WebStorm 更香在哪兒，週末花了個下午怼篇文章來開一個 “歷史倒車輪 “，給大伙介紹一下「如何用上 WebStorm 最新正版？」「如何讓 WebStorm 好用不卡？」，以及「WebStorm 香的地方在哪裡？」，以下文章將單詞 WebStorm 換成 IntelliJ IDEA 也合適。

# 一、如何用上 WebStorm 最新正版？#

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

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

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

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

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

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

# 二、如何讓 WebStorm 好用不卡？#

安裝幾個常用的插件

直接 command + , 打開設置，找到 plugin，複製後在插件市場進行搜索安裝：

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

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

# 2. 修改一下文字大小#

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

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

# 3. 禁止掉不用的插件#

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

# 4. 將默認內存設置大一些#

當前佔用內存，可在底部欄看到，如果沒有，可以右鍵底欄選擇打開，也可以關閉一些不用的狀態顯示（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 + 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 安裝巨多依賴應該也不會卡了。

當你上面都熟練了，很建議在右下角狀態欄中登錄賬號進行同步，防止設置丟失，等你用過一段時間後，你就會發現 WebStorm 慢慢的就香起來了。

# 三、WebStorm 香的地方在哪裡？#

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

看這一行代碼是誰寫的：也叫 git blame，快捷鍵 control+shift+b ，或者在代碼行數數字式右鍵「使用 Git Blame 注解」，就可以出現這樣效果，同時可鼠標點擊下對應的名稱，會出現當時那次提交的詳細記錄。
提交前 CR 代碼改動：很建議保持這個習慣，每次提交前都對比一下改動了下，快捷鍵為 command + 0 ，這個 diff 對比超級清晰，同時很容易發現粗心的代碼，這樣的效果，確定無誤後 command+k 填寫提交記錄， command+shift+k 提交代碼，提交完成後 command+1 切回到代碼開發。
查看當前的所有提交記錄：快捷鍵 control+shift+h 可以查看所有的歷史提交記錄，假如你只想看某個文件或者某個文件夾，選中，然後快捷鍵即可，或者右鍵找到 git 裡面的「顯示歷史記錄」。
查看當前分支和主幹的改動點：這個是我覺得最好用的地方，也叫「救命操作」，比如說線上出現了問題，想對比上線版本和上個版本的全部代碼改動點就用得上他了，或者你需要合併 master 之前用於最後的 CR 也是很合適的，快捷鍵為 control+shift+d ，或者在對應的總文件夾上面點擊右鍵找到 git 裡面的「與分支比較」，就可看到如下效果，同時可以按下 F7 來看下個改動點。有試過知名的 Tower、Sourcetree、Sublime Merge、Fork 等 Git 管理工具，發現真心不如它

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

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

# 3. 智能提示真的很強#

顯示當前包信息：可以將鼠標放到對應的引入包上面一會兒，會顯示這個包的 README，省去去看如何使用：
機器學習來提示代碼：寫代碼過程中，當前 WebStorm 2021 支持機器學習所有人的代碼習慣來優化代碼提示功能，支持簡潔的代碼提示（VSCode 有時候會有很多用不上的提示），用了一段時間後你就慢慢發現了。

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

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

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

給你一個清晰的 node_modules：可能很多用 VSCode 的同學都很困惑，我的 node_modules 根本找不到東西，但是 WebStorm 就很清晰了，這裡顯示可以更好優化一下，甚至讓無用的不出現，可見說明：
左邊為 WebStorm，右側為 VSCode（不過可通過 Node Modules Context Menu 這個小眾插件解決）
獨特的演示模式和專注模式，可以在通過自定義快捷鍵 command+option+control+v 打開，或者在「視圖 -> 外觀 -> 進入演示模式」找到（可去設置 -> 外觀 -> 最下面將演示模式字體設置到 28），省去演示代碼時下面看不清的尷尬；使用自定義快捷鍵 command+option+control+v 進入免打擾模式，也可以「視圖 -> 外觀 -> 進入專注模式」認真敲代碼，也是很清晰的。第一次是演示模式，第二次是免打擾模式

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