VS Code 生產力工具：讓你的開發效率翻倍

前言

VS Code 是目前最多開發者使用的編輯器，但很多人只用了它一小部分的功能。這篇文章分享我的 VS Code 設定和擴充套件，讓你的開發效率更上一層樓。

必裝擴充套件

程式碼品質

• ESLint：JavaScript/TypeScript 的程式碼檢查
• Prettier：統一程式碼風格
• PHP Intelephense：PHP 的智慧提示和自動完成
• Laravel Blade Snippets：Blade 模板的語法支援

開發效率

• GitHub Copilot：AI 程式碼補全，寫重複性的程式碼超快
• Auto Rename Tag：修改 HTML 開始標籤時自動修改結束標籤
• Path Intellisense：檔案路徑自動完成
• DotENV：.env 檔案的語法高亮

視覺輔助

• Error Lens：直接在程式碼行上顯示錯誤訊息
• Indent Rainbow：用顏色區分縮排層級
• Better Comments：讓註解更醒目

Git 相關

• GitLens：查看每一行程式碼的 Git 歷史
• Git Graph：視覺化的 Git 分支圖

實用快捷鍵

檔案操作

快捷鍵	功能
Cmd + P	快速開啟檔案
Cmd + Shift + P	命令面板
Cmd + B	切換側邊欄
`Cmd + “	切換終端機

編輯技巧

快捷鍵	功能
Cmd + D	選取下一個相同文字
Cmd + Shift + L	選取所有相同文字
Alt + Up/Down	移動整行
Alt + Shift + Up/Down	複製整行
Cmd + Shift + K	刪除整行

多游標編輯

快捷鍵	功能
Alt + Click	新增游標
Cmd + Alt + Up/Down	上下新增游標

多游標是 VS Code 最強大的功能之一。例如要同時修改多個變數名稱，只要按 Cmd + D 連續選取，就能同時編輯。

實用設定

settings.json 推薦設定

{
  "editor.fontSize": 14,
  "editor.lineHeight": 1.8,
  "editor.fontFamily": "'JetBrains Mono', Menlo, monospace",
  "editor.fontLigatures": true,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,

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

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

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

字型推薦

我使用 JetBrains Mono，它有以下優點：

• 免費開源
• 支援連字（Ligatures）
• 辨識度高，0 和 O 不易搞混
• 長時間閱讀不容易累

Snippets：自訂程式碼片段

React 元件 Snippet

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:ComponentName}Props {",
      "  $2",
      "}",
      "",
      "export default function ${1:ComponentName}({ $3 }: ${1:ComponentName}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ]
  }
}

Laravel Controller Snippet

{
  "Laravel API Method": {
    "prefix": "lapi",
    "body": [
      "public function ${1:method}(Request \\$request)",
      "{",
      "    $0",
      "",
      "    return response()->json([",
      "        'success' => true,",
      "        'data' => \\$data,",
      "    ]);",
      "}"
    ]
  }
}

工作區設定

針對不同專案使用不同設定。在專案根目錄建立 .vscode/settings.json：

{
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.tabSize": 2
  },
  "search.exclude": {
    "**/vendor": true,
    "**/node_modules": true,
    "**/storage": true
  }
}

終端機整合

VS Code 內建的終端機非常好用。我的設定：

{
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.scrollback": 10000
}

搭配分割終端功能，可以同時跑 php artisan serve 和 npm run dev，不用開額外的終端機視窗。

結語

工欲善其事，必先利其器。花一點時間設定好 VS Code，長期下來能省下大量時間。建議從最常用的快捷鍵開始練習，慢慢把擴充套件和設定調整到最適合你的狀態。