VSCode中React开发环境搭建与插件推荐

vscode搭建react开发环境只需插件+配置+工具链协同，10分钟内可运行带语法检查、自动格式化和断点调试的项目：装ESLint、Prettier、Snippets、Debugger、Path Intellisense；用vite初始化；配置ESLint与Prettier分工；设置launch.json实现VSCode内断点调试。

VSCode 搭建 React 开发环境，核心是“插件 + 配置 + 工具链”三者协同。不需要重装系统或复杂配置，按步骤来，10 分钟内就能跑起一个带语法检查、自动格式化和断点调试的 React 项目。

必备插件：精简但管用

只装这几个，覆盖开发全流程：

• ESLint：实时报错、提示 props 类型、JSX 语法问题，配合规则能防低级错误
• Prettier – Code formatter：保存时自动缩进、引号、分号统一，不纠结风格
• ES7+ React/Redux/graphql/React-Native Snippets：输入 rafce 回车就生成带 import/export 的函数组件，useE 补全 useEffect，效率翻倍
• Debugger for chrome 或 Debugger for edge：配合 launch.json 实现 .jsx 文件内直接断点调试
• Path Intellisense：导入组件时路径自动补全，比如输入 import Header from './co，立刻提示 components/Header.jsx

项目初始化：推荐 Vite，不是 CRA

Create React App（CRA）够稳，但启动慢、定制难。2025 年主流推荐 Vite：

• 终端运行：npx create-vite@latest my-app -- --template react
• 进目录：cd my-app && npm install
• 启动：npm run dev，默认打开 http://localhost:5173
• Vite 自带 HMR（热更新），改完 JSX 保存，页面秒变，无需刷新

关键配置：让 ESLint 和 Prettier 不打架

两者都格式化代码，必须明确分工——ESLint 管“对不对”，Prettier 管“好不好看”：

多商户双网版电子商城CRMEB系统

基于ThinkPhp6+ swoole4+uniapp 开发的一套CRMEB新零售多商户商城系统。如果不会搭建请到 查看搭建说明系统环境推荐 使用 宝塔配置环境centos PHP7.3 mysql5.6新增功能： 01·新增支持销售虚拟产品自动发货 02.支持销售链接与卡密可导入导出 03.自定义后台路径对后台进行保护 04.新增支持商家缴纳保证金功能 05·违法或侵权商品一键举报功能 06·仲

0

查看详情

• 安装依赖：npm install --save-dev eslint eslint-plugin-react @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier
• 根目录建 .eslintrc.json，内容精简如下：

{ “extends”: [“eslint:recommended”, “plugin:react/recommended”, “plugin:prettier/recommended”], “plugins”: [“react”], “settings”: { “react”: { “version”: “detect” } }, “rules”: { “react/prop-types”: “off” } }

• 建 .prettierrc 定义风格（例如单引号、结尾逗号、2空格缩进）
• VSCode 设置里打开 format on Save，并设 javaScript 默认格式化工具为 Prettier

调试配置：在 .jsx 里直接打断点

不用切浏览器 DevTools，VSCode 里点行号左侧就能加断点：

• 确保项目已运行（npm run dev）
• 在项目根目录创建 .vscode/launch.json，内容如下：

{ “version”: “0.2.0”, “configurations”: [ { “name”: “Debug React in Chrome”, “type”: “chrome”, “request”: “launch”, “url”: “http://localhost:5173”, “webRoot”: “${workspaceFolder}/src”, “sourceMapPathOverrides”: { “webpack:///src/*”: “${webRoot}/*” } } ] }

• 点击左侧面板「运行和调试」→ 选择 Debug React in Chrome → 点绿色三角启动
• Chrome 自动打开，断点生效，变量、调用栈、watch 表达式全支持

基本上就这些。插件不多，配置不深，但每一步都直击日常痛点。写组件快、报错准、格式齐、调试顺——这才是现代 React 开发该有的样子。