【Web】VScode技巧+實用套件

VScode

 發表於 2024-01-02  |  1 分鐘  |  139 個字

【Web】VScode技巧+實用套件

VScode

 發表於 2024-01-02  |  1 分鐘  |  139 個字

快捷鍵用法

  1. 快速移動程式碼：在程式碼上按住 option 鍵＋上下鍵

  1. 快速跳躍字詞：按住 option 鍵＋左右鍵

  1. 快速選取整行程式碼：在該程式碼行按住 command ＋ L

  1. 開啟設定：command+“逗點”，若要進入 setting.json 檔點右上角 file 圖示

  1. 在 JS 片段中使用 Emmet 輸入，進入 setting.json 加入以下程式碼:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "emmet.includeLanguages": {
    "nunjucks": "html",
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "jade"
  },
  "emmet.triggerExpansionOnTab": true,
  "prettier.singleQuote": true,
  "editor.minimap.enabled": false
}

  1. 複製程式碼：只要游標在程式碼尾端 command ＋ C 即可複製

  1. 設定縮排為“2 空格”，點擊 vscode 最底下的按鈕調整：
    • 第一步：先將縮排轉換為定位點
    • 第二步：使用空格進行縮排，調整為 2

  1. 快速選取程式碼：
    • 第一步：進入設定搜尋"展開選取項目"
    • 第二步：設定快捷鍵“control ＋ shift ＋ →”

  1. 快速重新命名標籤頭尾名：
    • 第一步：進入設定搜尋"重新命名符號"
    • 第二步：設定快捷鍵“control ＋ F”

  1. 資料夾路徑重疊修改：進入“設定”，搜尋“Compact Folders”，取消勾選

實用的套件

  1. Chinese Language Pack for Visua
    • 說明：讓 vscode 介面變成繁體中文

  1. Live Server
    • 說明：能建立伺服器，在瀏覽器查看網頁
    • 用法：
      1. 對 html 檔右鍵“Open with Live Server”
      2. 點擊 vscode 最下方"Go Live"就可以每次編輯後存檔並自動刷新頁面

  1. Atom Keymap
    • 說明：可快速編寫 JS、切換視窗
    • 用法：
      1. command ＋ 1,2,3 可快速切換視窗
      2. 在編寫 JS 片段時，輸入“log”＋ tab 鍵，可快速展開成"console.log"

  1. Prettier - Code formatter
    • 說明：快速整理程式碼
    • 用法：
      1. option ＋ shift ＋Ｆ可快速整理程式碼
      2. 若要將雙引號改為單引號，進入 setting.json 輸入：

1

"prettier.singleQuote": true,

  1. Code Spell Checker
    • 說明：自動檢查英文拼字有無錯誤
    • 用法：安裝後，在編寫錯誤的英文單字底下，會自動顯示藍色波浪

  1. indent-rainbow
    • 說明：讓code縮排呈現彩虹

css 

其他相關