Visual Studio Code配置指南

Visual Studio Code 配置全攻略

原创已于 2025-09-05 14:48:19 修改 · 1.4k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #ide #编辑器

于 2025-08-13 17:47:55 首次发布

VsCode 专栏收录该内容

6 篇文章

订阅专栏

终极 Visual Studio Code 配置指南：打造高效开发环境

一、基础环境配置

安装与初始化
- 官网下载：code.visualstudio.com
- 首次启动后按平台配置：
  - Windows：安装时勾选 “添加到PATH”（方便终端使用code命令）
  - macOS：将VS Code拖入Applications文件夹，然后在命令面板（Ctrl+Shift+P）输入 Shell Command: Install 'code' command in PATH

界面优化设置

打开设置：Ctrl + ,（Windows/Linux）或 Cmd + ,（macOS）
推荐修改项：

请添加图片描述

{
  "workbench.startupEditor": "newUntitledFile",  // 启动时新建文件
  "editor.fontSize": 14,                         // 字体大小
  "editor.lineHeight": 24,                       // 行高
  "files.autoSave": "afterDelay",                // 自动保存
  "window.zoomLevel": 0.5,                       // 界面缩放（按需调整）
}

截图位置：设置界面 > 搜索对应配置项，展示修改后的效果（如字体大小变化）。

二、必装扩展推荐

类别	扩展名	作用	安装命令
主题	One Dark Pro	经典暗色主题	`ext install zhuangtongfa.material-theme`
图标	Material Icon Theme	文件图标美化	`ext install pkief.material-icon-theme`
效率工具	TabNine	AI代码补全	`ext install TabNine.tabnine-vscode`
版本控制	GitLens	增强Git功能	`ext install eamodio.gitlens`
远程开发	Remote - SSH	远程服务器开发	`ext install ms-vscode-remote.remote-ssh`
语言支持	Python	Python智能提示	`ext install ms-python.python`

截图位置：扩展商店页面 > 搜索扩展名 > 展示已安装的扩展列表。

三、高级配置技巧

快捷键自定义

修改 keybindings.json（Ctrl+K Ctrl+S > 右上角齿轮图标）：

[
  {
    "key": "ctrl+shift+l",   // 自定义快捷键
    "command": "editor.action.selectHighlights",
    "when": "editorTextFocus"
  }
]

集成终端优化

修改 settings.json：

{
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.shell.linux": "/bin/zsh",  // 改用Zsh
  "terminal.integrated.cursorStyle": "underline" // 光标样式
}

代码片段自定义

创建代码片段：文件 > 首选项 > 配置用户代码片段

示例（JavaScript）：

"Print to console": {
  "prefix": "log",
  "body": ["console.log('$1');", "$2"],
  "description": "快速打印日志"
}

截图位置：终端效果展示 / 代码片段触发演示（输入 log 按Tab生成完整代码）。

四、工作区与多项目管理

工作区文件配置
- 创建 .vscode/settings.json 覆盖全局设置
- 添加项目专属扩展推荐（.vscode/extensions.json）：
```
{
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}
```
多窗口分屏
- 拖拽编辑器标签到屏幕边缘创建新组
- 快捷键：Ctrl+\（拆分编辑器）

五、调试配置示例（Node.js）

创建 .vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

设置断点 > 按 F5 开始调试

截图位置：调试界面展示断点命中效果。

六、性能优化

// settings.json 中添加：
{
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/tmp/**": true
  }
}

附：配置同步

登录Microsoft/GitHub账号
启用设置同步：Ctrl+Shift+P > 输入 Settings Sync: Turn On
选择同步选项（设置、扩展、按键绑定等）

截图位置：同步设置界面展示同步选项开关。

最终效果参考：请添加图片描述

避坑提示：

扩展冲突：禁用所有扩展后逐个启用排查
配置文件语法：使用JSON格式校验工具（如 JSONLint）
内存占用过高：检查 进程管理器（Ctrl+Shift+Esc）过滤 Code Helper 进程

按照此指南配置后，你将获得一个高度定制化、响应迅速的现代化开发环境。建议定期备份 ~/.vscode 文件夹或通过GitHub同步配置。

*Python版设置：https://blog.youkuaiyun.com/Duckerduck/article/details/150353394?spm=1001.2014.3001.5502
*c++版设置：https://blog.youkuaiyun.com/Duckerduck/article/details/150353598?spm=1001.2014.3001.5502
*html5,JS，CSS配置：https://blog.youkuaiyun.com/Duckerduck/article/details/150385021?spm=1001.2014.3001.5502