VS Code與WebStorm，常用快捷鍵對照與使用心得
前言
VS Code搭配各種強大套件後，其能力更上一檔次
但很多人都忘了，其實他只是個類似notepad++的文字編輯器
因公司Java開發需求，接觸了intelij，無意間發現了WebStorm
就抓來試玩看看。安裝好後打開，IDE直接內置了Angular、Node.Js等所有前端所需的一切
基本上是開箱即用，除了一開始熱鍵不熟悉操作卡卡
把VS Code常用的熱鍵都找到對照後，試開發了一小段
深切感受到有IDE的完整支援，開發體感更加舒適
如該行字刪除完後，若前面皆是縮排時，只要按一次backspace
會直接把前面的縮排清掉，游標回到前一行(也許VS Code也有類似套件？沒留意到)
以Angular為例
我在VS Code已安裝了不少輔助套件，但html有時仍無法感知到component.ts有哪些參數
雖然拼錯時VS Code仍會提示錯誤，就是得再修正
而WebStorm竟可以即時感知！
直接.就可以帶出相關參數！著實令我驚訝
A.component.ts的constructor(...)所有注入的東西
拷貝至B.component.ts使用時，居然同時把相關import自動帶入！
Git
在git的操作上，提供了比VS Code更加完整的GUI操作
當然WebStorm還是有些小缺點不如VS Code
如cmd + ↓↑移動程式碼時，VS Code會自動併進縮排
但WebStorm就不會了，要自己再補tab
VS Code本身是相當輕量的文字編輯器，若沒有太多套件，啟動速度是相當的快
但若要開發流暢，自然會安裝滿滿的套件
在我的MacBook Pro上，WebStorm的啟動速度還比VS Code快許多
進入專案後的索引時間也快許多！
已讓我考慮是否要轉換至WebStorm做為主力IDE使用
而剛接觸時最大的問題就是VS Code上熟悉的快捷鍵是什麼
針對我自己常用到的快捷鍵做一對照，方便有心想要體驗的人可以快速入門
熱鍵對照表
| 功能 | VS Code | WebStorm |
|---|---|---|
| 程式碼上下移動 | cmd + ↓↑ |
option + shift + ↓↑ |
| 快速開啟檔案 | cmd + P |
cmd + shift + O |
| 反白單字多選 | cmd + D |
ctrl + G |
| 左邊全局搜尋 | 側邊頁籤點選 | cmd + shift + F |
| 複製反白文字 | cmd + shift + ↓↑ |
cmd + D |
| 區域文字小選 | 須安裝套件expand-region |
cmd + ↓↑ |
幾個衝突的快鍵鍵，如
- 程式碼上下移動
- 反白單字多選與複製反白文字的熱鍵衝突
在一開始的操作上真的容易按錯。但漸漸適應後就還好了！
後記
整理這篇文章，並不是要反對VS Code，力捧WebStorm
畢竟WebStorm做為一套商業軟體，本就該比免費軟體有更強的能力
WebStorm提供了前端開發的所有需要完整工具集，一切開箱即用，且仍有套件可再強化操作細節
而VS Code有強大的微軟做為靠山，加上滿山滿谷的套件，可以依需求打造出極具個人化的開發環境
但要注意，安裝太多會對啟動速度造成影響
對於新手入門，個人還是首推VS Code
畢竟一開場就叫人家先掏錢買工具，大概就讓人卻步了XD