0

0

如何利用vscode进行react开发【教程】

夢幻星辰

夢幻星辰

发布时间:2026-01-22 15:38:49

|

270人浏览过

|

来源于php中文网

原创

必须安装ESLint、Auto Import、Bracket Pair Colorizer 2三个扩展,并配置jsconfig.json(含baseUrl和paths)与launch.json(含webRoot等),否则React开发的基础功能如语法检查、自动导入、括号匹配、路径跳转和调试断点均会失效。

如何利用vscode进行react开发【教程】

VS Code 本身不“支持 React”,它靠扩展和配置来适配 React 开发流程——关键不是装什么插件,而是搞清哪些配置缺一不可、哪些扩展只是锦上添花。

必须安装的三个扩展

没它们,连基础开发体验都卡顿:

  • ESLint(由 dbaeumer.vscode-eslint 提供):React 项目普遍用 ESLint 做语法和规则检查,不装它,eslint-config-react-app 或自定义规则不会生效,保存时无提示、无自动修复
  • Auto Importsteoates.autoimport):React 函数组件里频繁 import useStateuseEffect 等,这个扩展能实时补全并自动插入 import 行,避免手写错误或漏引
  • Bracket Pair Colorizer 2coenraads.bracket-pair-colorizer-2):JSX 中嵌套层级深时,括号匹配极易出错;原生 VS Code 的括号高亮在 JSX 中常失效,这个扩展对 {}[] 都有效

jsconfig.json 或 tsconfig.json 不可跳过

没有它,VS Code 的路径智能跳转(Ctrl+Click)、符号查找(Ctrl+Shift+O)和自动导入会大面积失灵,尤其在使用 src/ 别名(如 @/components)时:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@/components/*": ["components/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

注意:baseUrl 必须是相对路径字符串,不能写成 ./srcpaths 中的 key 是模块导入时写的路径,value 是相对于 baseUrl 的实际位置。

科美智能企业网站管理系统标准版(带手机版)6.0
科美智能企业网站管理系统标准版(带手机版)6.0

科美智能企业网站管理系统标准版(带手机版)是以asp+access进行开发的企业网站系统,软件还包含了全站生成静态页面的功能。特别提醒:1.切勿用那些调试软件调试(比如:aspweb、NETBOX、小旋风等),如果您想本地运行源码,请参照赠品中的环境搭建教程。

下载

调试 React 应用必须配 launch.json

直接点 VS Code 的「运行和调试」面板里的绿色三角形,不配置就报错 No debugger configured for 'chrome'

  • 确保已安装 msjsdiag.debugger-for-chrome(新版已整合进 ms-vscode.js-debug,通常自带)
  • 在项目根目录下创建 .vscode/launch.json,内容至少包含:
    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "pwa-chrome",
          "request": "launch",
          "name": "Launch Chrome against localhost",
          "url": "http://localhost:3000",
          "webRoot": "${workspaceFolder}/src",
          "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
          }
        }
      ]
    }
  • 启动前务必先用 npm startyarn start 跑起本地服务,否则 Chrome 打不开

热重载失效?先查 webpack-dev-server 配置是否被覆盖

VS Code 不控制热重载,但编辑器保存行为可能触发意外行为:

  • 关掉 VS Code 的 files.autoSave 设为 onFocusChangeoff,某些场景下快速连按 Ctrl+S 会触发两次保存,导致 webpack-dev-server 误判文件变更顺序而中断 HMR
  • 确认 package.json 中的 start 脚本是 react-scripts start(CRA)或已正确配置 hot: truereact-refresh(Vite / Webpack 5+)
  • 如果用了 cracocustomize-cra,检查其配置是否禁用了 FastRefresh —— VS Code 无法绕过这个层面的开关

最常被忽略的是 jsconfig.jsonbaseUrl 写错,或 launch.jsonwebRoot 指向了 src 外的目录,这两处一错,调试断点根本不会命中,但错误提示极不明显。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

417

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

533

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

310

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

76

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

818

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

735

2023.11.06

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

278

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号