VSCode 編輯器設定及外掛精選

• VSCode的安裝，提供了兩種安裝方式

  • 使用者安裝
    • 不需要管理員許可權。
    • 會被安裝在本機的AppData資料夾下。
  • 系統安裝
    • 需要系統管理員許可權。
    • 會被安裝在Program Files資料夾下。
  • 官方推荐「使用者安裝」模式。

• 進入設定面板 (圖形化的設定介面，也保留了JSON檔案為基礎的設定方式)

  • 方式一：工具列選單 [檔案]>[喜好設定]>[設定]
  • 方式二：快速鍵 ctrl + ,
  • 方式三：介面左下角齒輪圖示按鈕點選後，出現選單點選「設定」
    
    
  • 設定面板預設會呈現GUI介面，可切換至JSON文件設置介面做進階調整
    
    

• 編輯器初始設定項目

  ​​​​{
  ​​​​    // 停用程式碼全景縮圖檢視功能
  ​​​​    "editor.minimap.enabled": false,
  ​​​​    // 啟用連字字型 (搭配Fira Code字型效果)
  ​​​​    "editor.fontLigatures": true,
  ​​​​    // 可以透過「ctrl鍵 + 滑鼠滾輪」的方式，縮放程式碼字型大小
  ​​​​    "editor.mouseWheelZoom": true,
  ​​​​}
  

• 安裝程式碼的字型

  • Install Google 思源黑體 - Noto Sans TC
  • Install FiraCode: Monospaced font with programming ligatures
  • Install Cascadia Code
  • 若有安裝上述字型，請另外設定預設字型
    ​​​​​​​​{
    ​​​​​​​​    // 程式碼字型設定
    ​​​​​​​​    "editor.fontFamily": "Fira Code, 'Noto Sans TC Light', Consolas, 'Courier New', monospace",
    ​​​​​​​​}
    

• 外掛安裝方式

  • 利用左側工具列切換到「擴充功能」面板 (快速鍵：ctrl + shift + x)，可以鍵入外掛套件關鍵字找到想要安裝的套件
    
    
  • 一般只要點選該套件名稱右下角的「安裝」鈕，然後依介面提示點選「重新載入」鈕後，即可使用或啟用外掛套件

• Git外掛清單 (先確認是否有安裝 Git)

  Will保哥 - 初學者都該學會的 Git 版控技巧：Visual Studio Code 篇
  VS Code tips — The Git Graph extension

  • Git Extension Pack [國內作者 Will 保哥] (會一併安裝多個相關外掛)
    
    ​​​​​​​​{
    ​​​​​​​​    // Git專案會自動偵測遠端儲存庫(repo)是否有更新
    ​​​​​​​​    "git.autofetch": true,
    ​​​​​​​​    // 設定git bash為預設的terminal
    ​​​​​​​​    "terminal.integrated.defaultProfile.windows": "Git Bash"
    ​​​​​​​​}
    

• PHP外掛清單

  • PHP Productive Pack [國內作者 Winnie Lin] (會一併安裝多個相關外掛)
    
  • 裝外PHP外掛後，有一個設定會預設開啟，但這會對既有版控的專案造成影響，得取消其勾選。
    
    ​​​​​​​​{
    ​​​​​​​​    // PHP語法檢查時機
    ​​​​​​​​    "php.validate.run": "onType",
    ​​​​​​​​    // PHP執行檔設定
    ​​​​​​​​    "php.validate.executablePath": "C:\\laragon\\bin\\php\\php-x.x.x-Win32-vc15-x64\\php.exe",
    ​​​​​​​​}
    

  • Laravel Extension Pack [國內作者 Winnie Lin] (會一併安裝多個相關外掛)
    
    ​​​​​​​​{
    ​​​​​​​​    "emmet.triggerExpansionOnTab": true, // enable tab to expanse emmet tags
    ​​​​​​​​    "blade.format.enable": true,         // if you would like to enable blade format
    ​​​​​​​​    "[blade]": {
    ​​​​​​​​        "editor.autoClosingBrackets": "always"
    ​​​​​​​​    },
    ​​​​​​​​}
    

• AI輔助開發外掛清單

  GitHub Copilot in VS Code
  

  • GitHub Copilot
  • GitHub Copilot Chat
  • VS Code Speech 實現語音輸入
  • Chinese (Traditional, Taiwan) Language Support for VS Code Speech 語音輸入中文支援

• HTML/CSS外掛清單

  • HTML-Essentials (會一併安裝多個相關外掛)

    • 內含 Auto Complete Tag (會一併安裝兩個相關外掛，說明如下)
      • Auto Rename Tag

        在編輯HTML成對標籤時，修改其中一邊，另一邊會跟著修改

      • Auto Close Tag

        在編輯HTML的時，鍵入</時自動補齊結尾標籤

    • 內含 Highlight Matching Tag

      可以在成對的括號或html tag進行highlight，方便識別查找。

  • htmltagwrap

    對一段文字外圍包裏一層html tag元素 (快速鍵： alt + w)
    How to do tag wrapping in VS code?

  • IntelliSense for CSS class names in HTML
    
  • Bootstrap 3 Snippets (鍵入bs3會觸發選單)
  • Bootstrap 4 Snippets Tool (鍵入bs4會觸發選單)
    
  • Bootstrap 5 Quick Snippets (鍵入bs5會觸發選單)
    

• JavaScript外掛清單

  • JavaScript code snippets
  • jQuery Code Snippets

    在編輯javascript時，鍵入jq可以載入相關清冊並補齊想要的語法結構

  • (Optional) Angular Extension Pack [國內作者Will保哥] (會一併安裝多個相關外掛)
  • (Optional) Vue.js Extension Pack (會一併安裝多個相關外掛)

• 其他

  • Markdown Extension Pack [國內作者Will保哥] (會一併安裝多個相關外掛)
  • Path Intellisense
  • Change String Case (變換大小寫樣式) 常用快速鍵：ctrl + capslock
  • Chinese Lorem 中文字假文產生器
    • 輸入 ctlorem 按下 tab 或是 enter 即可產生 128 個字的中文假文
    • 也可以自行設定要產生的字數 ctlorem<字數> 後按下 tab 或 enter 即可
  • Code Spell Checker (英文字拼字檢查)
  • TODO Highlight
  • TODO Tree