VSCode 中 loader/action 报错、断点不命中、JSX 高亮异常，根源在于 Remix 类型声明未加载、source map 配置不当及 HMR 未监听 entry 文件；需分别配置 tsconfig.json 的 "types"、launch.json 的 "resolveSourceMapLocations" 和 remix.config.js 的 future 开关。
loader 和 action 报错、断点不命中、JSX高亮异常——这些问题不是 VSCode 坏了，而是 Remix 的类型声明、source map 和构建链路没对齐。
VSCode 不识别 loader/action 类型
现象是路由文件里写 export function loader()，却提示 “Cannot find name 'loader'”，参数也没智能提示。
根本原因是 TypeScript 语言服务没加载 Remix 的增强类型。Remix v2+ 的类型声明不在 remix 或 @remix-run/node 包里，而在 @remix-run/dev 的 index.d.ts 中。
- 检查
tsconfig.json的"types"字段是否包含"@remix-run/dev"（不是node，也不是remix） - 确认
node_modules/@remix-run/dev/index.d.ts存在；若用 pnpm/yarn PnP，可能因链接方式失效，可临时改用npm install验证 - 在任意
.tsx路由文件顶部加一行import "@remix-run/dev";（仅用于触发 TS 类型注册，运行时无副作用）
VSCode 调试时断点显示为空心圆（unbound）
用 npm run dev 启动后按 F5，断点不生效，说明 source map 没被正确解析或路径映射失败。
Remix 的 remix dev 命令基于 esbuild，默认生成 inline source map，但 VSCode 的 Node.js 调试器需要显式启用并限定解析范围。
- 确保
.vscode/launch.json中调试配置的"type"是"node"，且"request"为"launch" -
"runtimeExecutable"设为"npx"，"runtimeArgs"设为["remix", "dev"] - 必须设置
"sourceMaps": true和"resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"] - 不要用
nodemon或concurrently包裹remix dev——它们会破坏进程父子关系，VSCode attach 不到真实 Node 实例
entry.client.tsx 修改后不触发热更新（HMR）
改了客户端入口，浏览器没刷新，控制台也无 HMR 日志。这不是 bug，是 Remix 的 HMR 设计限制：它只监听路由模块和资源文件，entry.* 文件默认不纳入监听范围。
- 手动重启
npm run dev是最稳妥的做法 - 如需局部热替换，可在
remix.config.js中添加future.v3_routeConvention: true（v2.10+），并配合unstable_singleFetch: true提升客户端更新粒度 - 避免在
entry.client.tsx里写业务逻辑；它应只做 ReactDOM.createRoot + hydrate，把逻辑下沉到root.tsx或自定义 hook 中
Remix 的开发体验高度依赖构建层与编辑器的协同。类型、断点、HMR 这三处最容易卡住人，但每处背后都对应一个明确的配置锚点：一个是 tsconfig.json 的 types，一个是 launch.json 的 resolveSourceMapLocations，一个是 remix.config.js 的 future 开关。漏掉任何一个，都会让整个流程“看起来像坏了”。
