react native开发vscode必备三插件：eslint（保障代码规范与错误提示）、react native tools（提供调试与运行命令）、path intellisense（精准路径补全）；禁用auto import等易误判模块的插件。
VSCode 装哪些插件才够用？
React Native 开发在 VSCode 里不靠插件寸步难行，但装太多反而拖慢编辑器。核心就三个：
-
ESLint：必须开，否则eslint-config-airbnb或eslint-plugin-react-native的规则全失效，保存时连基础的undefined is not an object类型警告都看不到 -
React Native Tools：微软官方出品，提供React Native: Run Android/iOS命令、设备选择、断点调试入口；没它，debugger;在 JS 里就是摆设 -
Path Intellisense：补全import路径时能直接识别jsconfig.json里的baseUrl和paths，否则每次写../../../components/Button都得数点
别装 Auto Import 或 Import Cost —— React Native 项目里模块解析路径复杂，它们常把 react-native-screens 误判成 Web 包，自动加错 import。
调试时连不上 Metro 或报 “Could not debug”？
这是最常卡住新人的环节，本质是端口、协议、环境变量三者没对齐。关键检查点：
- 确保终端启动 Metro 时用了
npx react-native start --port 8081（不要改默认端口），否则React Native Tools插件默认只连8081 - 在 iOS 模拟器里摇动调出 Dev Menu 后，点
Debug，此时 Chrome 会打开http://localhost:8081/debugger-ui/—— 如果打不开，说明 Metro 没跑，或被系统防火墙拦截（macOS 用户注意Full Disk Access权限） - VSCode 的
launch.json必须含"request": "attach"且"sourceMaps": true，否则断点永远灰掉：{ "version": "0.2.0", "configurations": [ { "name": "Debug React Native", "type": "reactnative", "request": "attach", "platform": "android", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" } ] }
Android 真机调试提示 “Device not found”？
不是 USB 连接问题，而是 ADB 权限和设备状态没到位：
- 先运行
adb devices，如果输出为空或显示????????，说明驱动未识别 —— Windows 用户需装Google USB Driver，Mac/Linux 用户检查是否执行过adb kill-server && adb start-server - 手机上必须开启「USB 调试」+「安装未知应用」权限，且在「开发者选项」里关闭「仅充电」模式（选「文件传输」或「MTP」）
- VSCode 中按
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入React Native: Run Android，它会自动触发npx react-native run-android，但前提是ANDROID_HOME环境变量已指向正确的 SDK 路径（比如/Users/xxx/Library/Android/sdk）
如果仍失败，临时改用命令行：先 adb reverse tcp:8081 tcp:8081（把手机请求转发回本地 Metro），再 npx react-native run-android --deviceId YOUR_DEVICE_ID（YOUR_DEVICE_ID 来自 adb devices 输出首列）。
如何让断点停在 JSX 或 Hooks 里？
默认配置下，VSCode 断点常跳过 useState 或 useEffect 内部，因为 Babel 编译后源码映射丢失。解决办法只有两个：
- 在项目根目录的
metro.config.js中强制开启源码映射：module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false, }, }), }, server: { port: 8081, }, symbolicator: { customizeFrame: (frame) => { if (frame.file && frame.file.includes('node_modules')) { return null; } return frame; }, }, };并确保sourceMaps: true已启用（见上文launch.json） - 在 JSX 中设断点时，不要点在标签开头（如
<view></view>），而要点在属性值或子组件内部，例如：style={styles.container}这一行，或者{data.map(...)}表达式里 —— 否则 Babel 生成的 render 函数里找不到对应位置
真机调试时，JSX 断点成功率比模拟器低 30% 左右，这不是配置问题，是 Hermes 引擎（尤其 Android 上默认启用）对源码映射支持不完整导致的，暂时无解，只能靠 console.log 配合条件断点迂回。
