---
tags: PHP, Laravel
---
# VSCode 編輯器設定及外掛精選

* VSCode基本知識
* 免費、開放原始碼、輕量級程式編輯器。
* 跨平台(Windows、MacOS、Linux都可以安裝使用)。
* 內建支援Git。
* IntelliSense(智慧提示)。
* 以Electron開發架構開發。Electron是基於HTML、CSS、JavaScript等Web技術堆疊而開發的。
* 具有豐富且規模快速增長的外掛生態。Extension Packs，方便一鍵安裝多個外掛程式。

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

* 進入設定面板 (圖形化的設定介面，也保留了JSON檔案為基礎的設定方式)
* 方式一：工具列選單 [檔案]>[喜好設定]>[設定]
* 方式二：快速鍵 `ctrl` + `,`
* 方式三：介面左下角齒輪圖示按鈕點選後，出現選單點選「設定」
* 設定面板預設會呈現GUI介面，可切換至JSON文件設置介面做進階調整

* 編輯器初始設定項目

    {
        // 停用程式碼全景縮圖檢視功能
        "editor.minimap.enabled": false,
        // 啟用連字字型 (搭配Fira Code字型效果)
        "editor.fontLigatures": true,
        // 可以透過「ctrl鍵 + 滑鼠滾輪」的方式，縮放程式碼字型大小
        "editor.mouseWheelZoom": true,
        // PHP語法檢查時機
        "php.validate.run": "onType",
        // PHP執行檔設定
        "php.validate.executablePath": "C:\\laragon\\bin\\php\\php-x.x.x-Win32-vc15-x64\\php.exe",
        // Git專案會自動偵測遠端儲存庫(repo)是否有更新
        "git.autofetch": true,
        // 設定git bash為預設的terminal
        "terminal.integrated.defaultProfile.windows": "Git Bash"
    }

* 安裝程式碼的字型
* [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外掛清單
> [Will保哥 - 初學者都該學會的 Git 版控技巧：Visual Studio Code 篇](https://www.facebook.com/will.fans/videos/1795494270479709/)
> [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>

* PHP外掛清單
* [PHP Productive Pack](https://marketplace.visualstudio.com/items?itemName=onecentlin.php-productive-pack) [國內作者 Winnie Lin] (會一併安裝多個相關外掛)<br>
* 裝外PHP外掛後，有一個設定會預設開啟，但這會對成既的有版控的專案造成影響，得取消其勾選。
* [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"
            },
        }

* 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 (ES6) code snippets
* jQuery Code Snippets
> 在編輯javascript時，鍵入jq可以載入相關清冊並補齊想要的語法結構
* (Optional) Angular Extension Pack [國內作者Will保哥] (會一併安裝多個相關外掛)
* (Optional) Vue.js Extension Pack (會一併安裝多個相關外掛)
* 其他
* Chinese Lorem 中文字假文產生器
> 
* 輸入 `ctlorem` 按下 tab 或是 enter 即可產生 128 個字的中文假文
* 也可以自行設定要產生的字數 `ctlorem<字數>` 後按下 tab 或 enter 即可
* Markdown Extension Pack [國內作者Will保哥] (會一併安裝多個相關外掛)
* Path Intellisense
* Change String Case (變換大小寫樣式) 常用快速鍵：`ctrl` + `capslock`
* Code Spell Checker (英文字拼字檢查)
* TODO Highlight
* TODO Tree