VS Code 开发环境配置

Visual Studio Code是目前最受欢迎的代码编辑器之一，通过合理配置可以大幅提升开发效率。

基础配置

系统设置

用户设置 (settings.json)

{
  "editor.fontSize": 14,
  "editor.fontFamily": "Fira Code, Consolas, monospace",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme"
}

键位绑定

[
  {
    "key": "cmd+shift+p",
    "command": "workbench.action.showCommands"
  },
  {
    "key": "cmd+p",
    "command": "workbench.action.quickOpen"
  }
]

必装插件

核心插件

1. Chinese (Simplified) Language Pack

• ID: MS-CEINTL.vscode-language-pack-zh-hans
• 功能：中文界面支持

2. GitLens

• ID: eamodio.gitlens
• 功能：增强Git功能，查看代码历史、作者信息

3. Prettier - Code formatter

• ID: esbenp.prettier-vscode
• 功能：代码格式化

4. ESLint

• ID: dbaeumer.vscode-eslint
• 功能：JavaScript/TypeScript代码检查

主题插件

1. One Dark Pro

• ID: zhuangtongfa.Material-theme
• 功能：流行的暗色主题

2. Material Icon Theme

• ID: PKief.material-icon-theme
• 功能：精美的文件图标

语言支持

1. TypeScript Importer

• ID: pmneo.ts-importer
• 功能：自动导入TypeScript模块

2. Auto Rename Tag

• ID: formulahendry.auto-rename-tag
• 功能：自动重配对HTML/XML标签

3. Bracket Pair Colorizer

• ID: CoenraadS.bracket-pair-colorizer
• 功能：括号配对着色

效率工具

1. Path Intellisense

• ID: christian-kohler.path-intellisense
• 功能：路径自动补全

2. Settings Sync

• ID: Shan.code-settings-sync
• 功能：设置同步

3. Live Server

• ID: ritwickdey.LiveServer
• 功能：本地开发服务器

项目特定配置

JavaScript/TypeScript项目

.vscode/settings.json

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "editor.quickSuggestions": {
    "strings": true
  }
}

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/index.js",
      "console": "integratedTerminal",
      "restart": true,
      "runtimeExecutable": "node"
    }
  ]
}

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm: build",
      "type": "npm",
      "script": "build",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "silent",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

Python项目

必装插件

• Python (ms-python.python)
• Python Docstring Generator (njpwerner.autodocstring)
• Python Extended (donjayamanne.python-extended-pack)

配置

{
  "python.defaultInterpreterPath": "./venv/bin/python",
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  "python.formatting.provider": "black"
}

Web开发

必装插件

• HTML CSS Support (abacaj.html-css-class-completion)
• CSS Peek (pranaygp.vscode-css-peek)
• IntelliSense for CSS class names (Zignd.html-css-class-completion)

配置

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

高级技巧

多光标编辑

• Cmd + D：选中下一个相同单词
• Cmd + Click：在点击位置添加光标
• Cmd + Alt + ↑/↓：在上下行添加光标

快速导航

• Cmd + P：快速打开文件
• Cmd + Shift + O：跳转到符号
• Cmd + G：跳转到行号
• Ctrl + -：后退到上一个位置

代码操作

• F2：重命名符号
• F12：跳转到定义
• Shift + F12：查看引用
• Cmd + /：切换注释

分屏和布局

• Cmd + \：分割编辑器
• Cmd + 1/2/3：切换到第1/2/3个编辑器组
• Cmd + K Cmd + ←/→：移动编辑器组

工作区管理

工作区文件

创建.code-workspace文件：

{
  "folders": [
    {
      "path": "./frontend"
    },
    {
      "path": "./backend"
    }
  ],
  "settings": {
    "typescript.preferences.importModuleSpecifier": "relative"
  },
  "extensions": {
    "recommendations": [
      "esbenp.prettier-vscode",
      "dbaeumer.vscode-eslint"
    ]
  }
}

多项目管理

• 使用工作区文件管理多项目
• 为不同项目类型创建不同的配置
• 使用扩展推荐统一团队环境

调试配置

Node.js调试

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "env": {
    "NODE_ENV": "development"
  }
}

Chrome调试

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

性能优化

提升响应速度

• 禁用不需要的插件
• 调整文件监听限制
• 使用硬件加速

内存管理

• 定期重启VS Code
• 关闭不需要的工作区
• 清理插件缓存

团队协作

统一开发环境

• 使用Settings Sync同步配置
• 创建团队扩展推荐列表
• 建立代码格式化规范

代码审查

• 集成GitLens进行代码审查
• 使用插件进行代码质量检查
• 配置自动化测试运行

常见问题解决

插件冲突

• 检查插件兼容性
• 禁用冲突插件
• 重新加载窗口

性能问题

• 检查系统资源使用
• 优化大项目配置
• 使用排除文件减少索引

配置丢失

• 使用Settings Sync备份
• 手动导出设置
• 建立配置文档

总结

通过合理配置VS Code，可以：

• 提升编码效率
• 减少重复工作
• 统一开发环境
• 增强调试能力

建议定期：

• 更新插件和VS Code版本
• 检查和优化配置
• 学习新的快捷键和技巧