點贊是動力 💪，關注是支持 👊！
建議、疑問、話題歡迎在評論區留言哦！
我之前也是用過很多代碼編輯器，從NotePad++、SublimeText一直到PHPStorm，最後VSCode。這個過程每一個編輯器我都折騰了很多配置，插件和主題。開發者的編輯器就等同於一個刀客的隨身佩刀，一個槍手的隨身配槍。一個好的裝備的配件可以大大提升我們的戰鬥力。
所以對於一個好的程序員，一個好的代碼編輯器可以起到很大的作用，在開發的過程中可以給我們帶來很多便利、幫助、效率和影響。甚至一個好的編輯器可以給開發者日常編程中帶來更高的喜悅感。
槍手挑選一把槍會通過幾個緯度來選擇：重量，擊倒力，子彈量和精準度等等。那對開發者來說也一樣的，我們會考慮這個編輯器的插件，擴展性，兼容性，功能性，美觀和快捷鍵等等。
其中我們最在乎的就是：
- “有多少實用的插件給我們帶來開發便利和效率”
- “能否兼容我們的編程語言”
- “有沒有定義或者方法跳轉，讓我在複雜的代碼中定位到方法、變量和函數”
- “代碼要看的舒服，代碼高亮要優美好看，養眼”
- “有常用的快捷鍵，提高開發效率（最好讓我不需要用鼠標）”
🌟總結一下其實就是“讓我們寫代碼更快速，更愉悅，更舒服”
導航
- 「始」前沿
- 「一」編輯器使用
- 快捷鍵列表查看「View Shortcut」
- 快速打開文件「Quick open」
- 編輯器命令「Command Palette」
- 拆分編輯器「Split Editor」
- 編輯器網格佈局「Editor Grid Layout」
- 快速打開和關閉側邊欄「Opening and Closing the Sidebar」
- 快速打開集成終端「Open new Terminal」
- 「二」輔助代碼編寫
- 合併行「Join Line」
- 代碼格式化「Code Formatting」
- 清楚多餘空格「Trim Trailing White Space」
- 代碼摺疊「Code Folding」
- 往上/下複製行「Copy Line Up/Down」
- 選擇單詞「Select Word」
- 跳轉到特定行數「Navigate to a Specific Line」
- 文件中跳轉特定符號「Go to Symbol in File」
- 項目中跳轉特定符號 「Go to Symbol in Workspace」
- 刪除整個單詞「Delete Previous Word」
- 按單詞選擇「Select by words」
- 快速複製當前行「Duplicate Line」
- 刪除一行「Deleting a Line」
- 往上/下添加同時編輯「Add Cursor Above/Below」
- 多行選中同時編輯 「Column Selection」
- 修改“符號” 「Rename Symbol」
- 「待續」總結
「始」前沿
要全面教大家高效使用VSCode，就要講到3大板塊：快捷鍵，插件和配置。因爲內容非常之多，所以我拆分成了3篇文章提供給大家學習。（感興趣的童鞋可以關注一下哦 😁）
這篇文章主要詳細講解VSCode的常用快捷鍵，讓大家在VSCode中編寫代碼時，更加的順手，基本可以脫離鼠標。
基本上記住這些常用的快捷鍵，我們就可以馬上提高使用VSCode的效率，也會提升我們編寫代碼的速度！
讓我們一起成爲VSCode的高級玩家！
「一」編輯器使用
先講講使用編輯器功能的快捷鍵，這些可以讓我們更快捷和順手的使用VSCode的一些常用功能。同時可以使用這些快捷鍵挖掘更多編輯器的隱藏功能哦。
快捷鍵列表查看「View Shortcut」
如果想查看所有快捷鍵的童鞋，可以使用一下快捷鍵：
Mac：
Command+K，再按Command+SLinux/Windows：
Ctrl+K，再按Ctrl+S
🌟如果需要快速查看某一個特定的快捷鍵，只需要快捷鍵列表上方的搜索欄輸入直接搜索即可
快速打開文件「Quick open」
可以用於快速搜索，然後打開項目中的文件，當你想在一個大型項目中打開某一個代碼文件時，此方法非常實用。
Mac:
Command+PLinux/Windows：
Ctrl+P
🌟小技巧
- 輸入
?可以查看幫助文檔- 搜索中會優先列出最近打開過的文件
- 如果想打開多個文件有兩種方法：（會在背後打開新的文件，搜索不會被關閉）
- 打開新文件 Mac:
Option+→或者 Linux/Windows：Alt+→- 多窗口打開 Mac:
Command+→或者 Linux/Windows：Ctrl+→
編輯器命令「Command Palette」
在搜索加上>前綴就可以調用命令了。編輯器的命令可以做很多，可以快速搜索快捷鍵，還可以執行插件的一些命令，非常實用哦！
Mac:
Command+PLinux/Windows：
Ctrl+P
🌟小技巧
想快速查看快捷鍵按鈕也可以通過這種方式搜索。
拆分編輯器「Split Editor」
在開發的過程中，我們會經常打開幾個文件同時編輯，特別是高度封裝的代碼就會同時在更改多個文件。
前端就更不用說的，很多時候我們都在同時編輯HTML，CSS和JavaScript文件。
編寫Vue的時候就更難受了，HTML和CSS和腳本都是在一個文件中，代碼會非常的長，把當前文件在同一個編輯器拆分開，然後分別滑動到HTML，CSS和腳本部分就可以同時更改了。
Mac:
Command+\或者2,3,4Windows:
Shift+Alt+\或者2,3,4Linux:
Shift+Alt+\或者2,3,4
編輯器網格佈局「Editor Grid Layout」
默認情況下，編輯器組是垂直列布局的（例如，當您拆分一個編輯器，默認會橫向拆分到右手邊的）。但是很多時候拆分了多幾個編輯器就會發現每個編輯器的寬度會越來越窄，可視度就會大大下降。這個時候我們希望可以使用網格佈局。所以我們可以用編輯器的2x2 網格佈局。
首先我們需要創建空的編輯器組：打開方式查看 > 編輯器佈局 > 2x2 網格：
默認情況下，關閉編輯器組的最後一個編輯器也將關閉整個編輯組，下次要使用的時候需要重新開啓網格佈局，但是我們可以在setting.json的配置裏改變workbench.editor.closeEmptyGroups: false。
快速打開和關閉側邊欄「Opening and Closing the Sidebar」
在我們專注於編程的時候，左邊的側邊欄會佔用我們一定的寬度，特別是使用雙屏（尤其是豎向的屏幕）或者是使用拆分編輯器模式。收起側邊欄可以幫我們節省很多空間。
Mac:
Command+BWindows/Linux:
Ctrl+B
快速打開集成終端「Open new Terminal」
在開發的過程中，我們經常需要用到終端來執行命令。快速打開終端會給我們帶來很多便捷。
Mac:
Control+ `Windows/Linux:
Ctrl+ `
「二」輔助代碼編寫
接下來我們來講講在編程中常用的輔助快捷鍵。這些快捷鍵可以輔助我們提升編寫代碼的速度和效率，讓我們的雙手更集中在鍵盤上，減少消耗在鍵盤和鼠標切換過程的時間。
合併行「Join Line」
Mac：
Control+JLinux/Windows：使用上面說到的快捷鍵打開快捷鍵查詢列表，搜索"合併行"（
editor.action.joinLines），鼠標放在合併行的快捷鍵上，然後點擊編輯圖標，這裏可以設置一個你喜歡的快捷鍵。
代碼格式化「Code Formatting」
這個快捷鍵幫我們快速調整代碼縮減，不過我更加推薦使用Prettier插件，這邊文章後面會講到。
Mac:
Shift+Option+FWindows：
Shift+Alt+FLinux：
Ctrl+Shift+I
清楚多餘空格「Trim Trailing White Space」
這個命令幫助我們清楚代碼前後的多餘空格，如果我們項目有設置嚴格的Lint規範，這個會幫我們減少多餘空格的報錯。
Mac:
Command+KCommand+XWindows/Linux：
Ctrl+KCtrl+X
🌟小技巧
這個功能是可以自動執行的，不需要我們一個個選擇去清除，我們可以在VSCode的配置裏面設置自動清除。下面教大家兩種配置方式。
使用settings.json
- 打開
編輯器命令（Mac：Command+P/Windows：Ctrl+P） - 在搜索框輸入
> Open Settings，然後選擇首選項：打開設置(json) - 然後settings.confg中加入
"files.trimTrailingWhitespace": true，如果已存在這個配置，確保值是true。 - 保存文件即可生效（如果沒有馬上生效，可以重啓VSCode）
使用可視化（UI）設置
- 打開
編輯器命令（Mac：Command+P/Windows：Ctrl+P） - 在搜索框輸入
> Open Settings，然後選擇首選項：打開設置(ui) - 在
文本編輯器>文件中找到Trim Trailling Whitespace並且勾上（我們也可以在搜索框直接輸入Trim Trailling Whitespace快速找到這個配置的位置），可參考下面的截圖。
代碼摺疊「Code Folding」
在開發項目中，很多時候前端的代碼在單個文件下都會越寫越多，當我們想專注看一部分或者尋找某段代碼時就頗有困難了。一般這個時候我們都會把一些不重要的代碼段摺疊起來。但是手動用鼠標一個一個點擊效率是很低的。代碼摺疊快捷鍵在這種情況就非常實用了。
摺疊代碼快捷鍵
Mac:
Command+Option+[Windows/linux:
Ctrl+Shift+[
展開代碼快捷鍵
Mac:
Command+Option+]Windows/linux:
Ctrl+Shift+]
往上/下複製行「Copy Line Up/Down」
在寫代碼的時候，我們經常會編寫一些非常相似的代碼連續幾遍或者是先複製然後稍微更改一下。特別是在JS中的require或者import這種引入包的時候。如果我們需要選中一行然後複製，回車然後粘貼，這波操作確實不夠快呀，有沒有更快速的複製方式呢？有的！
Mac:
Shift+Option+⬆️ / ⬇️Windows:
Shift+Alt+⬆️ / ⬇️Linux:
Ctrl+Shift+Alt+⬆️ / ⬇️
當然，如果你不喜歡這個默認的快捷鍵，可以在快捷鍵列表中修改。
選擇單詞「Select Word」
很多時候在開發過程中，我們都會需要多個相同單詞（多個變量名）同時修改，可能是局部方法中的單詞，也可能是這個文件中的同名單詞的修改。比較古老的方法就是用全局搜索然後替換。
在VSCode中有一個更加快速和簡便的方法，並且可以讓你局部選擇或者是快速全部選擇。選中後就可以同時修改選中的單詞了。
局部選擇
首先選中你需要的單詞然後按下面的快捷鍵即可：
Mac:
Command+DWindows/Linux:
Ctrl+D
如果我們多次按下快捷鍵，編輯器會繼續往下找到相同的單詞，然後自動選中。
全局選中
一樣首先選中你需要的單詞，然後按下快捷鍵即可：
Mac:
Command+Shift+LWindows/Linux:
Ctrl+Shift+L
這個唯一不一樣的就是，這個會找到當前文件下的所有相同的單詞，並且選中。
跳轉到特定行數「Navigate to a Specific Line」
在排查錯誤的時候經常會用到的一個快捷鍵，我們需要找到當前文件下特定行的代碼。
Mac:
Command+GWindows/Linux:
Ctrl+G
🌟小技巧
結合我們上面學習到的，我們也可以先使用快捷鍵（Mac：Command+P）打開編輯器命令然後輸入:再輸入行數即可。
文件中跳轉特定符號「Go to Symbol in File」
這裏我講解一下符號指的是什麼，它就是在代碼中的方法、類或者是屬性。
所以在一個比較大的代碼文件中，這個快捷鍵會非常實用。能讓我們快速找到想要編輯的方法、屬性或者類！
Mac:
Command+Shift+OWindows/Linux:
Ctrl+Shift+O
🌟小技巧
如果文件中的
符號過多，我們可以在@後面加上:，就可以爲所有符號分類讓，我們更好找到需要的符號和位置。
項目中跳轉特定符號 「Go to Symbol in Workspace」
這個快捷鍵與文件中跳轉的雷同，唯一區別就是這個可以搜索出整個項目中的方法、類和屬性，並且快速跳轉到這些符號的位置。
Mac:
Command+TWindows/Linux:
Ctrl+T
刪除整個單詞「Delete Previous Word」
在我們打錯一個單詞的時候，我們經常都會連續按刪除鍵直到我們想要重新開始的地方。其實對我們程序員來說，打字都是飛快的，重新打過遠遠比一個一個字母刪除來的快的多。（有些童鞋可能還會用鼠標來選中要刪除的，其實在寫代碼的時候，可以不用鼠標儘量不用鼠標，這樣速度會更快哦）只要按下這個快捷鍵就可以整個單詞刪除掉。
Mac:
Command+DeleteWindows/Linux:
Ctrl+Backspace
按單詞選擇「Select by words」
爲了在編程中脫離使用鼠標，我們經常需要選中一行代碼中的幾個單詞，這個快捷鍵可以讓我們快速做到這樣的操作。
Mac:
Command+Shift+← / →Windows/Linux:
Ctrl+Shift+← / →
快速複製當前行「Duplicate Line」
用過IDE的基本都很熟悉這個操作，就是快速往下複製當前行的代碼。這個在編程過程中也是非常實用。
其實我們可以選中一段代碼，按下這個快捷鍵也可以往下複製整個內容哦。
Mac:
Command+Shift+DWindows/Linux:
Ctrl+Shift+D
刪除一行「Deleting a Line」
用於快速刪除一整行的代碼。
Mac:
Command+XWindows/Linux:
Ctrl+X
往上/下添加同時編輯「Add Cursor Above/Below」
用過SublimeText的同學應該都很熟悉這個功能。我們可以在多個位置添加鼠標編輯點，然後同時編輯。VSCode也有這樣的快捷鍵。
Mac:
Command+Option+↑ / ↓Windows/Linux:
Ctrl+Alt+↑ / ↓
🌟小技巧
如果想和上圖一樣，在屬性的單詞前添加好同時編輯鼠標點後，一下子即跳到所有屬性名的最後面，我們只需要先在所有名字前面加入同時編輯鼠標然後用一下快捷鍵即可：
Mac:
Command+→Windows/Linux:
Ctrl+→
多行選中同時編輯 「Column Selection」
這個快捷鍵需要配合鼠標一起使用。我們經常會在編寫代碼的時候選中一大串代碼進行編輯，這個時候這個快捷鍵就非常使用。
我們還可以按住這個快捷鍵，然後選擇我們需要同時修改的位置，然後多個鼠標位置同時編輯哦！
Mac:
Shift+OptionWindows/Linux:
Shift+Alt
修改“符號” 「Rename Symbol」
VSCode默認支持JavaScript和TypeScript的方法名、類名和屬性名等符號修改。在修改後，文件下引用到這些符號的地方都會被自動的同時修改。其他語言的支持需要插件。
Mac:
F2Windows/Linux:
F2
「待續」總結
這裏我已介紹完所有常用的快捷鍵和編輯器中的使用小技巧。很多需要學習快捷鍵的小夥伴們不可能一下子就會使用和記住。溫馨提示：所以可以先收藏本文章，當需要的時候就可以馬上搜索找到並使用。當我們用多了，也就自然而然熟能生巧了。
當我們習慣於使用這些快捷鍵，我們就會發現我們代碼編寫速度都會有所提升的。
下一篇VSCode高級玩家寶典，我會講解VSCode中的所有常用插件（包括前端/後端），敬請期待！
好文推薦
- 🔥《前端必看的8個HTML+CSS技巧》 — CSS是一個很獨特的語言。看起來非常簡單，但是某種特殊效果看似簡單，實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，重新燃起對前端排版和特效的熱愛和熱情！🔥
- 🔥《寫給想學和在學編程的你們，學習編程的7個好處》 — 其實選擇學編程是能改變人生的。可能起初很多人學編程，報了一個編程培訓班，爲了就是能拿到更高的工資或者有更好的工作環境。最後堅持着堅持着，最後會發現編程還會給我們帶來很多個人能力和技能上的提升。
- 🔥《5大法則助你 成爲更出色的開發者》 — 這篇文章傳授5大法則助我們成爲更出色的開發者，在衆多開發者中脫穎而出的訣竅，也會在我們的技術職業生涯中給我們很多的幫助。
- 🔥《用“易於改編”原則，提升編程水平，寫出更好的代碼》 — 無論新手還是資深開發者都會經常問一個問題，“怎麼寫好的代碼？”，要知道怎麼寫好代碼，首先我們要知道怎麼樣纔是好的代碼。要有明確的目標，才能知道如何達成目標。在《程序員修煉之道》中提到的“ETC Principle” – 易於改編原則。這個原則看似簡單，但是我們越是深入思考越是覺得“簡約而不簡單”。