背景：

在 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 前端插件推薦


推薦閱讀：
相关文章