Visual Studio Code擴充套件 (VS Code Extensions)

插件掛戴的多，會影響處理的效能，建議沒用到的不啟用。
像是重復功能的不要多開啟，例如語法高亮選一種就好，這樣才不會使得 VS Code 重復處理同樣的執行容容，也才不會讓電腦效能吃太重。

標籤強化

Auto Close Tag

• 插件連結
• 自動產出對應的 HTML 開始與結束標簽

Auto Rename Tag

• 插件連結
• 自動重命名配對的 HTML / XML 標籤，針對堂結尾標簽也可同步修改

AutoFileName

• 插件連結
• 這個插件使得開發者在 require 本地文件時支持基於輸入的文件路徑的智能補全。

IntelliSense for CSS class names in HTML

• 插件連結
• 針對 HTML 內所連結的 css 路徑，引用相關的 class name
• 可走 bootstrap CDN 後，配對相關的 Class Name，不過要在專案資料夾下，才可以生效使用提示功能。

SCSS Everywhere

• 插件連結
• 原名 IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS
• 與上套 IntelliSense for CSS class names in HTML 不同作者之優化設計，比前一個更強大優良的版本且支援更多程式語言，可直接取代 IntelliSense for CSS class names in HTML，二套選一套使用。

格式高亮與提示

HTML SCSS Support

• 插件連結
• 智能補全在 HTML、 vue、 .net 等使用 (佈局侷限具體看文檔)
• 顏色提示會和 css 提示重複。

20210311 附記：記得以前可針對 jade(pug) 的格式做 css 的提示 (還有簡介影片 VSCode Extensions – HTML CSS Support)
但在新版的 V1.10.2 無法針對 jade(pug) 的格式做 css 的提示，改用舊版 v0.2.3 使用下 css 的提示沒有問題可正常帶出。

HTML to CSS autocompletion

• 插件連結
• 在 CSS 檔中輸入完 .className 之後，滑鼠移到上面可以出現提示，點按提示後可以跳往指定的 HTML 與 PHP 對應的元素上。
• 可透過快速鍵 cmd + p 輸入 VSCode 的插件指令，一次開啟所有相關樣式的 HTML 與 PHP 檔案。

HTML CSS Support

• 插件連結
• 智能提示 CSS 類名以及 id
• ** jade & pug 可啟用樣式名稱提示。

Beautify

• 插件連結
• javascript, JSON, CSS, Sass, 與 HTML 格式化

Beautify css/sass/scss/less

• 插件連結
• css / sass / less 格式化
• 在 Less 內使用 opt + (shift) + f，就可以將格式自動化處理目前的排版。

Less IntelliSense

• 插件連結
• 強化 Less 變量 (變數) 與混合提示。

如果有拆分 Less 檔的話，此插件可以改善 Less 變數跨檔無法取用的問題。

Sass Variables Helper

• 插件連結
• 無法直接預設執行，需要指定對應的色彩變數路徑。

透過 // COLORS 開頭與 // END COLORS 結尾包著色彩變數區域。

色彩變數如果在色碼後加上 !default 會讓 vscode 面版色彩顯示不正常，但可以顯示取得的資料名稱。

cssrem

• 插件連結
• VS Code 裡 CSS px 轉 rem 的單位數值插件，在輸入 CSS 屬性數值時，例如 12px 後會在帶出提示 .75rem 的提示出來選用轉換。
• 參數設定：
  • cssrem.fixedDigits px 轉 rem 小數點最大長度，預設值是 6。
  • cssrem.autoRemovePrefixZero 自動移除 開頭的前綴，預設值： true。（不想看到 0 預設值去掉）

1. 如果全站全域的樣式，不用考慮到在各個斷點在 Root 的根數值，可以統一使用同一組的話，可以直接使用此套件選用較直覺與直接。
2. 如果要針對各斷點處理與換算 xp 與 rem 數的數值，使用 px to rem 套件會比較彈性，不過要注意算的基本 px 數值。

px to rem

• 插件連結
• 可針對單一屬性單位數值轉換，也可一次多選做疊加轉換，請見官方連結。
• 快速鍵：
  • Alt+Z Px to rem, and rem to px. 直接由選定的字串單位 px to rem, and rem to px.
  • Alt+S 出現一個輸入框要求輸入一個新的 px 轉換 rem 的數值，這和 settings.json 預設不定，透過此設定後再使用 Alt+Z 快速鍵就會轉換後就不一樣，主要是基準數值被換過了。
• 參數設定：
  • px-to-rem.px-per-rem 預設數值是 16px
  • px-to-rem.number-of-decimals-digits maximum number of decimals digits a px or rem can have
  • px-to-rem.only-change-first-ocurrence
  • px-to-rem.notify-if-no-changes

vscode-caniuse

• 插件連結
• CSS 支援瀏覽器版本與相容性

indent-rainbow

• 插件連結
• 縮排的彩虹色條，使用彩虹色可於對齊行，方便進退行數對齊。

Bracket Pair Colorizer

• 插件連結
• 程式的時候常會有多個括弧，括弧內的程式碼可能非常多行，會搞不清楚括弧括起來的範圍究竟有多大，多層括弧的情況下也會搞不清楚程式碼是屬於哪層的，因此我們需要用顏色或線條的方式來標器與強調，這款擴充功能（延伸模組）就能幫助做到分辨撰寫程式的層數。

Auto Comment Blocks

• 插件連結
• 為大多數正式程式語言提供 Javadoc 樣式的多行註釋和單行註釋塊的區塊註釋。

VSCode Color Info

• 插件連結
• 提供你在 CSS 中使用顏色的相關資訊。

TabNine

自動補齊後續程式碼，支援 23 種程式語言、5 種編輯器。
VSCode 擴展連結
官方頁面：https://www.tabnine.com/

Prettier – Code formatter

• 程式碼格式化工具，VSCode 預設可使用 Alt + Shift + F 格式化程式碼，可以套用自己的 Prettier 設定，透過這個工具可以讓 Vue.js 或是 Vue-cli 做到程式碼自動排版。
• 插件連結
• 參考設定文章：
  • Vue.js – 使用 ESLint + Prettier 整理程式碼
  • 在 VS Code 使用 Prettier 排版 Vue 程式碼

Prettier+

和上一套差不多，對過可以配合 npm 安裝套件將 node 模組裝在專案資料夾中，使用指令如下。

VSCode 擴展連結
在 prettier 格式化指令工具中，還有另外的指令擴充 prettier /plugin-pug GitHub 連結。

VSCode 專案中加入 NPM 套件後，就可以滑鼠右鍵 > 文件格式化方式 > 選 Prettier – Code formatter
又或是直接設定預設式器搵定 Prettier – Code formatter，之後專案內的格式化快速鍵 Option + shift + G 就可以自動針對 jade 或是 pug 檔格式進行格式化。

也可將 npm 套件，可以在全城使用指令指定 pug 或 jade 檔，進行自動化格式。不過在 VSCode 中使用沒試成功。

npm install --global prettier @prettier/plugin-pug

1	npm install --global prettier @prettier/plugin-pug

編譯工具 (樣版語言、樣式轉譯)

scss-scan

• 插件連結
• 掃描專案資料夾中的 .scss 檔的 scss 變數與 mixins 和占位符。
• 檔案拆分時會有沒載入函式、變數、方法等等，使用重讀快取的方式來確保取得。

如果要取用 node_modules 資料夾內或是自訂的的路徑，可以在 "scss-scan.customPaths" 設定，例如：

Live Sass Compiler

• 插件連結
• 支援即時編譯 SASS / SCSS 成 CSS
• 自動生成一般的 .css 樣式表與偵錯用的 .css.map。
• 安裝完成後就可以在下方 VSCode 狀態列找到 Watch Sass，點開後即可開啟即時編譯的功能，每次儲存都會編譯一次！
• 可以自定路徑與輸出編譯要不要處理壓縮與處理註解，相關說明參考Live Sass Compiler 官方文件

Easy Compile

Easy Compile – 文件與相關功能

• 插件連結與 GitHub 連結
• JavaScript 處理核心 UglifyJS，可以用來壓縮與針對程式拆分檔做 sourceMap 除錯使用，參考 compress-options 連結，JavaScript 的操作方法 easycompile.typescript {}
• 用來將 Less (easycompile.less {})、Sass / Scss ( easycompile.sass {})、CSS (easycompile.css {}) 編譯與壓縮處理，有個各的操作方法，更多細部設定可以參考 GitHub REDAME 的說明。

Easy Compile – 設定 Scss 處理拆分檔與瀏覽器相容性編譯

• "easycompile.sass": {}：是在 VSCode 擴充裡的使用方法。
• "sourceMap": true,：是否使用 sourcMap 功能，預設是 false 不啟用。
• "out": "${workspaceRoot}/css/",：編譯 CSS 輸出目地的資料夾，使用 ${workspaceRoot} 指在專案中的根目錄算地的相對路徑，後面在指定 /css/ 做為輸出的目的資料夾，將相對的 Scss/Sass 檔輸出到此資料夾內。
• "autoprefixer": "last 5 versions",：在 CSS 編譯後的瀏覽器相容性設定，相關設定可以透過 Browserslist 查看參數，而如果使用 "> 1%, Last 3 versions, iOS 8", 參數設定，可以針對到 IE9 做最大相容。
• "compress": true,：設定壓縮是否處理，預設是 false 不處理。
• "main": "${workspaceRoot}/scss/style.scss", 專案下針對特定監視的特定路徑下檔案，如果設定 "main" 的若專案內有相關的 Scss 檔有做更動時，只針對設定的 "main" 指定的檔案做編譯輸出處理，主要可用於多筆已拆分後輸出的 Scss 檔，或是多個只要輸出所指定的 Scss 檔來做設定。

Easy Compile – ignore 排除特定路徑與檔案

使用上方的設定，會將所有 "**/_*.scss" 檔做排除編譯的處理，也就是 _x.scss 檔都受此設定排除。

所有的 _x.scss 檔都會排除，排除後都不會有編譯的處理，不同於指定 "main" 拆分處理下的 _x.scss，在更動後一樣可以在進行編譯，但只有針對指定的 "main" 路徑特定檔案才處理編譯輸出到 css 檔出來。

針對 Scss 所拆分出來的 sourceMap 出現問題，只有 Chrome 可比較正常看到對應的拆分檔 (還是有不正常顯示只出現 style.css 主輸出檔)，另外像是 Live Sass Compiler 擴充功能所產出的 sourcMap 也會產生一樣的問題。

Easy LESS

• 插件連結
• 將 Less 編譯成 css
• ${workspaceRoot} 為根目錄
  
  JavaScript

  "less.compile": { "main": ["${workspaceRoot}/Content/front/less/custom.less"], "out": "${workspaceRoot}/Content/front/css/", "sourceMap" : true, //在瀏覽器上幫助你找原始的less檔案 "sourceMapFileInline":false, //嵌入css後面 "compress":true, //壓縮css "javascriptEnabled" : true },

  1 2 3 4 5 6 7 8

  "less.compile": {         "main": ["${workspaceRoot}/Content/front/less/custom.less"],         "out": "${workspaceRoot}/Content/front/css/",         "sourceMap" : true, //在瀏覽器上幫助你找原始的less檔案         "sourceMapFileInline":false, //嵌入css後面         "compress":true, //壓縮css         "javascriptEnabled" : true     },

html2pug

• 插件連結
• 將 html 轉換為在 Visual Studio Code 中顯示的內容。
• Keyboard shortcut: Ctrl + Alt + p or ⌘ Command + Alt + p

html2jade

• 插件連結
• 可轉換 html & jade 格式，方便組 html 模版用。

在確定好 html 架構後可以使用 Mac F1 鍵，輸入 conver，選擇轉換。

HTML 轉 Jade 時中文會出現亂碼。

Pug (Jade) snippets

• 插件連結
• pug 與 jade 模版語法提示。

jadeview

• 插件連結
• 將 HTML 檔呈現為 Jade，以便於閱讀。

Pug\Jade Bootstrap, Font Awesome Snippets

• 插件連結
• 使用 Pug/Jade 模版語法模組化的 BootStrap 4 的架構，使用在 Pug/Jade 模版文件檔中。

Better Haml

• 插件連結
• 使 Haml 高亮來輯寫前端的 template

Markdown Preview Enhanced

• 插件連結
• Markdown Preview Enhanced 是一款為 Atom 以及 Visual Studio Code 編輯器編寫的超級強大的 Markdown 插件，讓處理 Markdown 寫作時有良好的體驗。

使用套件與編寫 Markdown 參考 用筆記也可以管理專案(二)：Markdown Preview Enhanced 文章，另外還有 Markdown Preview Enhanced 的官方文件。

框架與元件、函式庫運用

Bootstrap 3 Snippets

• 插件連結

輸入 bs3-template:html5 (在 bs3-t 就會有完整提示)

選用提示後出現架構

Bootstrap 4 & Font awesome snippets

• 插件連結
• 插入 snippets 的工具，插入 Bootstrap 4 或 Font awesome 圖示。
• 輸入 b4 或 fa 即可挑選想用的程式片段

vue

• 插件連結
• Vue.js 的語法高亮

Vue 2 Snippets

• 插件連結
• Vue.js 2 版本的擴充

Vetur

• 插件連結
• 除了有彩色語法及語法檢查。
• 提供各式程式碼自動補完的機制。
• Emmet、格式化、Debugging、錯誤檢查

ESLint

• 插件連結
• 在 VSCode 啟用程式碼規範工具 (ESLint)

完整使用方式可參考 Wang Casper – 在 VSCode 啟用程式碼規範工具 (ESLint) 連結，透過工具可以統一 code style，滅少團隊開發上個人的饌寫差異。

註解

VS Code CSS Comments

• 插件連結
• 寫 css 時分段與註解用的純文字標題樣式。

Comments Toolkit

• 插件連結
• 另外一種註解的排版方式， comm: 特別在提示字元 :，就是專用的提示項目會出現。

One Line Comments

• 插件連結
• 撰寫 HTML 時使用註解，若是直接針對一個區塊下註解時，會直接全部將區塊內的前後以 <!-- 與 --> 前後包，若之後如果只要針對區塊內的其中一行做修改時，可能會有取消註解時的錯誤機會，區塊內如果針對每單行都下註解時，在針對單行取消就不會產生問題。
• 特別的元素標籤，以 <title>Document</title> 來使用，配合套件使用第一次結果會產生 <!-- <!-->Document</!--> -->，這樣會不直觀可在配合反悔組合鍵 ( command + d) 再按一次後，就會處理成 <!-- <title>Document</title> -->

Comment Divider

• 插件連結
• 可針對程式語言配置專用的註解設定，主要以單行的方式做注解。
• 可設定不同標題級數的文字排版對齊設定。
• 透過快速鍵產生註解。
  1. 製作主標題 (Make main header)：組合鍵 Shift + Alt + X
     
     /* -------------------------------------------------------------------------- */ /* Example text */ /* -------------------------------------------------------------------------- */

     1 2 3

     /* -------------------------------------------------------------------------- */ /*                                Example text                                */ /* -------------------------------------------------------------------------- */

  2. 製作副標題 (Make subheader)：組合鍵 Alt + X
     
     /* ------------------------------ Example text ------------------------------ */

     1	/* ------------------------------ Example text ------------------------------ */

  3. 插入實線 (Insert solid line)：組合鍵 Alt + Y
     
     /* -------------------------------------------------------------------------- */

     1	/* -------------------------------------------------------------------------- */

Better Comments

• 插件連結
• 在註解裡的第一碼加上關鍵字，會將註解用其他顏色表現出來，對於需要加強警示的註解或疑問可以用較強烈的顏色表現。

Comment Translate

• 插件連結
• 不熟習註釋的語言，會帶來理解困難。使用 Google Translate API 翻譯 VSCode 的編程語言的註釋。

壓縮 / 效能優化

Minify

• 插件連結
• 程式碼、代碼壓縮，用於壓縮代碼的擴展。
• 提供了大量的自定義設置和自動壓縮保存並導出到 .min 文件的選項。
• Minify 分別通過下面相關編譯核心對 JavaScript ，CSS 和 HTML 進行壓縮。
  • uglify-js
  • clean-css
  • html-minifier

CDN

CDN List

• 插件連結
• 快速連接選取所要的 CDN

cdnjs

• 插件連結
• 使用cdnjs cdn平台，快速連接選取所要的cdn

翻譯相關插件

翻譯 (translate to chinese)

• 插件連結
• 翻譯插件，使用百度翻譯 API 把其他語言翻譯成中文。
• 快捷鍵
  • ctrl + shift + t or cmd + shift + t

Vscode Google Translate

• 插件連結
• 快速鍵 alt + shift + t
• 使用 cmd + shift + p 輸入指 Translate selection(s) 指令後，在輸入 chinese 會轉成簡中

• alt + shift + t (試都沒作用)。
• 系統路徑 /Users/ 使用者帳號 /.vscode/extensions/funkyremi.vscode-google-translate-1.2.0/languages.js 這支檔中，先輸入 name: 'Chinese' 會找到 { name: 'Chinese', value: 'zh-CN', } 一筆物件資料，在下方加入 { name: 'tw', value: 'zh-TW', }。
• VSCode 開卡時戴入檔案時套件要讀取一段時間，等讀取完成後輸入 Translate selection(s) 指令後 在選向 tw 就可將取選的簡中或是英文等其他語言轉成繁中，直接走 Google Translate API 的功能。

var-translate / var-translation

• 插件連結
• 使用翻譯 API 將其他語言到英文，轉換成常見的編碼形式，透過翻譯中文來取英文變數命名稱。
• 英文變數名稱可選用大駝峰、小駝峰的命名。

直接使用繁中在用指令 Win: Alt + shift + t 與 MacOS: cmd + shift + t 也沒有問題。

Chinese Translation

• 插件連結
• 可以在編輯器內直接把選取的文字簡繁轉換，可以正常翻譯「天后、干面、长发、胡须」，而不會變成「天後、幹麵、長發、胡須」。

PHP 相關插件

PHP Intelephense

• 插件連結
• 這是具有 PHP 語法智能提示的插件
• 可將 .php 文件檔中自動排版程式碼，快速鍵 Mac： shift + option + f / Windows： shift + alt + f。
  

  若使用時無法直接使用快速鍵來自動排版程式碼，但透過滑鼠右鍵 > 文件化格式方式… > 設定預設格式器 > PHP Intelephense 執行自動排版功能。
  或是在設定 settings.json 加入

  "[php]": { "editor.defaultFormatter": "bmewburn.vscode-intelephense-client" },

  1 2 3

  "[php]": {   "editor.defaultFormatter": "bmewburn.vscode-intelephense-client" },

PHP Debug

• 插件連結
• 讓 VS Code 可以進行 PHP 的 Debug

Format HTML in PHP

• 插件連結
• PHP 文件中格式化 HTML 在 save 操作之前運行，因此仍然可以使用 PHP 格式化。

網站伺服器 ( Web Server )

Preview on Web Server

• 插件連結
• 解決每次本地改網頁時猛按 F5 ，或是有些東西無法在 file:// 執行的問題。也不用設定麻煩的 livereload ，現在只要會按滑鼠右鍵 > Launch on default browser 就好了。
• 熱鍵
  • ctrl + shift + p 在側面板上打開HTML預覽。有了這個功能，您可以輕鬆檢查HTML，CSS和JavaScript的操作。
  • ctrl + shift + l 在默認瀏覽器上打開網頁。您可以使用網頁檢查所有操作。

Open html in browser

• 插件連結
• 從 Dreamweaver 轉過來的人常常會問說這裡怎麼沒有「將網頁開啟於某某瀏覽器」的下拉選單，裝了這套件再用 ctrl + alt + o 可以達成類似功能。

Live Server Preview

• 插件連結
• 直接在修改 HTML 與 css 的同時，可在 vs code 同時看到改變的情形。
• 專案案資料夾開啟在 VSCode 後，在右下方會有個 Go Live 按鍵，點後就會在指定的瀏覽器上開啟 WebServer

專案資料裝會視為站台的根目錄路徑。

Live Server

• 插件連結
• 開啟後會自動顯示網頁，伺服器預設 Port 為 5500
• 開伺服器的網頁檔案點滑鼠右鍵就可以看到 Open with Live Server，編輯器右下方也有 Go Live 的按鈕可以點

IIS Express

• 插件連結
• 將當前資料夾做為 IIS Express 中的網站運行
• 此擴充插件可以使用 IIS Express 在 Visual Studio 代碼中，以網站形式運行打開的資料夾。

版本控制

Git History

• 插件連結
• 觀看 git log 用這個視覺化線圖。
• 按下 com + shift + p 可直接搜尋指令

GitLens — Git supercharged

• 插件連結
• 睛隊開發的利器，增強 Visual Studio Code 中內置的 Git 功能，通過 Git 註釋和代碼透視一目了然視覺化代碼作者，無縫導航和瀏覽 Git 存儲庫，通過強大的比較命令獲得有價值的見解，等等。

Azure Repos

• 插件連結
• Visual Studio Code 的 Azure Repos 擴展，連接到 Azure DevOps Services 和 Team Foundation Server，並提供對 Team Foundation 版本控製與管理。

Azure Repos 是 Microsoft Azure 其中一個服務內容，主要是團隊開發時使用 Git 做版控

Perforce for VS Code

• 插件連結
• Perforce 與 VS Code 的SCM 功能集成。

perforce 簡介
版本控制软件 perforce 与 git 文章介紹
Perforce是一款商業軟件，他們定義Perforce為軟件配置管理系統。
一般簡稱P4，系統由服務器端，客戶端組成，還包括若干中介服務器 (Proxy Server)。
客戶端會有GUI界面，命令行界面，Web 界面、摺疊編輯本段。

VS Code 擴充功能

filesize

• 插件連結
• 在左下方可直接看出目前檔案大小。

file-size

• 插件連結
• 一個簡單的擴充。在狀態欄中顯示當前文本文件的大小。
• 保存文件或更改活動標籤後，狀態立既更新。

filesize 與 file-size 差不多 (命名也差一個 -)，選一個擴充使用為主，不過 file-size 有強調立既更新。

Path Intellisense

• 插件連結
• 自動帶入本機專案資料夾內的檔案路徑。

AZ AL Dev Tools/AL Code Outline

• 插件連結
• 展示代碼結構樹，能在單獨窗口中列出當源代碼中的各種符號，比如變量名、類名、方法名等，並支持快速跳轉，有點類似於 Vim 裡面的 ctags，翻看老代碼、開源項目代碼時非常有用。

實用下來此插件可能和 VS Code 原生的大綱功能相沖，會有二個功能都無法顯示樹狀圖。

Hg

• 插件連結
• 用於 Mercurial 儲存庫，提供 Mercurial 和 Git 之間的雙向橋樑。

除錯工具

Code Spell Checker

• 插件連結
• 英文拼字檢查套件

使用介紹可參考 – [VSCode] 手殘常常打錯字 Typo？讓 Code SpellChecker 省下你找錯字的時間。

Fix JSON

• 插件連結
• Fix Json 使用 jsonic 解析一些 "bad Json" 使之嚴謹化，如： { foo:"bar", red:1, } 將轉化為 { "foo":"bar", "red":1 }
• 修正格式上的錯誤提示，如果單純使用 JavaScript 的物件與陣列資料組成，會得的 JSON 的格式上有錯。

JSON 不會有像 JavaScript 一樣在資料格式中有註解也還可以一樣使用。

Gremlins tracker for Visual Studio Code

• 插件連結
• 判斷程式碼是否有 zero-width space (零寬空格)。

VS Code 主題與圖示

Community Material Theme

• 插件連結
• Visual Studio Code 下很完整的主題，另外也可以配合 Material Theme app icon for Visual Studio code 的組合讓主題與圖示成套。

Material Theme Icons

• 插件連結
• 主要針的 Material Theme 所用的 Icon。

file-icons

• 插件連結
• VS Code 中的文件特定圖標，可以改善視覺辨視度可快速分辨出檔案格式。

Monokai Night Theme

• 插件連結

Peacock

• 插件連結
• VSCode 專用的介面色彩主題，可以針對專案所用的框架或是語言透過色彩，來直接做聯想直覺化使用。

其他工具

Settings Sync (多台電腦 VS Code 同步)

• 插件連結
• 不相同的開發環境操作開發環境可透過 GitHub 同步設定與擴充。

設定參考文章：
Visual Studio Code 安裝 Settings Sync 擴充套件，利用 GitHub 空間，同步多台電腦的開發環境
VSCode 於 2010 V4.18 版本有加入官方的同步功能，可以透過面版同步 GitHub 與 Microsoft 的帳號，可參考 YouTube 的 Visual Studio Code Settings Sync 配置的多机同步|再也不用担心重新安装VS Code了 影片查看功能。

Polacode (程式碼截圖)

• 插件連結
• 程式碼截圖工具，如果想要在程式碼上將流程或註記內容，直接在截圖後的程式碼上以圖片的方式來加工。

Docker

• 插件連結
• VS Code 提供了對 Docker 官方擴展，我們可以按 Ctrl + Shift + X 打開「擴展」視圖，然後搜索 docke r以過濾結果，最後選擇 Microsoft Docker 擴展進行安裝

較完整的用法可參考雪雁 – Docker最全教程之使用 Visual Studio Code 玩轉 Docker（二十）- 連結

Json Editor

• 插件連結
• 產生 JSON 檔的樹形視圖編輯器。

如果相關的 JSON 不需要使用文字編輯器處理，可以使用 jsoneditoronline 的線上服務處理。

JSON Tools

• 插件連結
• JSON處理工具，用於處理 JSON 的工具，可以使 JSON 與程式碼漂亮與縮小。

Sort JSON objects

• 插件連結
• 圈選要排序的部份，使用 Cmd + P 輸入 sort 就可以直接做排序。
• 快速鍵： Cmd + Shift + P

JSON Transform

• 插件連結
• 以交互方式轉換 vscode 中的 json (將重復的屬性名合併)。

Node JSON Autocomplete

• 插件連結
• 為javascript中導入的json文件提供自動完成功能。

Search WordPress Docs

• 插件連結
• 在 WordPress 的 PHP 程式碼函式上，使用右鍵選單中的 Search WordPress Docs ，就在同在 VSCode 裡切出一個視窗來開啟出官方文件出來。
• 快速鍵： Alt + Ctrl + F

WordPress Devlopment

• 插件連結
• Visual Studio Code 的此擴充，加入 WordPress 代碼段，即將發布更多片段。