VS Code怎么配置React开发环境-VSCode-PHP中文网

vs code react开发核心是配置而非插件：必须配置jsconfig.json（ts项目用tsconfig.json）的baseurl为"src"、paths为{"@/":[""]}并重启窗口；必须装eslint和prettier，禁用javascript nightly和auto import，启用eslint.validate包含"javascriptreact"。

vs code怎么配置react开发环境

VS Code 本身不支持 React，装插件只是第一步，真正起作用的是配置；没配对 jsconfig.json 或 tsconfig.json，Ctrl+Click 跳转就失效，useEffect 依赖提示也丢，ESLint 报错和自动修复大概率不生效。

哪些插件真有用、哪些必须禁用

插件不是越多越好，冲突比缺失更伤开发流：

ESLint（dbaeumer.vscode-eslint）必须装，且要启用 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
Prettier 和 ES7+ React/Redux/React-Native snippets 是高频刚需，前者格式化 JSX 换行缩进，后者按 rfc 快速生成函数组件
禁用 JavaScript and TypeScript Nightly：它会覆盖 VS Code 自带语言服务，导致 useEffect 依赖数组提示失灵、useState 类型推导变弱
别装 Auto Import：它常把 useState 从 react 错导成 react-dom，或把 useMemo 导成未导出的内部函数
Path Intellisense 对路径补全有帮助，但若项目同时用 Vue（装了 Volar），二者会冲突，纯 React 项目可不装

jsconfig.json 怎么写才让 @/components 正确跳转

没这个文件，或者写错一行，@/Button 就点不开——不是插件问题，是路径解析根本没告诉编辑器“@”代表什么：

VS Code Node

通过作为 OpenClaw 节点连接的 VS Code/Cursor IDE 操作代码，提供 40 多种命令，涵盖文件操作、语言智能、Git、测试等功能。

下载

在项目根目录新建 jsconfig.json（TS 项目用 tsconfig.json），内容必须含：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    },
    "jsx": "react-jsx"
  }
}

"@/*": ["*"] 不是 ["@/*"]（语法错），也不是 ["src/*"]（会导致解析多套一层，@/utils 变成 src/src/utils）
改完必须完全重启 VS Code 窗口（Cmd/Ctrl+Shift+P → “Developer: Reload Window” 不够，缓存不刷新）
create-react-app 默认自带该文件，但常被误删；Vite 项目则完全不生成，必须手建

ESLint 报红但代码能跑，说明规则没真生效

常见现象：React Hook useEffect has a missing dependency 提示飘着，但热更新照常、页面不报错——这不是警告级别低，是 ESLint 根本没校验到 JSX 文件：

检查 VS Code 设置里是否启用了 eslint.validate，必须包含 "javascriptreact"（不是只写 "javascript"）
确保项目根目录有 eslint.config.js 或 .eslintrc.cjs，且已启用 eslint-plugin-react-hooks
如果用 Vite，确认 eslint.config.js 中 files 字段包含 ["**/*.jsx", "**/*.tsx"]
保存时自动修复需配 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }，仅靠 formatOnSave 不触发 ESLint 修复

jsx 文件语法高亮和 Emmet 补全失效怎么办

VS Code 默认把 .jsx 当普通 JS 处理，JSX 特性全丢：

在 VS Code 设置中搜 files.associations，加这一行：
```
"*.jsx": "javascriptreact"
```
关闭 javascript.suggest.autoImports（默认开启），否则在 JSX 里打 use 会补全出 use 全局变量，而不是 React hooks
Emmet 在 JSX 中默认不启用，需在 settings.json 加：
```
"emeraldwalk.runonsave": {
  "commands": [
    "editor.action.formatDocument"
  ]
}
```
或手动在 JSX 文件右上角点击「Select Language Mode」→ 选 JavaScript React