---
tags: PHP, Laravel
---
# 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](https://fonts.google.com/noto/specimen/Noto+Sans+TC)
* [Install FiraCode: Monospaced font with programming ligatures](https://github.com/tonsky/FiraCode)
* [Install Cascadia Code](https://github.com/microsoft/cascadia-code)
* 若有安裝上述字型，請另外設定預設字型

        {
            // 程式碼字型設定
            "editor.fontFamily": "Fira Code, 'Noto Sans TC Light', Consolas, 'Courier New', monospace",
        }

* 外掛安裝方式
* 利用左側工具列切換到「擴充功能」面板 (快速鍵：`ctrl` + `shift` + `x`)，可以鍵入外掛套件關鍵字找到想要安裝的套件
* 一般只要點選該套件名稱右下角的「安裝」鈕，然後依介面提示點選「重新載入」鈕後，即可使用或啟用外掛套件
* Git外掛清單 (先確認是否有安裝 [Git](https://git-scm.com/))
> [Will保哥 - Git 新手上路不求人：一行命令都不用輸入的 Git 版控操作技巧](https://youtu.be/E_Nd0anNI6M?si=jJAmmW7pfbONLVn2)
> [VS Code tips — The Git Graph extension](https://youtu.be/u9ZQpKGTog4)
* [**Git Extension Pack**](https://marketplace.visualstudio.com/items?itemName=doggy8088.git-extension-pack) [國內作者 Will 保哥] (會一併安裝多個相關外掛)<br>

        {
            // Git專案會自動偵測遠端儲存庫(repo)是否有更新
            "git.autofetch": true,
            // 設定git bash為預設的terminal
            "terminal.integrated.defaultProfile.windows": "Git Bash"
        }

* PHP外掛清單
* [**PHP Productive Pack**](https://marketplace.visualstudio.com/items?itemName=onecentlin.php-productive-pack) [國內作者 Winnie Lin] (會一併安裝多個相關外掛)<br>
* 裝外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](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-extension-pack) [國內作者 Winnie Lin] (會一併安裝多個相關外掛)<br>

        {
            "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](https://code.visualstudio.com/docs/copilot/overview)
* [**GitHub Copilot**](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
* [**GitHub Copilot Chat**](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat)
* [VS Code Speech](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-speech) 實現語音輸入
* [Chinese (Traditional, Taiwan) Language Support for VS Code Speech](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-speech-language-pack-zh-tw) 語音輸入中文支援
* [[參考] will保哥：最佳 GitHub Copilot 設定](https://github.com/doggy8088/github-copilot-configs)
* 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?](https://stackoverflow.com/questions/40155875/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**](https://marketplace.visualstudio.com/items?itemName=MoazIrfan.javascript-code-snippets)
* [**jQuery Code Snippets**](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)
> 在編輯javascript時，鍵入jq可以載入相關清冊並補齊想要的語法結構
* (Optional) Angular Extension Pack [國內作者Will保哥] (會一併安裝多個相關外掛)
* (Optional) Vue.js Extension Pack (會一併安裝多個相關外掛)
* 其他
* [**Markdown Extension Pack**](https://marketplace.visualstudio.com/items?itemName=doggy8088.markdown-extension-pack) [國內作者Will保哥] (會一併安裝多個相關外掛)
* [**Path Intellisense**](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
* Change String Case (變換大小寫樣式) 常用快速鍵：`ctrl` + `capslock`
* Chinese Lorem 中文字假文產生器
> 
* 輸入 `ctlorem` 按下 tab 或是 enter 即可產生 128 個字的中文假文
* 也可以自行設定要產生的字數 `ctlorem<字數>` 後按下 tab 或 enter 即可
* Code Spell Checker (英文字拼字檢查)
* TODO Highlight
* TODO Tree