npm run 启动前端项目不生效时，需检查 package.json 的 scripts 字段是否正确定义（如 "start": "vite"）、终端是否在项目根目录、脚本名是否匹配（如 dev 而非 start），并确保 node_modules 已安装。
npm run 启动前端项目时命令不生效？检查 package.json 的 scripts 字段
VSCode 本身不直接“运行前端项目”，它依赖 npm run 调用 package.json 中定义的脚本。如果点击 npm start 没反应，大概率是 scripts 里没配对或拼写错误。
-
"start": "vite"（Vite 项目）和"start": "react-scripts start"（CRA）不能混用 - 确保终端在项目根目录下启动：VSCode 的集成终端需打开正确文件夹，否则报错
npm ERR! Missing script: "start" - 部分项目用
"dev"而非"start"，比如 Vue CLI 默认是"dev": "vue-cli-service serve"
在 VSCode 里直接运行 npm 脚本：用 NPM Scripts 扩展或终端快捷键
VSCode 原生支持快速触发 npm 脚本，不用手动敲命令。
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入NPM Scripts，选择npm: Run Script - 如果没看到该选项，安装官方扩展
NPM Scripts（by eg2）即可 - 更轻量的方式：打开集成终端（
Ctrl+`），直接输入npm run dev或npm start - 注意：某些脚本如
build是一次性命令，而dev/start是长期监听进程，关闭终端即停止服务
调试前端项目：launch.json 配置 chrome 或 edge 启动并附加调试器
VSCode 的 Debugger 不是直接跑 npm 脚本，而是启动浏览器并连接到已运行的开发服务器（比如 vite 或 webpack-dev-server）。所以必须先确保服务已启动。
- 在项目根目录创建
.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必须与你npm run dev启动的服务端口一致（Vite 默认:5173，React 默认:3000，Vue CLI 默认:8080） - 使用 Edge 时把
"type": "pwa-chrome"改成"pwa-msedge" - 如果断点不命中，检查浏览器是否禁用了 JavaScript 源映射，或确认构建工具输出了
sourceMap: true
常见报错与绕过方式：EACCES 权限、端口被占、找不到模块
这些不是 VSCode 的问题，但会在 VSCode 终端里暴露得特别明显。
立即学习“前端免费学习笔记（深入）”；
-
npm ERR! code EACCES：Linux/macOS 下权限问题，不要用sudo npm install，改用npm config set prefix ~/.local并重装 Node -
ERROR: port 3000 is already in use：查进程lsof -i :3000（macOS/Linux）或netstat -ano | findstr :3000（Windows），再kill -9 PID -
Cannot find module 'vite'：说明node_modules没装全，运行npm install再试；若用 pnpm/yarn，确保用对应命令安装 - VSCode 自动补全
npm run脚本失败？重启 VSCode 或执行Developer: Reload Window
真正卡住的时候，往往不是配置写错了，而是服务根本没起来——先在终端里手动跑一遍 npm run dev，看到 Local: http://... 再去配调试。
