前一篇提到好的 Editor / IDE 能夠讓你開發過程更有效率，而 VS Code 琳瑯滿目的插件就像手機能夠安裝各式各樣的 APP 使得手機的功能（能做的事）越來越多。

在開始寫 Code 前，先來開發環境 Set 一輪，實用的、虛花的擴充插件都來一點吧！

以下介紹我自己使用過覺得很棒的插件（礙於篇幅關係，每個插件直接標題附上連結，加簡短介紹，詳細內容就請自行點擊標題連結查看官方介紹囉）：

一、功能型實用插件

Server / 預覽 / Output / 相關

【Live Server】一鍵運行 Local Server

• 前端必裝，不用任何設定直接運行 Local Server

【Live Share】即時分享／共同編輯專案

• 類似 google doc/sheet 線上共同作業的 VS Code 版
• 可用於程式教學或 Pair programming
• 可設定共享者為唯讀或同時編輯

【Code Runner】運行程式碼輸出 Output

• 直接於下方面板 Output 結果
• 支援多種程式語言
• 

【Quokka.js】即時顯示輸出值（JS限定）

• 與 Code Runner 類似，但是是直接在程式碼後面帶出結果(即時運算)
• 

Git 相關（要有用 Git 的專案才有用）

【GitLens】查閱 Git 紀錄、程式碼提示前次 commit 資訊

• 程式碼當前行後提示最後編輯者、最後commit資訊
• 側欄依所在行 / 檔案查閱 Commit 紀錄、一鍵Compare
• 

【Git History】查閱 Git 歷史紀錄

• 查閱 commit / compare
• 

Git Lens、Git History 還有很多實用功能，團隊開發時超好用，有興趣再自行去深入運用吧~)

【Git Ignore】一鍵將檔案加入 Git ignore

• 對檔案按右鍵就有選項能夠直接加入 ignore（但使用率大概不高）

備忘 / 筆記

【Bookmarks】程式碼書籤

• 如書籤功能一樣，將任一行加入書籤，列表於左側，可透過書籤快速跳至行。超實用 der~
• 

二、輔助提示插件

視覺提示

【Indent Rainbow】以色塊顯示縮排

【Vscode Pigments】以色票顯示色碼

【Bracket Pair Colorizer】顏色區分成對括弧

• 常被 JS 的各種括號看到眼花嗎，讓他們有成對的漂亮顏色吧！
• 

自動補全型插件

【Auto Rename Tag】html 後標籤自動同步 & 修正

• 編輯 html Code 時，自動補上後標籤
• 修改前標籤時，後標籤也將自動變更

【VS Color Picker】檢色器 / 選色器

• 編輯色碼時可直接使用選色器
• 還有滴管(吸色器)功能
• 

【cdnjs】快速搜索並引入CDN

• 直接透過命令行搜索想引用的CDN(含各版本、引入方式)
• 

【Snippet Creator】自定義片段程式碼

• 能自定義常用的程式碼片段並設定對應簡寫
• 例如定義 "bsc4" 為 bootstrap 的四欄版型範本程式碼，只要輸入 "bsc4"、Tab　鍵就可以帶出來了

Path Intellisense

三、個人化設定&虛花的插件

話說工程師人生每天都要開啟的寫 Code 畫面，一定要設定的讓自己感到賞心悅目，畢竟長時間盯著螢幕已經夠讓目睭疲憊了，以下介紹屬於編輯器的介面樣式。雖說不是上述那種實用型的功能，但我自己覺得也是滿重要der~

【Power Mode】

• 輸入程式碼時會出現噴花效果，參考官方的圖：
• 
• 但預設文字會抖動，挺傷眼，所以在　setting.json檔中　關閉 Shake 效果：

      "powermode.enabled": true,
      "powermode.enableShake": false,
  

• 覺得好動感、好療癒～
  其實看久習慣就會忘記他的存在，直到別人第一次來看座位看到螢幕時會發現「哎喲，妳的Code會噴花ㄟ」XDD~

【Material Icon Theme】精緻的檔案圖標

佈景主題

【One Monokai Theme】

• 本篇文章展示的圖為此佈景

【1337 Theme】

Setting.json - 自訂字型 Style

在 Setting.json 可自定義細節設定，如下定義文字大小、字型、使用主題。

    "editor.fontSize": 12,
    "editor.fontFamily": "'Menlo-Regular', monospace"
    "workbench.colorTheme": "One Monokai",

好了~以上就是我個人目前有在使用的實用套件，雖然上述介紹了許多插件，但也不要盲目地狂裝，發現不適用或使用率其實不高的話就移除吧！不然你會發現你的 VS Code 越來越不輕量了，及出現一些奇怪的反應卻搞不清楚是什麼插件造成的（切身之痛）。

用不用插件很看個人開發習慣，有人能夠善用工具使自己寫 code 過程更加上手，也多的是不裝任何插件的高手，畢竟插件只是輔助工具，與程式寫得好不好 / 快不快並沒有絕對關係。

而我個人是愛用工具那一派的（應該看得出來吧 XD），那就選擇適合自己的插件開發，好好應用、加速開發吧！
。

歡迎大家留言分享自己的愛用插件！

個人 Blog: https://eudora.cc/