掌握 settings.json、launch.json、tasks.json 等核心配置,让你的开发环境真正为你所用
VSCode 的所有配置文件都藏在 .vscode/ 目录中。点击每个文件了解它的职责。
.vscode/ 文件夹是工作区配置的家。这里的设置只对当前项目生效,不会影响其他项目。
控制编辑器的外观、行为和扩展。包括字体大小、主题色、格式化规则、文件排除模式等。
关键特性:支持语言特定配置,比如只在 Python 文件中设置 4 空格缩进:
常用设置项一览:
• editor.formatOnSave — 保存时自动格式化
• editor.defaultFormatter — 指定默认格式化工具
• files.autoSave — 自动保存模式 (afterDelay / onFocusChange)
• search.exclude — 搜索结果中排除的路径
• terminal.integrated.defaultProfile — 默认终端
定义调试配置(configurations)。告诉 VSCode 如何启动程序、附加调试器、设置断点。
核心概念:
• request: "launch" — 启动新进程并附加调试器
• request: "attach" — 附加到已运行的进程
• compounds — 同时启动多个调试配置
• ${file} / ${workspaceFolder} — 内置变量替换
定义自动化任务:编译、打包、测试、lint 等。通过快捷键或命令面板触发。
• type: "shell" — 执行 shell 命令
• type: "process" — 直接执行可执行文件(更安全)
• group: "build" — 可用 Ctrl+Shift+B 触发
• problemMatcher — 自动解析错误输出并在编辑器中标记
声明项目推荐的扩展。团队成员打开项目时,VSCode 会提示安装缺失的扩展。
这个文件应当提交到 Git,让团队所有人的开发体验一致。
自定义键盘快捷键。注意:这个文件通常位于用户配置中,不在 .vscode/ 里。
打开方式:Ctrl+K Ctrl+S → 右上角点击"打开键盘快捷方式(JSON)"。
• command 前加 - 表示移除该快捷键绑定
• when 上下文条件控制快捷键何时生效
定义多根工作区,将多个独立文件夹组合成一个开发环境。
多根工作区中,每个文件夹可以有自己独立的 .vscode/settings.json,优先级高于工作区文件中的全局设置。
同一项设置可能出现在多个地方,VSCode 按以下顺序决定最终生效的值(越靠右优先级越高):
💡 实践建议:
把个人偏好(主题、字体大小)放在用户设置中;把项目规范(缩进风格、lint 规则、格式化器)放在工作区设置中,并提交到 Git。这样团队成员 clone 项目后自动获得统一的编码体验。
在这里自由编辑各种配置文件,点击"校验 JSON"检查语法是否正确。切换标签页查看不同文件的模板。
通过 4 个渐进级别,从认识到精通 VSCode 配置。每完成一级,你的掌控力就上升一个台阶。
先通过阅读和填空练习,建立对各配置文件的直觉认识。
下面是一个 React 项目的 settings.json,请在注释标记处填入合适的值:
tabSize 通常是 2 或 4;formatOnSave 用 true;autoSave 推荐 afterDelay;排除项填 true。
根据描述,判断应该使用哪个配置文件:
学会编写 launch.json,让 VSCode 能调试你的项目。
你有一个 Flask Web 应用(app.py),需要能启动调试并传入环境变量。请补全缺失部分:
name 随便起,比如 "Flask 调试";request 启动新进程用 launch;program 入口文件是 app.py;FLASK_DEBUG 设为 "1" 或 "true";justMyCode 一般设为 true。
为一个 TypeScript 项目编写 tasks.json,需要两个任务:编译和监听模式。请补全:
type 执行 shell 命令用 "shell";group.kind 编译任务用 "build";TypeScript 的 problemMatcher 是 $tsc;后台监听任务 isBackground 设为 true。
独立为一个完整项目编写所有配置文件,不再提供任何代码提示。
场景:你有一个全栈项目,前端 React + 后端 Node.js Express。项目结构如下:
project/ (frontend/ + backend/ + shared/)
请编写以下配置文件(在右侧文本框中,用注释分隔三个文件的内容):
需求:
1. settings.json — 2空格缩进,保存自动格式化,排除 node_modules/dist 的搜索
2. launch.json — 至少两个调试配置(前端 Chrome + 后端 Node),以及一个 compound
3. tasks.json — 至少两个任务(前端构建 + 后端启动)
settings.json:参考 Level 1 的模板。
launch.json:前端用 "type": "chrome", "request": "launch", "url": "http://localhost:3000";后端用 "type": "node", "program": "${workspaceFolder}/backend/index.js"。compounds 把两者组合起来。
tasks.json:前端 "command": "npm run build", group build;后端 "command": "npm start"。
选择一个方向深入探索,没有脚手架,完全靠自己。
A. 多根工作区实战
创建一个 .code-workspace 文件,将三个独立项目(前端、后端、共享库)组合为一个工作区。为每个根文件夹配置独立的 settings,实现不同缩进规则和格式化器的共存。
B. 自定义 ProblemMatcher
为一个自定义构建工具编写 problemMatcher 配置。要求:能解析该工具的输出格式,自动在编辑器中标记错误位置和严重程度。研究 $eslint / $tsc 的实现模式。
C. 开发环境模板化
设计一套可复用的 VSCode 配置模板,适用于"Python + Docker + 测试"场景。包含:settings.json、launch.json(Python远程调试 + Docker attach)、tasks.json(docker build/run/test 全流程)、extensions.json。编写 README 说明每个配置项的用途。
检验你对 VSCode 配置体系的理解。每题选择后立即反馈。
悬停或点击术语查看定义。