跳至主要内容

VSCode 使用技巧與秘訣

Visual Studio Code 的實用技巧、快捷鍵和設定最佳化，提升程式開發效率和使用體驗。

基本設定​

文字顯示設定​

{
  // 自動換行
  "editor.wordWrap": "on",

  // 顯示空白字元
  "editor.renderWhitespace": "boundary",

  // 顯示行號
  "editor.lineNumbers": "on",

  // 顯示縮排參考線
  "editor.renderIndentGuides": true,

  // 字體大小
  "editor.fontSize": 14,

  // 行高
  "editor.lineHeight": 1.5
}

編輯增強​

{
  // 自動儲存
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // 格式化設定
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

  // 自動修復
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },

  // Tab 設定
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true
}

快捷鍵大全​

文件操作​

快捷鍵功能備註
Ctrl+N新建文件
Ctrl+O開啟文件
Ctrl+S儲存文件
Ctrl+Shift+S另存新檔
Ctrl+W關閉當前標籤
Ctrl+Shift+T重新開啟關閉的標籤
Ctrl+Tab在標籤間切換
Ctrl+P快速開啟檔案

編輯操作​

快捷鍵功能備註
Ctrl+Z復原
Ctrl+Y重做
Ctrl+X剪下
Ctrl+C複製
Ctrl+V貼上
Ctrl+A全選
Ctrl+F尋找
Ctrl+H取代
F3 / Shift+F3尋找下一個/上一個

選取與游標​

快捷鍵功能備註
Ctrl+L選取整行
Ctrl+D選取相同內容多次按下可多選
Ctrl+Shift+L選取所有相同內容
Alt+Click多游標選取
Ctrl+Alt+↑/↓在上/下行新增游標
Shift+Alt+→擴展選取
Shift+Alt+←縮小選取

行操作​

快捷鍵功能備註
Ctrl+Shift+K刪除整行
Ctrl+Enter在下方插入新行
Ctrl+Shift+Enter在上方插入新行
Alt+↑/↓移動行
Shift+Alt+↑/↓複製行
Ctrl+] / Ctrl+[縮排/取消縮排

顯示與導航​

快捷鍵功能備註
Ctrl+Shift+E顯示檔案總管
Ctrl+Shift+F顯示搜尋
Ctrl+Shift+G顯示 Git
Ctrl+Shift+D顯示除錯
Ctrl+Shift+X顯示擴充套件
Ctrl+Shift+P命令面板
Ctrl+Shift+M問題面板
`Ctrl+``終端機

進階技巧​

多游標編輯​

// 同時編輯多個相同的變數名稱
1. 選取變數名稱
2. 按 Ctrl+D 選取下一個相同的
3. 繼續按 Ctrl+D 選取更多
4. 開始編輯，所有選取的內容會同時變更

程式碼折疊​

{
  // 自動折疊設定
  "editor.foldingStrategy": "auto",
  "editor.showFoldingControls": "always"

  // 折疊快捷鍵
  // Ctrl+Shift+[ : 折疊當前區塊
  // Ctrl+Shift+] : 展開當前區塊
  // Ctrl+K Ctrl+0 : 折疊所有區塊
  // Ctrl+K Ctrl+J : 展開所有區塊
}

工作區設定​

// .vscode/settings.json
{
  // 排除檔案和資料夾
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true,
    "**/.DS_Store": true
  },

  // 搜尋排除
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },

  // 監視檔案排除
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true
  }
}

語言特定設定​

JavaScript/TypeScript​

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true
}

Python​

{
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  },
  "python.defaultInterpreterPath": "./venv/bin/python",
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true
}

HTML/CSS​

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

檔案關聯設定​

自定義檔案關聯​

{
  "files.associations": {
    "*.env.*": "dotenv",
    "*.config.js": "javascript",
    "Dockerfile.*": "dockerfile",
    "*.yml": "yaml",
    "*.yaml": "yaml"
  }
}

語言模式設定​

{
  "files.defaultLanguage": "markdown",
  "files.autoGuessEncoding": true,
  "files.encoding": "utf8"
}

終端機設定​

終端機配置​

{
  "terminal.integrated.shell.osx": "/bin/zsh",
  "terminal.integrated.shell.linux": "/bin/bash",
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cursorBlinking": true
}

終端機快捷鍵​

快捷鍵功能
`Ctrl+``開啟/關閉終端機
`Ctrl+Shift+``新建終端機
Ctrl+Shift+5分割終端機
Alt+←/→在終端機間切換

除錯設定​

基本除錯配置​

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

除錯快捷鍵​

快捷鍵功能
F5開始除錯
F9設定/移除斷點
F10單步執行
F11進入函數
Shift+F11跳出函數
Shift+F5停止除錯

任務設定​

自定義任務​

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm start",
      "type": "shell",
      "command": "npm start",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": []
    },
    {
      "label": "npm test",
      "type": "shell",
      "command": "npm test",
      "group": "test"
    }
  ]
}

任務快捷鍵​

快捷鍵功能
Ctrl+Shift+P 然後輸入 "Tasks"執行任務
Ctrl+Shift+B執行建置任務

實用技巧​

快速導航​

# 快速開啟檔案
Ctrl+P 然後輸入檔案名

# 跳轉到特定行
Ctrl+G 然後輸入行號

# 跳轉到符號
Ctrl+Shift+O 然後輸入符號名

# 在所有檔案中搜尋符號
Ctrl+T 然後輸入符號名

程式碼片段​

// 自定義程式碼片段
{
  "Console Log": {
    "prefix": "cl",
    "body": ["console.log('$1', $1);"],
    "description": "Console log with variable name"
  },
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const $1 = () => {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  );",
      "};",
      "",
      "export default $1;"
    ],
    "description": "React functional component"
  }
}

文字換行控制​

# 快捷鍵
Alt+Z  # 切換文字換行開/關

# 設定檔中配置
"editor.wordWrap": "on"           # 開啟換行
"editor.wordWrap": "off"          # 關閉換行
"editor.wordWrap": "wordWrapColumn" # 按指定列數換行
"editor.wordWrapColumn": 80        # 設定換行列數

效能最佳化​

{
  // 關閉不需要的功能
  "editor.minimap.enabled": false,
  "editor.renderLineHighlight": "none",
  "editor.occurrencesHighlight": false,

  // 減少自動儲存頻率
  "files.autoSave": "onWindowChange",

  // 關閉遠端擴充套件推薦
  "extensions.ignoreRecommendations": true,

  // 減少檔案監視
  "files.watcherExclude": {
    "**/node_modules/**": true
  }
}

疑難排解​

常見問題​

# VSCode 啟動緩慢
1. 檢查擴充套件數量
2. 停用不必要的擴充套件
3. 清理工作區快取

# 設定同步問題
1. 檢查網路連線
2. 重新登入 Microsoft 帳號
3. 手動備份設定檔案

# 擴充套件不工作
1. 重新啟動 VSCode
2. 更新擴充套件
3. 檢查擴充套件相容性

效能監控​

# 檢查 VSCode 效能
1. 開啟命令面板 (Ctrl+Shift+P)
2. 執行 "Developer: Reload Window"
3. 執行 "Developer: Show Running Extensions"
4. 檢查啟動時間和記憶體使用

See Also​