## VSCode 的 setting.json 分類
以前想跟同事分享自己的 VSCode 的開發環境設定，但當時的 setting.json 沒有整理過，不僅凌亂，且許多外掛我也早就忘記用處。
剛好最近在整理 setting.json，想說把整理的成果發不出來，改將來有需要用的自己或其他人。
這是我目前（2025/4/3）正在使用的 VSCode 開發環境設定，我分成以下幾個部分：
1. 編輯器設定（VSCode 內建功能）
2. Emmet 快速輸入（VSCode 內建功能）
3. 檔案處理（VSCode 內建功能）
4. 介面設定（部分為外掛 material-icon-theme）
5. 終端機與 Copilot 整合（Copilot 為外掛）
6. 語言支援與格式化（多為外掛：Prettier、Volar 等）
7. Prettier 設定（Prettier 外掛）
8. Tailwind 類別摺疊設定（tailwind-fold 外掛）
9. Live Server 設定（Live Server 外掛）
10. Live Sass 編譯設定（Live Sass Compiler 外掛）
11. Git 設定（VSCode 內建功能）
12. 資料庫連線設定（mssql 外掛）
```json=
{
// 1. 編輯器設定（VSCode 內建功能）
"editor.tabSize": 4, // Tab 寬度為 4
"editor.insertSpaces": false, // 使用 Tab 而非空格作為縮排
"editor.formatOnSave": true, // 儲存檔案時自動格式化
"editor.formatOnType": true, // 輸入特定符號（如 }、;）時自動格式化
"editor.minimap.enabled": false, // 關閉右側的 Minimap 小地圖
"editor.renderWhitespace": "boundary", // 僅在邊界顯示空白字元
"editor.unicodeHighlight.ambiguousCharacters": false, // 不高亮顯示模糊 Unicode 字元
"editor.wordWrap": "off", // 不啟用自動換行
"editor.fontFamily": "Consolas, Menlo, 'Noto Sans TC', Monaco, 'Courier New', monospace", // 設定編輯器字型
// 2. Emmet 快速輸入（VSCode 內建功能）
"emmet.triggerExpansionOnTab": true, // 輸入縮寫後按 Tab 可展開成 HTML 結構
// 3. 檔案處理（VSCode 內建功能）
"files.insertFinalNewline": true, // 儲存時自動補上檔尾換行
"files.trimFinalNewlines": true, // 移除檔尾多餘換行
"files.trimTrailingWhitespace": true, // 移除每行行尾空白
// 4. 介面設定（部分為外掛 material-icon-theme）
"workbench.iconTheme": "material-icon-theme", // 使用 Material Icons 作為檔案圖示（外掛）
"explorer.confirmDelete": false, // 刪除檔案時不跳出確認提示
"diffEditor.ignoreTrimWhitespace": true, // 比對時忽略行尾空白差異
"diffEditor.renderSideBySide": false, // 差異比較採用上下呈現方式（非左右）
// 5. 終端機與 Copilot 整合（Copilot 為外掛）
"terminal.integrated.fontFamily": "Consolas,Menlo, 'Noto Sans TC', Monaco, 'Courier New', monospace", // 終端機使用的字型
"terminal.integrated.fontSize": 14, // 終端機字體大小
"chat.commandCenter.enabled": false, // 關閉 Copilot 命令中心（Copilot 外掛）
// 6. 語言支援與格式化（多為外掛：Prettier、Volar 等）
"[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, // HTML 使用內建 formatter
"[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // CSS 使用 Prettier（外掛）
"[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // SCSS 使用 Prettier（外掛）
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // JS 使用 Prettier（外掛）
"[vue]": { "editor.defaultFormatter": "Vue.volar" }, // Vue 使用 Volar（外掛）
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // React TSX 使用 Prettier（外掛）
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // TS 使用 Prettier（外掛）
"[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // JSON 使用 Prettier（外掛）
"[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // JSON with Comments 使用 Prettier（外掛）
"html.format.wrapAttributes": "aligned-multiple", // HTML 屬性對齊排列
"html.format.wrapLineLength": 10000, // HTML 最大行寬限制為極大值，避免自動換行
"css.validate": true, // 啟用 CSS 語法檢查
"scss.validate": true, // 啟用 SCSS 語法檢查
// 7. Prettier 設定（Prettier 外掛）
"prettier.tabWidth": 4, // Prettier 縮排寬度
"prettier.printWidth": 10000, // 行寬限制設為極大值，防止自動換行
"prettier.singleQuote": true, // 使用單引號
"prettier.trailingComma": "all", // 所有可能的位置都加上尾端逗號
"prettier.bracketSameLine": true, // HTML 結尾大括號與內容同一行
"prettier.singleAttributePerLine": false, // HTML 標籤屬性可以同行
"prettier.vueIndentScriptAndStyle": true, // <script> 和 <style> 區塊內保持縮排
// 8. Tailwind 類別摺疊設定（tailwind-fold 外掛）
"tailwind-fold.autoFold": false, // 不自動摺疊 Tailwind class 列（、
// 9. Live Server 設定（Live Server 外掛）
"liveServer.settings.port": 51634, // 指定伺服器 port
"liveServer.settings.fullReload": true, // 頁面變更時整頁重新載入
"liveServer.settings.donotVerifyTags": true, // 不檢查 HTML tag 有效性
"liveServer.settings.donotShowInfoMsg": true, // 不顯示提示訊息
"liveServer.settings.ignoreFiles": [".vscode/**", "**/*.scss", "**/*.sass", "**/*.ts"], // 忽略這些檔案的變更
// 10. Live Sass 編譯設定（Live Sass Compiler 外掛）
"liveSassCompile.settings.formats": [
{
"extensionName": ".css", // 轉出為 .css 檔
"format": "expanded", // 使用非壓縮格式
"savePath": "~/../Styles/Libs" // 輸出路徑
}
],
"liveSassCompile.settings.generateMap": true, // 產生對應的 .map 檔供除錯
"liveSassCompile.settings.autoprefix": ["> 0.5%", "last 2 versions"], // 自動補上瀏覽器前綴
// 11. Git 設定（VSCode 內建功能）
"git.enableSmartCommit": true, // 可直接 commit unstaged 檔案
"git.confirmSync": false, // 同步時不跳確認提示
"git.openRepositoryInParentFolders": "never", // 不自動開啟父層的 Git repo
// 12. 資料庫連線設定（mssql 外掛）
"mssql.connections": [
{
"server": "", // 資料庫伺服器地址
"database": "", // 資料庫名稱
"authenticationType": "SqlLogin", // 登入方式
"user": "", // 用戶名稱
"password": "", // 密碼（請隱藏）
"emptyPasswordInput": false, // 是否允許空密碼
"savePassword": true, // 儲存密碼
"encrypt": "Mandatory", // 強制加密連線
"trustServerCertificate": true // 信任伺服器證書
},
{
"server": "", // 資料庫伺服器地址
"database": "", // 資料庫名稱
"authenticationType": "SqlLogin", // 登入方式
"user": "", // 用戶名稱
"password": "", // 密碼
"emptyPasswordInput": false, // 是否允許空密碼
"savePassword": true, // 儲存密碼
"encrypt": "Mandatory", // 強制加密連線
"trustServerCertificate": true, // 信任伺服器證書
"connectTimeout": 15, // 連線超時設定
"commandTimeout": 30, // 執行命令超時設定
"applicationName": "vscode-mssql" // 連線應用程式名稱
}
]
}
```
## 查看 VSCode 使用的套件
### 在 VSCode 啟用 `code` 指令到終端機
1. **打開 VSCode（不是 Terminal）**
2. 按下 `Cmd + Shift + P` 開啟「命令面板」
3. 輸入這一串並點它：
```a=
Shell Command: Install 'code' command in PATH
```
4. 它會幫你設定好 `code` 指令
5. 關掉終端機（或開一個新的），再來就可以用了！
### 在終端機中查詢
打開新終端機（Terminal），輸入：
```a=
code --version
```
如果看到版本號，例如 `1.88.0`，就代表你成功了
然後你就能執行你要的指令：
```a=
code --list-extensions --show-versions
```
就會見到以下成果（2025/4/3 的紀錄，並利用 ChatGPT 增加文字註解）：
```a=
aaron-bond.better-comments@3.0.2 // 程式碼註解高亮
adpyke.vscode-sql-formatter@1.4.4 // SQL 格式化工具
adrianwilczynski.format-selection-as-html@2.3.0 // HTML 格式化工具
akamud.vscode-theme-onedark@2.3.0 // VSCode 主題
aledev29.razor-snippets-for-asp-net-core@0.0.3 // ASP.NET Razor Snippets
amandeepmittal.pug@1.0.1 // Pug 模板語言支援
austenc.tailwind-docs@2.1.0 // Tailwind CSS 文件查詢工具
austincummings.razor-plus@0.1.4 // Razor 開發支援
bracketpaircolordlw.bracket-pair-color-dlw@0.0.6 // 括號顏色標示
bradlc.vscode-tailwindcss@0.14.13 // Tailwind CSS 語法提示
christian-kohler.path-intellisense@2.10.0 // 路徑自動提示
codeium.codeium@1.42.3 // AI 程式碼補全（Codeium）
coenraads.bracket-pair-colorizer-2@0.2.4 // 括號顏色標示
dbaeumer.vscode-eslint@3.0.10 // ESLint 語法檢查
ducfilan.pug-formatter@0.6.0 // Pug 格式化工具
editorconfig.editorconfig@0.17.2 // 支援 .editorconfig 檔案
esbenp.prettier-vscode@11.0.0 // Prettier 程式碼格式化
formulahendry.auto-rename-tag@0.1.10 // HTML 標籤同步重新命名
formulahendry.code-runner@0.12.2 // 執行選取的程式碼片段
github.copilot@1.293.0 // GitHub Copilot AI 補全
github.copilot-chat@0.25.1 // GitHub Copilot Chat 介面
glenn2223.live-sass@6.1.2 // SCSS/SASS 即時編譯
hediet.debug-visualizer@2.4.0 // 變數視覺化除錯工具
hollowtree.vue-snippets@1.0.4 // Vue 程式碼片段
humao.rest-client@0.25.1 // 測試 REST API 請求
jakewilson.vscode-cdnjs@0.19.0 // 快速插入 CDNJS 套件
janisdd.vscode-edit-csv@0.11.3 // CSV 編輯器
jock.svg@1.5.4 // SVG 支援工具
joloyonaha.scss-bem-support@0.0.8 // SCSS BEM 支援
kevin-chatham.aspnetcorerazor-html-css-class-completion@1.0.3 // Razor 類別補全
mechatroner.rainbow-csv@3.18.0 // 彩虹顏色顯示 CSV 欄位
meezilla.json@0.1.2 // JSON 工具
mhutchie.git-graph@1.30.0 // Git 視覺化圖表
michelemelluso.code-beautifier@2.3.3 // 一般程式碼美化工具
mohsen1.prettify-json@0.0.3 // JSON 美化
mrmlnc.vscode-pugbeautify@1.0.2 // Pug Beautify
ms-azuretools.vscode-docker@1.29.4 // Docker 支援
ms-ceintl.vscode-language-pack-zh-hant@1.98.2025031209 // 中文介面包（繁體）
ms-dotnettools.csdevkit@1.17.64 // C# 開發工具包
ms-dotnettools.csharp@2.69.25 // C# 語言支援
ms-dotnettools.vscode-dotnet-runtime@2.3.0 // .NET 執行環境支援
ms-dotnettools.vscodeintellicode-csharp@2.2.3 // C# 智慧提示
ms-mssql.data-workspace-vscode@0.6.0 // MSSQL 工作區支援
ms-mssql.mssql@1.30.0 // MSSQL 擴充功能
ms-mssql.sql-bindings-vscode@0.4.0 // SQL Bindings 支援
ms-mssql.sql-database-projects-vscode@1.5.0 // SQL 專案工具
ms-python.debugpy@2025.4.1 // Python 除錯元件
ms-python.isort@2023.10.1 // Python import 排序工具
ms-python.python@2025.2.0 // Python 支援
ms-python.vscode-pylance@2025.3.2 // Python 語意分析引擎
ms-toolsai.jupyter@2025.2.0 // Jupyter Notebook 支援
ms-toolsai.jupyter-keymap@1.1.2 // Jupyter 快捷鍵支援
ms-toolsai.jupyter-renderers@1.1.0 // Jupyter 畫圖顯示
ms-toolsai.vscode-jupyter-cell-tags@0.1.9 // Jupyter cell tag 支援
ms-toolsai.vscode-jupyter-slideshow@0.1.6 // Jupyter 幻燈片展示支援
ms-vscode-remote.remote-containers@0.401.0 // Docker 容器內遠端開發
ms-vscode-remote.remote-wsl@0.88.5 // WSL 遠端開發支援
oderwat.indent-rainbow@8.3.1 // 縮排彩虹顯示
pkief.material-icon-theme@5.21.0 // Material 檔案圖示主題
pnp.polacode@0.3.4 // 程式碼截圖工具
quicktype.quicktype@23.0.170 // 自動生成型別定義（TypeScript 等）
ritwickdey.liveserver@5.7.9 // Live Server 即時預覽
rodrigovallades.es7-react-js-snippets@1.9.3 // React Snippets
rvest.vs-code-prettier-eslint@6.0.0 // Prettier + ESLint 整合
sdras.vue-vscode-snippets@3.2.0 // Vue Snippets（由 Sarah Drasner 提供）
sensourceinc.vscode-sql-beautify@0.0.4 // SQL 美化工具
sibiraj-s.vscode-scss-formatter@3.0.0 // SCSS 格式化
simonsiefke.svg-preview@2.8.3 // SVG 預覽工具
stivo.tailwind-fold@0.2.0 // Tailwind class 自動摺疊
streetsidesoftware.code-spell-checker@4.0.40 // 拼字檢查
stylelint.vscode-stylelint@1.5.0 // Stylelint 語法檢查
taoklerks.poor-mans-t-sql-formatter-vscode@1.6.10 // T-SQL 美化工具
tobermory.es6-string-html@2.17.0 // HTML 字串高亮（支援 template literals）
vue.volar@2.2.8 // Vue 3 語言支援（官方 Volar）
```
Sign in with Wallet
Connect another wallet