我的開發環境大公開：VS Code 設定 + 常用外掛推薦

前言

工欲善其事，必先利其器。最近有人問我用什麼編輯器、裝了哪些外掛，就趁這個機會整理一下我的 VS Code 開發環境。

主題與字型

主題

目前用 One Dark Pro，深色背景看起來舒服，語法高亮的顏色也很分明。

字型

用 JetBrains Mono，有連字（ligature）功能，箭頭函數 => 和不等於 !== 會變成更好看的符號。

{
  "editor.fontFamily": "JetBrains Mono",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6
}

必裝外掛

Laravel 開發

外掛	功能
Laravel Blade Snippets	Blade 模板語法高亮和片段
PHP Intelephense	PHP 智能補全（比內建好很多）
Laravel Extra Intellisense	Route、Config、View 自動補全
PHP Namespace Resolver	自動匯入 PHP 類別

React 開發

外掛	功能
ES7+ React Snippets	React 程式碼片段
Tailwind CSS IntelliSense	Tailwind class 自動補全
Pretty TypeScript Errors	更易讀的 TS 錯誤訊息
Auto Rename Tag	自動重新命名配對的 HTML 標籤

通用工具

外掛	功能
GitLens	Git 歷史和 blame 資訊
Error Lens	錯誤訊息直接顯示在行內
Todo Tree	高亮 TODO、FIXME 註解
Prettier	程式碼格式化
ESLint	JavaScript 程式碼品質檢查
Thunder Client	輕量級 API 測試工具

我的 settings.json

{
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,

  "terminal.integrated.fontSize": 13,

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

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

快捷鍵推薦

功能	Mac	Windows
快速開啟檔案	Cmd + P	Ctrl + P
全域搜尋	Cmd + Shift + F	Ctrl + Shift + F
終端機	Cmd + `	Ctrl + `
多游標	Opt + Click	Alt + Click
移動整行	Opt + ↑/↓	Alt + ↑/↓
複製整行	Shift + Opt + ↑/↓	Shift + Alt + ↑/↓
重新命名符號	F2	F2

搭配其他工具

• 終端機搭配 Git 工作流程，效率更高
• TypeScript 搭配 VS Code 的自動補全體驗極佳
• 搭配 Docker 使用 Dev Containers 外掛可以在容器內開發

小結

VS Code 的強大之處在於它的擴充性。但也不要裝太多外掛，反而會拖慢速度。我的原則是：每個外掛都要有明確的用途，沒在用的就卸載。

如果你需要類似的系統，歡迎聯繫討論。