Shortcut

介面相關

快捷鍵	功能
Ctrl + B	打開檔案總管 / 關閉側邊欄
Ctrl + ~	顯示 / 隱藏下方面板
Ctrl + Shift + ~	新增終端機頁籤
Ctrl + \	向右分割檢視區
Ctrl + K Ctrl + \ (建議改成 Ctrl + Alt + \)	向下分割檢視區
Ctrl + Shift + N	開啟新 VS Code 分頁

編輯相關

快捷鍵	功能
Ctrl + D	選取所在輸入點的字詞
Ctrl + F	搜尋當前頁面關鍵字
Ctrl + Shift + F	在所有檔案中搜尋關鍵字
Ctrl + G	前往當前頁面某一行
Ctrl + H	取代當前頁面關鍵字
Ctrl + Shift + H	在所有檔案中取代關鍵字
Ctrl + W	關閉頁籤
Shift + Alt + →	擴張選取範圍
Shift + Alt + ←	縮小選取範圍
Shift + Alt + ↑	向上複製當前行
Shift + Alt + ↓	向下複製當前行
按住 Alt + 滑鼠左鍵	多選數個單字
Ctrl + Alt + ↑ / ↓	向上 / 下追加編輯游標
F2	重新命名游標當前變數名稱，並更新該檔案所有出現之處
Ctrl + F2	選取所有檔案當前相符單字
Ctrl + /	註解當前選取的單 / 多行
(多選狀態下)	如同 Excel 多選儲存格，可同時覆蓋或方向鍵同時移動游標

資料夾 / 工作區相關

快捷鍵	功能
Ctrl + Shift + T	開啟剛才關閉的檔案
Ctrl + E / Ctrl + P	開啟當前專案的某檔案
Ctrl+K Ctrl+O	開啟專案資料夾
Ctrl + R	開啟最近的工作區
Ctrl + N	在當前專案新增檔案

其他擴充套件相關

快捷鍵	功能
Ctrl + I	觸發 GitHub Copilot Chat
Ctrl + Enter	在當前位置要求 GitHub Copilot 列出所有建議
Ctrl + Alt + R (建議改成 Ctrl + Alt + Enter)	發送 REST Client 測試 API 請求

Extension

• git-commit-plugin with gitmoji

  VS Code 最方便的 Git Commit Extension

  • 功能介紹

    互動式介面創建約定式提交

    

    點擊 Complete 後即自動產生 commit 格式

    使讓多人協作 repo 時，commit 風格統一

• GitLens

  • 顯示當前行的 git blame (最後一次編輯的人是誰、commit 訊息)

    

  • 選取兩個 commit 進行 diff 比較

    

• Git Graph

  • 以圖像化表示 branch 跟 commit 紀錄，方便直觀進行 git command 快捷操作

    

• Better Comments

  註解顏色分類功能 使用方式可自定義 範例：\

  • setting.json

    "better-comments.tags": [
        {
          "tag": "!",
          "color": "#d9444a",
          "strikethrough": false,
          "backgroundColor": "transparent",
          "bold": true,
          "italic": false,
          "underline": false
        },
        {
          "tag": "?",
          "color": "#f5c018",
          "strikethrough": false,
          "backgroundColor": "transparent",
          "bold": false,
          "italic": false,
          "underline": false
        },
        {
          "tag": ">",
          "color": "#fff",
          "strikethrough": false,
          "backgroundColor": "transparent"
        },
        {
          "tag": "-",
          "color": "#b3aff7",
          "strikethrough": false,
          "backgroundColor": "transparent",
          "bold": true
        },
        {
          "tag": "//",
          "color": "#474747",
          "strikethrough": true,
          "backgroundColor": "transparent",
          "bold": false,
          "italic": false,
          "underline": false
        },
        {
          "tag": "todo",
          "color": "#FFF",
          "strikethrough": false,
          "backgroundColor": "#21ba45",
          "bold": true,
          "underline": true
        }
      ],

• EditorConfig for VS Code

  IDE 的 code 規範設定工具，協作專案時統一 code 風格

• ESLint

  JS 的 Linter，依照指定風格進行程式碼語法檢測

• Prettier - Code formatter

  網頁前端各種語言 (HTML, CSS, JS, TS, JSON, Vue) 等 都能自訂規則後自動格式化程式碼

• Code Spell Checker

  自動檢測英文單字是否拼錯，可於 setting.json、workspace 加入例外清單 (可在報錯訊息右鍵選擇)

• HTML CSS Support

  HTML 與 CSS 自動完成功能

• i18n Ally

  開發前端需要多國語言，使用 i18n 時使用，集成參數的多語言對照清單，編輯、翻譯功能 可參考設定教學 🔗

• indent-rainbow

  縮排區段以不同顏色為底色區隔，可以自行選擇要不要搭配 setting 中的 bracket pair (線段標記加強效果)

  

• Path Intellisense

  輸入相對路徑時自動顯示檔案清單

  

• TabOut

  可以使用 tab 跳出自動完成的括號配對，如：(), {}, [ ] , '', " " 等 皆可用 tab 鍵跳出

• vscode-icons

  擴充顯示更多類型檔案的 icon

  

• GitHub Copilot

  AI 自動預測程式碼，支援絕大多數程式語言，打註解亦可生成 code，用 tab 自動完成

  取得 Github Education 可以免費使用 Github Copilot

• Quasar Docs

  使用 Quasar Framework (Vue 3 最佳的 Framework) 必裝 可以在 VS Code 看 Quasar 文檔

• Import Cost

  可以在 import 時檢查造成的檔案大小負擔

• Console Ninja

  可以在 console.log 等輸出時在編輯當前行看到輸出結果

• 盤古之白

  自動替你在文件中所有的中文字和半形的英文、數字、符號之間插入空白。