vs code react开发应装eslint、prettier、reactjs code snippets插件，禁用javascript nightly、react native tools等冲突插件；需正确配置jsconfig.json/tsconfig.json的baseurl和paths；确保eslint-plugin-react-hooks启用并全局校验；排查热重载问题需关闭残留进程、调整auto save模式及wsl2主机配置。
装什么插件才不踩坑
VS Code 本身不带 React 支持，但装错插件反而会让 JSX 高亮错乱、自动补全失效，甚至和 ESLint 冲突。ESLint 和 Prettier 插件必须装，Reactjs code snippets（作者：charalampos karypidis）能补全常用 hooks，但别装“Auto Import”这类激进自动导入插件——它常把 useState 错导成 react-dom 下的同名函数。
容易踩的坑：
-
JavaScript and TypeScript Nightly插件会覆盖 VS Code 自带语言服务，导致useEffect依赖数组提示失灵，建议禁用 - 如果项目用
Vite，别装 “React Native Tools”，它会劫持Ctrl+Click跳转，指向错误的 node_modules 路径 -
Path Intellisense对import路径补全有帮助，但开启后可能和Volar（Vue 专用）冲突，纯 React 项目可不装
jsconfig.json 或 tsconfig.json 怎么配才让跳转不迷路
没配好 jsconfig.json，Ctrl+Click 点 import Button from '@/components/Button' 就打不开文件。核心是告诉编辑器“@”到底指哪——不是靠插件猜，而是靠配置。
实操建议：
- 在项目根目录放
jsconfig.json（TS 项目用tsconfig.json），写死"baseUrl": "src" - 加
"paths": { "@/*": ["*"] }，不是["@/*"]或["src/*"]——前者语法错，后者会让路径解析多套一层 - 改完立刻重启 VS Code 窗口（不是重载窗口），否则缓存不刷新，跳转还是失败
- 如果用
create-react-app，默认已有jsconfig.json，但常被手动删掉；Vite 项目则完全不生成，必须手建
ESLint 报红但代码能跑，怎么让它真有用
常见现象：ESLint 提示 React Hook useEffect has a missing dependency，但页面没报错、热更新也正常。这不是警告级别低，是规则没生效或配置错位。
关键点：
- 确保项目里装了
eslint-plugin-react-hooks，且.eslintrc.js中启用了'react-hooks/rules-of-hooks'和'react-hooks/exhaustive-deps' - VS Code 的 ESLint 插件默认只校验打开的文件，要全局生效，得在设置里开
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"] - 如果用 Prettier，
eslint-config-prettier必须放在 extends 数组最后，否则它关不掉其他配置里的冲突规则 - 遇到
Cannot find module 'react'类报错，八成是 ESLint 运行时用了全局 Node 模块而非项目本地的node_modules，在 VS Code 设置里指定"eslint.runtime": "node"并确认路径对
热重载失效或控制台疯狂刷 log 怎么调
不是 React 本身问题，是 VS Code 的 Debugger for Chrome 或 Code Runner 插件在抢端口、重复监听，或者终端没关干净。
排查顺序：
- 关掉所有终端页签，再用 VS Code 内置终端运行
npm run dev（不要用外部 Terminal） - 检查有没有多个
localhost:3000进程在跑，用lsof -i :3000（macOS/Linux）或netstat -ano | findstr :3000（Windows）杀掉残留 - 禁用
Auto Save设为afterDelay，别用onFocusChange——它会在你切到浏览器瞬间触发保存，导致 HMR 多次重载 - 如果用 WSL2，确保
devServer.host在vite.config.ts里设为'0.0.0.0'，否则 VS Code 的端口转发不生效
React 开发环境最麻烦的从来不是“能不能跑”，而是“为什么跳转不到”“为什么改了没反应”“为什么 ESLint 当耳旁风”——这些都卡在配置细节里，差一个斜杠、少一次重启，就卡半天。
