VS Code 配置優化指南

- 一、安裝與基礎設置
- - 1. 安裝 VS Code
  - 2. 中文語言包
- 二、插件推薦
- 三、常見配置項與優化
- - 1. 用戶 / 工作區設置
  - 2. 全局配置 / Settings Sync
  - 3. 常用設置示例
- 四、性能優化
- 五、調試與終端配置
- - 1. 調試配置
  - 2. 內置終端配置
- 六、快捷鍵配置
- 七、美觀與主題
- 八、總結

VS Code（Visual Studio Code）作為一款高效、跨平臺且可高度自定義的編輯器，一直深受開發者青睞。它不僅輕量，還擁有極為豐富的插件生態，可以滿足不同語言和工作流程的需求。不過，剛開始使用或面對眾多配置項時，難免會覺得無從下手。本文將從安裝、插件選擇、常見配置、性能優化以及美觀細節等多個方面，帶你一起探討如何將 VS Code 打造得更得心應手。

一、安裝與基礎設置

1. 安裝 VS Code

下載地址
訪問 VS Code 官網下載對應操作系統版本的安裝包（Windows/macOS/Linux）。
安裝過程
基本安裝流程非常簡單，按照安裝向導一步步進行即可。特別注意在 Windows 上你可以選擇是否加入全局路徑、是否添加右鍵菜單等。

2. 中文語言包

在默認情況下，VS Code 是英文界面。如果你更習慣使用中文，可以進行以下操作：

打開 VS Code 的擴展面板（左側積木圖標）。
搜索 “Chinese Language Pack for Visual Studio Code” 或 “中文語言包”。
安裝并重啟 VS Code 即可自動切換為中文界面。

如果自動切換無效，可以在命令面板（Ctrl+Shift+P / Cmd+Shift+P）中，搜索并選擇 “Configure Display Language”，改成 zh-cn，然后重啟即可。

二、插件推薦

VS Code 的強大之處不僅在其編輯器本身，更在于其數量龐大的擴展和插件。以下列舉一些常用且高質量的插件，幫助你在日常開發中事半功倍。

必裝工具類插件
- Settings Sync（內置Settings Sync或通過擴展 Settings Sync）
  將 VS Code 的配置、主題、快捷鍵、插件等同步到云端，對于需要在多臺設備間工作的人來說，非常實用。
- GitLens
  提供更詳細的 Git 操作、代碼變更注釋和可視化功能，讓你在 VS Code 中完成大部分 Git 相關操作。
- Auto Rename Tag
  用于前端 HTML/JSX 中的標簽同步重命名。例如修改 <div> 為 <section> 時，會自動同步修改閉合標簽。
- Live Server
  讓你在編寫前端頁面時，一鍵開啟本地服務實時預覽，且能自動刷新。
- Path Intellisense
  輸入路徑時自動補全文件/文件夾，大幅提升開發效率。
語言支持/格式化插件
- ESLint / TSLint
  前端（尤其是 JavaScript/TypeScript）開發者的必備，用于規范代碼風格并進行實時語法檢查。
- Prettier - Code formatter
  一款十分流行的代碼格式化工具，可以與 ESLint 協同工作。設置統一的格式化規則，讓團隊協作更順暢。
- Python
  官方 Python 插件，支持語法高亮、智能提示、調試等。
- C/C++
  官方 C/C++ 插件，提供智能感知、調試以及代碼片段等功能。
- Java
  包括類似 Eclipse/IntelliJ 風格的自動補全、調試、Maven/Gradle 集成等。
效率類插件
- Todo Tree
  自動收集注釋中的 TODO, FIXME 等標記，實時顯示在側邊欄，讓你輕松管理代辦/修復工作。
- Bracket Pair Colorizer 2 / Colorful Brackets
  可以高亮和配對各類括號，避免視覺混亂。
- Code Runner
  支持在 VS Code 內快速運行多種語言（C/C++/Java/Python/Go/JavaScript 等）的片段，對于學習或簡單驗證邏輯非常方便。

根據自身的需求和項目語言選擇合適的插件，可以大幅提升開發效率和可維護性。也注意不要濫裝插件，過多插件有時也會帶來性能負擔。

三、常見配置項與優化

1. 用戶 / 工作區設置

VS Code 中存在 “用戶設置” 與 “工作區設置” 兩種概念：

用戶設置（User Settings）：在所有項目中通用的全局設置。
工作區設置（Workspace Settings）：項目級別或工作區級別的專屬設置，僅對特定項目有效。

它們各自存儲在不同的 JSON 文件中（或在 VS Code 圖形化界面中進行配置）。在使用過程中，可根據需要進行區分。

2. 全局配置 / Settings Sync

如果你在多個平臺上使用 VS Code，可以利用內置或第三方擴展（如 Settings Sync）來自動同步你的 VS Code 設置，包括主題、插件、快捷鍵等，大大減少了繁瑣的重復設置工作。

3. 常用設置示例

以下列出一些常用的 VS Code settings.json 配置示例（可在 VS Code 中按 Ctrl+Shift+P / Cmd+Shift+P，輸入 “Preferences: Open Settings (JSON)” 來快速打開該文件）：

{// 主題和外觀"workbench.colorTheme": "Default Dark+","workbench.iconTheme": "vscode-icons", // 圖標主題，可以自己選擇其它// 編輯器基本配置"editor.tabSize": 2,"editor.insertSpaces": true,        // 將 Tab 替換為空格"editor.wordWrap": "on",            // 自動換行"editor.minimap.enabled": false,    // 是否顯示右側 Minimap"editor.formatOnSave": true,        // 保存時自動格式化"editor.formatOnPaste": false,      // 粘貼后是否自動格式化// 前端項目常用"eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact"],"prettier.requireConfig": false,    // 是否要求項目中存在 Prettier 配置文件才進行格式化// Git 操作"git.enableSmartCommit": true,      // 在沒有指定 commit message 時，直接使用默認信息"git.confirmSync": false,           // 同步代碼時不再彈確認框// 文件和搜索"files.autoSave": "off",            // 關閉自動保存，可改為 "onFocusChange" 或 "afterDelay""files.exclude": {"**/.git": true,"**/.DS_Store": true},"search.exclude": {"**/node_modules": true,"**/bower_components": true},// 根據個人習慣進行更多細節配置……
}

四、性能優化

當安裝了較多插件或在大型項目中進行開發時，VS Code 可能會出現啟動緩慢或占用內存較高的情況。以下幾種方法可以幫助你進行性能優化：

減少不必要的插件
對所安裝的插件進行定期整理，禁用那些不常用或已經過時的擴展，保持一個較精簡的擴展列表。
禁用不常用的語言服務器
某些語言服務（Language Server）在啟動后會持續占用資源，如果確實不需要對應語言的智能提示功能，建議關閉或卸載對應插件。
合理設置自動保存 / 自動格式化
自動保存和自動格式化雖然可以提升編碼的便利性，但在大型項目中可能會產生卡頓。可以根據實際需求來調整自動保存的觸發條件以及自動格式化的頻率（例如只在手動保存時才進行格式化）。
使用 VS Code 的“開發者工具”進行診斷
你可以在菜單欄中選擇 Help → Toggle Developer Tools（或中文環境下“幫助” → “切換開發者工具”）打開開發者工具，查看性能面板是否有明顯的耗時操作或錯誤提示，以便針對性地排查問題。
升級硬件 / 合理分配資源
當你在處理大型項目、需要多語言支持并運行多個容器或工具時，無論是 CPU、內存還是磁盤讀寫都會出現一定壓力。適當升級硬件配置，或在項目中采用合理的分層與依賴管理，也會顯著提升 VS Code 的整體性能體驗。

五、調試與終端配置

1. 調試配置

VS Code 提供了強大的內置調試器，對于前端工程師來說，可以直接調試 Node.js 或 Chrome/Edge 中的 JavaScript，對于后端開發者來說，也可以通過官方或第三方插件設置多種語言的調試環境。

配置步驟
1. 點擊左側的調試圖標（Debug），或使用快捷鍵 Ctrl+Shift+D / Cmd+Shift+D 打開調試面板。
2. 點擊 “創建 launch.json” 或在菜單中選擇 “Add Configuration…”，選擇你需要調試的語言或環境。
3. 生成的 launch.json 中可以進一步定制調試設置，例如端口、啟動參數、環境變量等。

2. 內置終端配置

VS Code 允許你在編輯器下方打開終端窗口，而無需切換到操作系統自帶的終端。通過 “終端” 菜單 → “新建終端” 即可開啟。你也可以在 settings.json 中進行一些細節配置，例如使用默認 Shell、設置字體大小、行高等。

{"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe","terminal.integrated.shellArgs": [],"terminal.integrated.fontSize": 14
}

六、快捷鍵配置

VS Code 默認的快捷鍵設計相對合理，但你也可以根據個人習慣去調整甚至自定義全部快捷鍵，比如將 保存 由 Ctrl+S 改為其他組合。
打開命令面板（Ctrl+Shift+P / Cmd+Shift+P）輸入 “Keyboard Shortcuts”，即可進入快捷鍵配置界面，或者通過編輯 keybindings.json 文件來滿足更多高級自定義需求。

一些常用快捷鍵（Windows 為例，macOS 相應替換為 Cmd）：

全局：
- 打開命令面板：Ctrl+Shift+P
- 打開設置：Ctrl+,
- 打開快捷鍵配置：Ctrl+K Ctrl+S
編輯器：
- 格式化文檔：Shift+Alt+F
- 折疊/展開代碼塊：Ctrl+Shift+[ / ]
- 選中下一個相同的單詞/變量：Ctrl+D
- 多光標選擇：按住 Alt 并點擊鼠標
調試：
- 啟動或繼續調試：F5
- 單步調試：F10（逐過程），F11（逐語句）

七、美觀與主題

主題
VS Code 自帶了幾個深色與淺色主題，但你也可以在擴展市場中搜索喜歡的配色主題，比如 One Dark Pro, Dracula 等，將編輯器裝扮得更具個性。
圖標主題
通過 workbench.iconTheme 設置可以選擇文件圖標包，讓項目文件夾結構更加直觀。常見的有 vscode-icons, Material Icon Theme 等。
行距和字體
如果覺得默認字體或行距不合適，可以在設置 (settings.json) 中進行自定義，比如：
```
{"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace","editor.fontLigatures": true,     // 開啟連字"editor.lineHeight": 22,         // 調大行距，增強可讀性
}
```
需要注意的是，如果要開啟連字，請選擇支持編程連字的字體，如 Fira Code、JetBrains Mono 等。