背景：

在 Build 2015 大會上，微軟除了釋出了 Microsoft Edge 瀏覽器和新的 Windows 10 系統外，最大的驚喜莫過於宣佈推出免費跨平臺的 Visual Studio Code 編輯器了！隨著2019年的到來，Stack Overflow對2018年的IT生態調查顯示：

Visual Studio Code超過Visual Studio一躍成為榜首

，成為“最受歡迎的開發環境”，沒有之一！

Visual Studio 與 Visual Studio Code 區別： Visual Studio 是整合開發環境， 只能執行在windows + mac OS；Visual Studio Code 是一款編輯器， 支援跨平臺，在所有作業系統執行；

本文件主要分享 VSCode 在Mac 作業系統， React 技術棧開發的實用快捷鍵 及 外掛；

實用快捷鍵

1。command + K， command + S 開啟快捷鍵編輯頁；

說到VSCode 不得不提的快捷鍵指令，可以檢視、設定快捷鍵；

自定義快捷鍵：如我們寫程式碼時定義常量需要用全大寫， 快速切換選中變數的大小寫的快捷鍵很實用，個人設定如下：

command + K， command + U 變大寫

command + K， command + L 變小寫

2。command + P 快速開啟檔案；

不用點選左側樹形選單，鍵盤操作快速找到待編輯檔案；

3。command + = 和 command + -組合來進行縮放；

快捷鍵調整字型大小， 快速切換到自己最舒服的字型尺寸；

4。command + ，開啟使用者設定；

VSCode 設定包括使用者設定（全域性）， 和工作區（當前專案）設定， 因為我們開發專案對應的技術棧可能不同， 所以推薦使用工作區設定。React 開發推薦工作區設定：

{

// 設定 react render 中 react 標籤智慧提示，快速補全html

“emmet。includeLanguages”： {

“javascript”： “javascriptreact”

}，

// 設定 react render 中 html 程式碼可摺疊

“editor。foldingStrategy”： “indentation”

}

5。control + ~ 開啟、關閉終端；

React 前端開發， 編譯指令碼、樣式等是必不可少的操作， 可在當前開發區中快速開啟當前專案路徑下的終端，輸入指令完成前端檔案編譯。

編輯器內開啟終端編譯， 不用切換視窗可大大提高開發體驗：

支援多終端視窗，前後端執行指令同屏顯示：

6。其他；

其他日常編碼常用快捷鍵：

command + shift + N 開啟新視窗；

command + N 新建檔案；

command + \ 切出新編輯器（最多三個）

command + W 關閉當前檔案

command + S 儲存當前檔案

command + option + S 儲存所有檔案

command + F 當前檔案查詢

command + option + F 當前檔案替換

command + D 當前檔案查詢選中單詞下一目標

command + C 複製

command + V 貼上

command + X 剪下

command + Z 回退

command + shift + Z 前進

command + shift + K 刪除當前行程式碼

option + ↓ 當前行程式碼下移

option + ↑ 當前行程式碼上移

shift + option + ↓ 當前行程式碼整行複製到下一行

shift + option + F 格式化程式碼

強烈推薦的快捷鍵， 特別適用於統一前端小組成員程式碼風格。

不同的人，寫JS縮排、空格等不一樣， 如果小組統一使用VSCode後每個人都習慣用該快捷鍵格式化程式碼，將更利於程式碼維護。

前端程式碼不需外掛就能支援 go to defination， 滑鼠移動至變數名 或 檔名 ， command + 單擊 即可跳轉至對應檔案：

實用外掛

VSCode的外掛非常多， 但個人覺得真正實用的外掛有：

Auto Close Tag

自動新增HTML / XML關閉標籤（必備）

Path Intellisense

自動提示檔案路徑，在HTML 使用a標籤的href 或者 require， import 新檔案時能智慧提示；

參考連結：

vscode: Visual Studio Code 常用快捷鍵

在用VSCode? 看完這篇文章, 開發效率翻倍!

vscode 前端外掛推薦