VS Code 完全配置与效率提升指南 2026：从入门到大师级工作流

# Homebrew 安装（推荐）
brew install --cask visual-studio-code

# 或使用 Homebrew Cask
brew install --cask vscode

# 官网下载
# https://code.visualstudio.com/

# winget
winget install Microsoft.VisualStudioCode

# Scoop
scoop install extras/vscode

# Debian/Ubuntu
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64 signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

# Arch (AUR)
yay -S visual-studio-code-bin

# 用 VS Code 打开文件
code file.txt

# 打开文件夹
code .

# 打开并比较两个文件
code --diff file1.txt file2.txt

# 打开并跳转到指定行
code --goto file.txt:10:5  # 第10行第5列

# 新窗口打开
code --new-window .

# 从 stdin 读取
echo "hello" | code -

# 查看版本
code --version

// 按 Cmd+Shift+P → "Open User Settings (JSON)"
{
  // ========== 编辑器基础 ==========
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.smoothScrolling": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.linkedEditing": true,
  "editor.stickyScroll.enabled": true,
  "editor.stickyScroll.maxLineCount": 5,
  "editor.inlineSuggest.enabled": true,

  // ========== 文件管理 ==========
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/coverage": true
  },
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "files.hotExit": "onExitAndWindowClose",

  // ========== 搜索 ==========
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true,
    "**/package-lock.json": true,
    "**/yarn.lock": true
  },

  // ========== 终端 ==========
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.scrollback": 10000,
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "zsh",
  "terminal.integrated.defaultProfile.windows": "PowerShell",

  // ========== 工作台 ==========
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.enablePreview": false,
  "workbench.editor.wrapTabs": true,
  "workbench.tree.indent": 12,
  "workbench.tree.renderIndentGuides": "always",

  // ========== Git ==========
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.branchProtectionPrompt": "alwaysCommitToNewBranch",

  // ========== 窗口 ==========
  "window.title": "${dirty} ${activeEditorShort} - ${rootName}",
  "window.zoomLevel": 0,
  "window.restoreWindows": "all"
}

# macOS
brew install --cask font-jetbrains-mono

# 或手动下载
# https://www.jetbrains.com/lp/mono/

<!-- 输入: div.container>ul>li*5 -->
<!-- 生成: -->
<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

<!-- 输入: button.btn.btn-primary{点击我} -->
<!-- 生成: -->
<button class="btn btn-primary">点击我</button>

{
  // 主题
  "workbench.colorTheme": "Tokyo Night",
  "workbench.iconTheme": "material-icon-theme",
  
  // 自定义颜色
  "workbench.colorCustomizations": {
    "editor.background": "#1a1b26",
    "editor.lineHighlightBackground": "#292e42",
    "editorCursor.foreground": "#c0caf5",
    "editorLineNumber.foreground": "#3b4261",
    "editorLineNumber.activeForeground": "#7aa2f7",
  },
  
  // 字体
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.fontFamily": "'JetBrains Mono', monospace",
  "editor.fontLigatures": true,
  "editor.letterSpacing": 0.5,
  
  // 光标
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorWidth": 2,
  
  // 滚动条
  "editor.scrollbar.vertical": "auto",
  "editor.scrollbar.horizontal": "auto",
  "editor.scrollbar.verticalScrollbarSize": 8,
  
  // 透明度（macOS）
  "window.background": "#1a1b26ee",
}

// snippets/typescriptreact.json
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import { FC } from 'react';",
      "",
      "interface ${1:ComponentName}Props {",
      "  $2",
      "}",
      "",
      "const ${1:ComponentName}: FC<${1:ComponentName}Props> = ($3) => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React 函数组件 + TypeScript"
  },
  
  "React useState Hook": {
    "prefix": "useState",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState<${2:type}>(${3:initialValue});"
    ],
    "description": "useState Hook"
  },
  
  "React useEffect Hook": {
    "prefix": "useEffect",
    "body": [
      "useEffect(() => {",
      "  $0",
      "}, [$1]);"
    ],
    "description": "useEffect Hook"
  },
  
  "Console Log": {
    "prefix": "clg",
    "body": ["console.log('$1:', $1);"],
    "description": "console.log"
  },
  
  "Try Catch": {
    "prefix": "tryc",
    "body": [
      "try {",
      "  $0",
      "} catch (error) {",
      "  console.error('Error:', error);",
      "}"
    ],
    "description": "try catch"
  }
}

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Current File",
      "type": "node",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Debug npm start",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal"
    },
    {
      "name": "Attach to Process",
      "type": "node",
      "request": "attach",
      "processId": "${command:PickProcess}"
    }
  ]
}

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    },
    {
      "name": "Attach to Chrome",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

{
  // 终端外观
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.lineHeight": 1.2,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.scrollback": 10000,
  
  // 终端行为
  "terminal.integrated.enablePersistentSessions": true,
  "terminal.integrated.copyOnSelection": true,
  "terminal.integrated.rightClickBehavior": "paste",
  "terminal.integrated.confirmOnExit": "never",
  "terminal.integrated.confirmOnKill": "never",
  
  // macOS 特定
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.profiles.osx": {
    "zsh": {
      "path": "zsh",
      "args": ["-l"]
    }
  },
  
  // Windows 特定
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Git Bash": {
      "path": "C:\\Program Files\\Git\\bin\\bash.exe"
    }
  }
}

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev",
      "type": "shell",
      "command": "pnpm dev",
      "group": "build",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "build",
      "type": "shell",
      "command": "pnpm build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": []
    },
    {
      "label": "test",
      "type": "shell",
      "command": "pnpm test",
      "group": "test"
    },
    {
      "label": "lint",
      "type": "shell",
      "command": "pnpm lint && pnpm format",
      "group": "build"
    }
  ]
}

// .devcontainer/devcontainer.json
{
  "name": "Node.js Development",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },
  
  "forwardPorts": [3000, 5173],
  
  "postCreateCommand": "pnpm install",
  
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "eamodio.gitlens"
      ],
      "settings": {
        "editor.formatOnSave": true
      }
    }
  }
}

# 在 WSL 中安装 VS Code Server
code .

# 或在 VS Code 中
# Cmd+Shift+P → "WSL: Connect to WSL"

// 写一个函数，接收一个日期字符串，返回格式化后的日期
// 输入格式：YYYY-MM-DD
// 输出格式：2026年7月10日

// Copilot 会生成：
function formatDate(dateStr: string): string {
  const [year, month, day] = dateStr.split('-');
  return `${year}年${parseInt(month)}月${parseInt(day)}日`;
}

// keybindings.json
[
  // 快速创建新文件
  {
    "key": "cmd+n cmd+n",
    "command": "workbench.action.files.newUntitledFile"
  },
  
  // 在 Finder 中显示
  {
    "key": "cmd+shift+r",
    "command": "revealFileInOS",
    "when": "editorFocus"
  },
  
  // 复制文件路径
  {
    "key": "cmd+shift+c",
    "command": "workbench.action.files.copyPathOfActiveFile"
  },
  
  // 切换终端
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  
  // 格式化文档
  {
    "key": "shift+alt+f",
    "command": "editor.action.formatDocument"
  }
]

{
  // 编辑器设置
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  
  // 文件类型关联
  "files.associations": {
    "*.css": "tailwindcss"
  },
  
  // ESlint
  "eslint.validate": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  
  // TypeScript
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  
  // 路径别名
  "path-intellisense.extensionOnImport": true,
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src",
    "@components": "${workspaceRoot}/src/components"
  }
}

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "eamodio.gitlens",
    "ms-azuretools.vscode-docker",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next"
  ]
}

# .editorconfig
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{yml,yaml}]
indent_size = 2

// settings.json
{
  "terminal.integrated.profiles.osx": {
    "zsh": {
      "path": "zsh",
      "args": ["-l"],
      "env": {
        "LANG": "en_US.UTF-8",
        "LC_ALL": "en_US.UTF-8"
      }
    }
  }
}