VSCode不直接运行前端项目，需依赖项目已有的启动命令（如npm start）和调试插件配置；必须先确保package.json含正确scripts，再配launch.json及安装对应浏览器调试扩展。
VSCode 本身不直接“运行”前端项目，它靠调用你项目里已有的启动命令（比如 npm start、pnpm dev 或 vite）来启动开发服务器；调试则依赖浏览器扩展和 launch.json 配置，不是开箱即用。
确认项目已有可执行的启动脚本
VSCode 不会替你写 package.json 里的 scripts。如果你运行 npm run dev 报错或没反应，先检查 package.json 是否定义了对应脚本：
-
"dev": "vite"（Vite 项目） -
"start": "react-scripts start"（CRA） -
"serve": "vue-cli-service serve"（Vue CLI）
没有就补上，否则 VSCode 的任何配置都起不来。别跳过这步——很多“配置无效”问题根源在此。
用终端手动启动比配置任务更可靠
绝大多数前端项目，直接在 VSCode 内置终端执行 npm run dev 就能启动服务并热更新，不需要额外配 tasks.json。VSCode 的 Tasks 主要用于构建、打包、lint 等非交互式流程，而不是日常开发服务器。
立即学习“前端免费学习笔记（深入）”；
如果你硬要配启动任务（比如想一键启动+打开浏览器），注意：
- 任务类型必须设为
"shell"或"process"，不能用"shell" + "isBackground": true混搭，否则 VSCode 会卡在“正在运行任务”状态 - 不要在
tasks.json中重复实现npm已支持的逻辑，比如自动检测端口、重载——这些是框架自己的事 - 任务输出路径若含中文或空格，可能触发 shell 解析错误，建议项目路径全英文无空格
调试需装插件 + 正确配置 launch.json
默认 VSCode 无法调试浏览器中的 JS，必须安装官方扩展 Debugger for Edge 或 Debugger for Chrome（取决于你用的浏览器）。然后在项目根目录建 .vscode/launch.json，内容类似：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*"
}
}
]
}
关键点：
-
url必须和你实际启动的服务端口一致（如 Vite 默认5173，Create React App 是3000） -
type值取决于你装的插件：pwa-chrome对应 Chrome 插件，pwa-msedge对应 Edge 插件 - 如果断点不命中，大概率是
sourceMapPathOverrides没匹配上构建工具生成的 sourcemap 路径，需按实际打包输出调整
环境变量和端口冲突是最常被忽略的细节
前端项目常依赖 .env 文件，但 VSCode 的调试配置默认不加载它们。若你的 VITE_API_URL 或 REACT_APP_ENV 在调试时失效，得在 launch.json 里显式注入：
"env": {
"NODE_ENV": "development"
}
另外，端口被占用时，有些框架（如 Vite）会自动换端口（如从 5173 切到 5174），但 launch.json 里的 url 不会自动同步——你得手动改，或者用 runtimeArgs 启动参数强制指定端口。
