vscode中launch.json、tasks.json的作用及实例

launch.json是什么

• 顾名思义：它是在.vscode文件夹下的launch.json，所以是vscode启动调试的配置文件。
• 总结：通过定义调试参数、环境变量和启动方式，帮助开发者快速启动和调试代码。

作用

• 简化调试流程：通过预设参数（如启动文件、命令行参数、环境变量等），避免每次调试时手动输入重复命令。
• 支持多环境调试：可同时配置多个调试方案，一键切换不同场景。

多环境调试简单实例

• 假设现在你要写一个工具，需要用到多种语言（node.js、python等）
• 每个单独的nodejs/py文件运行都需要在命令行/terminal输入一下调用的命令及文件名（很麻烦）
• 为了简化运行，配置如下launch.json：

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "调试extracted.js","skipFiles": ["<node_internals>/**"],"program": "${workspaceFolder}\\tool_chinese_strings_extracted.js"},{"type": "node","request": "launch","name": "调试log.js","skipFiles": ["<node_internals>/**"],"program": "${workspaceFolder}\\tool_log.js"},{"type": "node","request": "launch","name": "调试testBp.js","skipFiles": ["<node_internals>/**"],"program": "${workspaceFolder}\\testBp.js"},{"name": "调试py_replace","type": "debugpy","request": "launch","program": "${workspaceFolder}\\tool_replacer.py",},{"name": "调试py_genxls","type": "debugpy","request": "launch","program": "${workspaceFolder}\\tool_excel_generator.py",},{"name": "调试py_notepad","type": "debugpy","request": "launch","program": "${workspaceFolder}\\tool_log.py",}]
}

• 得到快捷F5执行列表：
  
• 这样就很方便（以上是简单的示例）。

进阶使用

核心配置项解析

{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"name": "Python: 当前文件", //调试方案的名称（显示在调试下拉菜单中）"type": "python", //调试器类型（如 python、node、cppdbg、chrome、debugpy等）//调试启动方式，常用 launch（启动新进程）或 attach（附加到已有进程）"request": "launch", //调试启动方式// （${file} 表示当前打开的文件）    ${workspaceFolder} 表示项目根目录"program": "${file}", //要运行的程序入口文件//指定要调试的入口文件（例如 HTML 文件）。在浏览器调试场景中，替代 program 字段。             "file": "${workspaceRoot}/bin/index.html",//控制台类型（如 integratedTerminal 使用VSCode内置终端）"console": "integratedTerminal", "args": ["--input", "data.txt"], //传递给程序的命令行参数"env": {"DEBUG_MODE": "true"} //设置环境变量// 以下可选参数// 默认使用系统默认浏览器，但可通过此字段自定义（如："C:/chrome.exe"）"runtimeExecutable": "chrome" //"${execPath}" //${execPath} 表示 VS Code 的安装路径// 启用源映射（Source Maps），将压缩/编译后的代码映射回原始源代码，便于调试。"sourceMaps": true // (适用于 TypeScript、Babel 等转译场景。// 定义 Web 服务器的根目录路径，帮助调试器定位源代码文件（尤其是与源映射配合时）。"webRoot": "${workspaceRoot}" //表示项目根目录为 Web 根目录。"port": 8090 //指定调试会话使用的端口号（默认由调试器自动分配）。// 向浏览器运行时传递命令行参数，用于控制浏览器行为（例如禁用安全策略、启用文件访问）"runtimeArgs": ["--allow-file-access-from-files", //允许通过 file:// 协议访问本地文件。"--disable-web-security" //禁用浏览器同源策略（开发时常用，但需谨慎）。]//指定 Chrome 浏览器的用户数据目录。//通过隔离用户数据（如缓存、历史记录），避免调试会话影响日常浏览器使用。"userDataDir": "${workspaceRoot}/.laya/chrome" //将用户数据存储在项目目录下的 .laya/chrome 文件夹中。//覆盖源映射（Source Maps）中的路径，解决编译后路径与本地路径不一致的问题。"sourceMapPathOverrides": { //将编译后代码中的 src/ 路径映射到本地项目的 src/ 目录。"src/": "${workspaceRoot}/src/"}// 指定调试时要跳过的文件或目录，避免进入无关代码（如Node.js内部模块或第三方库）//让调试过程聚焦于用户自己的代码。//<node_internals> 是VSCode预定义的路径别名，表示Node.js的核心模块（如fs、path等）。//  /** 表示跳过所有子目录和文件。调试时，单步调试（如F10）会直接跳过这些文件，不会进入其内部。"skipFiles": ["<node_internals>/**"]"skipFiles": [ //这会同时跳过Node核心模块和项目的node_modules目录"<node_internals>/**","${workspaceFolder}/node_modules/**"]}]
}

调试第三方程序

• 通过 “preLaunchTask” 和 “postDebugTask” 配置调试前后自动执行的任务（需配合 tasks.json 使用）。
• 简单实例：

// 创建 tasks.json（在 .vscode 文件夹下）
{"version": "2.0.0","tasks": [{"label": "安装依赖",       // 任务名称（在 launch.json 中引用）"type": "shell",         // 任务类型（执行shell命令）"command": "npm install",// 调试前自动安装依赖"problemMatcher": []},{"label": "清理临时文件","type": "shell","command": "rm -rf ./tmp/*", // 调试后清理临时文件（Windows 可用 `del .\\tmp\\*`）"problemMatcher": []}]
}

//launch.json（通过tasks的label关联任务）
{"version": "0.2.0","configurations": [{"name": "启动调试","type": "node","request": "launch","program": "${workspaceFolder}/app.js",//调试启动前必须完成的任务（若任务失败，调试不会启动）。"preLaunchTask": "安装依赖",   // 调试前自动执行的任务名称 // 调试结束后自动触发的任务（无论调试成功或失败）。"postDebugTask": "清理临时文件" // 调试后自动执行的任务名称}]
}

• 执行流程说明：
  1.启动调试（按 F5）时：
  – 先执行 preLaunchTask → 运行 npm install 安装依赖。
  – 依赖安装成功后，启动调试（运行 app.js）。
  2.结束调试 后：
  – 自动执行 postDebugTask → 清理 ./tmp 目录下的临时文件。