vscode终端本身不提供原生文件监听+自动执行能力，必须依赖chokidar-cli、watchexec等外部工具或shell机制；npm run watch失效常因脚本配置错误、未在项目根目录启动、端口冲突或path缺失导致。
VSCode 终端本身不提供原生的文件监听 + 自动执行能力，必须依赖外部工具（如 chokidar-cli、nodemon、watchexec）或 shell 内置机制（如 inotifywait）来实现。
为什么直接用 npm run watch 有时不生效
很多项目脚手架（如 Vue CLI、Create React App）自带 watch 脚本，但它们默认只监听源码目录，且行为受 package.json 中 script 定义约束。常见失效原因包括：
-
package.json中的watch脚本未正确配置入口或忽略路径（例如漏掉public/或config/） - 终端启动时未处于项目根目录，导致
npm找不到package.json—— 可用pwd和ls package.json验证 - 某些 watch 工具（如 Webpack Dev Server）默认绑定
localhost:8080，若端口被占，会静默失败而非报错 - macOS 上使用 zsh 时，若
node_modules/.bin未加入$PATH，可能提示command not found: webpack-dev-server
chokidar-cli 是最轻量可靠的跨平台选择
它不依赖 Node.js 运行时环境，纯命令行驱动，适配 bash/zsh/PowerShell，且支持 glob 模式和多命令链式执行：
- 安装：
npm install -g chokidar-cli（全局）或npm install chokidar-cli --save-dev（项目级） - 基础用法：
chokidar "**/*.ts" -c "tsc --noEmit && echo 'TypeScript compiled'" - 排除路径：
chokidar "src/**/*" --ignored "src/test/**" -c "npm test" - Windows PowerShell 用户需加
--shell powershell参数，否则命令解析可能出错
注意：chokidar-cli 默认递归监听，大量文件（如 node_modules）会导致 inotify 资源耗尽（Linux/macOS），务必用 --ignored 显式排除。
watchexec 更适合复杂工作流
相比 chokidar-cli，watchexec 启动更快、内存占用更低，且原生支持退出上一进程（避免端口冲突）：
- 安装：
curl -L https://github.com/watchexec/watchexec/releases/download/v1.24.0/watchexec_1.24.0_amd64.deb | sudo dpkg -i -（Linux deb）；macOS：brew install watchexec - 安全重启服务：
watchexec -e "js,ts" --on-change "npm run dev" --restart - 组合多个命令：
watchexec -e "css,scss" --on-change "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css" --on-initial "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css"
关键点：--restart 会 kill 掉前一个 npm run dev 进程再启动新的，避免 EADDRINUSE 错误；而 --on-initial 确保首次运行也触发，不是只等变更。
终端分屏 + 命名让监控更可控
在 VSCode 中，不要把所有事堆在一个终端里。分屏后分别命名，能快速识别状态：
- 快捷键
Ctrl + \（Windows/Linux）或Cmd + \（macOS）垂直拆分终端 - 右键任一终端标签 →
Rename Terminal，输入Watch、Server、Logs等语义化名称 - 在
Watch面板运行watchexec，Server面板保持npm run dev，Logs面板可跑tail -f ./logs/app.log
容易被忽略的是：VSCode 终端关闭后，后台进程未必自动终止（尤其 watchexec 或 nodemon）。手动关闭前建议先 Ctrl + C，否则残留进程可能持续占用资源或端口。
