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 目录下的临时文件。