VS-Code 一些實用的快捷鍵

12月 14 2021 VS-code

一樣是快捷鍵系列。

Windows

Ctrl + G 跳到某一個行數
Ctrl + E Ctrl + P 切換到某個檔案的分頁
Ctrl + E + @[變數名稱 / Tag / 內容] 切換到某個分頁的某個段落
Ctrl + L 選取整行內容
Ctrl + X Shift + Delete 刪除整行內容
Shift + 方向鍵 選取文字
Ctrl + 方向鍵 單字間跳躍（若要選取的話就加上 Shift）
Home鍵 跳到句子頭端
End鍵 跳到句子尾端
Ctrl + D 選取同名字串
Ctrl + Shift + L 選取所有同名字串
Alt + 方向鍵 移動程式碼區塊（可搭配選取內容使用）
Alt + 左右方向鍵 切換分頁
Alt + Shift + 上或下 複製程式碼區塊（可搭配選取內容使用）
Alt + Shift + R 打開資料夾總管
Alt + Z 自動換行開關（關掉後就不會隨著寬度換行）
Ctrl + H 搜尋內容 + 取代內容
Ctrl + Shift + E 切換到檔案面板（側邊欄）
Ctrl + Shift + F 切換到搜尋面板（側邊欄）
Ctrl + N 新增檔案
Ctrl + K，M 選擇檔案的程式語言
Ctrl + Shift + O 搜尋變數、函式
F2 修改變數或函式的名稱（不會改到字串）（記得先選取）
F12 查看某段函式的內容
Ctrl + ~ Ctrl + J 打開或關閉終端機
Ctrl + / 註解
Alt + Shift + A 多行註解
Ctrl + B 打開或關閉側邊攔
Shift + Alt + F 對內容排版
Ctrl + Shift + M 查看有 Bug 的分頁
Ctrl + \ 切割視窗
Ctrl + ， Ctrl + 。 快速標點符號
Ctrl + K + L 摺疊或展開一個區塊的內容
Ctrl + K，W 關閉所有分頁
Ctrl + K + U 關閉所有「已儲存」的分頁
Ctrl + Shift + T 復原分頁（只回復最後一個關掉的分頁）
Ctrl + M 把 tab 鍵變成 focus 功能（就是 tab 的預設功能）
Ctrl + K + S 存檔所有分頁

Mac

Command + Option + up/down 多個游標
Option + up/down 移動程式碼
Command + P 切換分頁
Command/Fn + left/right Home 鍵和 End 鍵的功能
Command + top/bottom 跳到檔案的起始位置/終點位置（可搭配 shift 選取）
Command + Shift + L 選取所有相同的文字
Command + L 選取整行
Command + Shift + left/right 等於 Ctrl + L 的效果
Option + esc 或 command + i 可以自動顯示相關的 value 或 props
Command + K + V 打開 markdown preview 視窗
Option + Command + S 存擋所有分頁
Shift + Command + . 打開 breadcrumb，並且用 ← 和 → 來移動位置
Option + Command + click 把 definition 分割到新分頁
Command + Shift + O 搜尋函式 or 變數的 popup
Shift + F12 打開某個變數或函式的所有 reference popup
F12 跳到 reference 或 definition 的位置
F8 跳到 Linter 的錯誤位置
Command + Shift + M 打開 Linter 錯誤列表
Ctrl + g 跳到指定行數
Command + j toggle panel 收合（terminal）
Command + \ 分割視窗（垂直）
Command + 1 or 2 or 3... 切換到不同的分割視窗
Command + K, Command + \ 分割視窗（水平）
Command + Option + ← / → 切換 Tab 頁面（也可以把游標切換到分割視窗）
Command + Option + [ / ] 收起 / 展開程式碼區塊
Command + Shift + \ 跳到起始 bracket 或結尾 bracket（跟 vim 的 % 一樣功能）
Command + Shift + E 把游標移到 Side bar 或 Editor
Command + Shift + F 打開搜尋側邊欄
Space 打開在 Sidebar 中選取的檔案
Option / Control + Enter 以分割視窗開啟分頁
Command K + Command I 彈出 Symbol 的型別內容（滑鼠 hover 會彈出來的那個）
Option + F5 跳到下一個更新的位置（Git）
Command + K + I 觸發 hover 效果
Command + . 觸發 code action 選項（Quick fix）

這邊的詳細資訊可以參考 VS-Code 的官方文件介紹。

Emmet 的設定

如果想在 JS 的 template string 中使用 Emmet，可以加上這段設定：

// 要包含的語言（預設應該是只有 HTML吧）
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,

用 CLI 打開 VS-Code 的方式

首先先用 VS-Code 添加環境變數 Command + Shift + P 搜尋 shell，然後 Enter 看到 OK 就好了。

打開整個資料夾：

code .

打開指定檔案：

1	code file.js

只打開 VS-Code：

code --

更改左側資料夾的顯示方式

原本是長這樣：

folder-setting-before

但你可能會希望是這樣：

folder-setting-after

這時候只要新增一項設定就好：

1 2	// 預設是 true "explorer.compactFolders": false,

搞定！

顯示提示內容

在使用 trigger suggestion 的時候你可能會想看他的 detail，像這樣：

show-suggestion-detail

不過因為預設的快捷鍵跟 Mac 有衝突，所以建議能把 toggleSuggestionDetails 調整一下：

toggle-suggestion-details

幫 function 加上說明

只要輸入 /** 就會自動產生像這樣的 snippe

/**
 * 加入購物車的函式，讚吧！
 * @param {Number} num 產品的 id
 *
 */
function addToCart(num) {
  console.log(`add item ${num} to cart.`)
}

module.exports = addToCart

可以加入說明文字，而 {Number} 的部分代表參數 num 的資料型態。

接著在使用這個 function 的地方就會出現對應提示：

function-comment

我的 VS-Code 設定檔

{
  "workbench.panel.defaultLocation": "bottom",
  "workbench.colorTheme": "Winter is Coming (Dark Blue - No Italics)",
  "workbench.iconTheme": "material-icon-theme",
  // status bar 的設定
  "workbench.colorCustomizations": {
    "statusBar.background": "#1A1A1A",
    "statusBar.noFolderBackground": "#212121",
    "statusBar.debuggingBackground": "#263238"
  },
  // 通用配置
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "'JetBrainsMono Nerd Font', Monaco, 'Courier New', monospace",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.fontFamily": "'JetBrainsMono Nerd Font', Monaco, 'Courier New', monospace",
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.letterSpacing": 1,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.suggest.showStatusBar": true,
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 120,
  "prettier.singleAttributePerLine": true,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "formattingToggle.affects": ["editor.formatOnSave"],
  "explorer.compactFolders": false,
  "explorer.fileNesting.enabled": false,
  "typescript.preferences.useAliasesForRenames": false,
  "javascript.preferences.useAliasesForRenames": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "liveServer.settings.donotShowInfoMsg": true
}

有修改的快捷鍵

Go forward：Command + ]
Go back：Command + [
Indent line 移除
Outdent line 移除