VSCode Mac實用快捷鍵、插件

背景：

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