如何在VSCode中搭建React或Vue.js前端项目？【教程】_网络技术

VSCode不创建项目，仅编辑调试；React用create-react-app或vite、Vue用npm create vue@latest初始化，再用VSCode打开文件夹；必装ESLint、Prettier及Volar（Vue）或ES7 snippets（React）；调试需配置launch.json并启用sourceMap。

VSCode 本身不“搭建”项目，它只是编辑器；真正创建 React 或 Vue.js 项目得靠对应脚手架（create-react-app、npm create vue@latest 等），VSCode 负责打开、编辑、调试已生成的项目。

用官方脚手架初始化项目，别手动建文件夹

很多人误以为在 VSCode 里新建文件夹 → 新建 index.html 就算“搭了 React”，结果连 JSX 都不解析。React 和 Vue 的工程化依赖构建工具（如 Vite、Webpack），必须用 CLI 初始化。

React 推荐用 npx create-react-app my-react-app（或更轻量的 npx create-vite@ latest my-react-app --template react）
Vue 必须用 npm create vue@latest（Vue 3 官方只维护此方式，vue-cli 已停止更新）
执行完命令后，直接在 VSCode 中用 File → Open Folder... 打开生成的文件夹，不要试图“从零写一个 package.json”

安装关键插件：ESLint + Prettier + 对应框架支持

没有这些插件，VSCode 无法识别 .vue 单文件组件语法、不能实时报错 JSX 错误、格式化会破坏 Composition API 的括号风格。

必装：ESLint（微软官方插件）、Prettier（确保保存时自动格式化）
React 项目额外装：ES7+ React/Redux/React-Native snippets（补全 useEffect 等常用钩子）
Vue 项目额外装：Volar（Vue 3 官方推荐，替代已废弃的 Vetur）
注意：Volar 和 TypeScript 插件有冲突可能，若 TS 类型提示失效，在 VSCode 设置中搜索 "volar.enableTakeOverMode" 设为 true，然后重启窗口

启动开发服务器前，确认终端在项目根目录

VSCode 内置终端（Ctrl+`）默认打开位置不一定是你的项目文件夹，常有人在桌面或用户目录下敲 npm run dev，报错 npm ERR! Missing script: "dev"。

打开终端后，先执行 pwd（macOS/Linux）或 cd（Windows）确认路径是否含 package.json
React（CRA）用 npm start；Vite 项目统一用 npm run dev；Vue 官方脚手架生成后也默认是 npm run dev
如果提示 command not found: vite，说明没全局安装且本地 node_modules/.bin 未被识别——别装全局 vite，直接用 npx vite 更安全

调试时别只看浏览器控制台，要连上 VSCode 的 Debugger

React/Vue 源码是经过打包转换的，浏览器断点打在编译后代码上根本找不到对应行。必须通过 VSCode 的 Debugger for Chrome 或 Debugger for Edge 插件，配合 launch.json 映射源码。

按 Ctrl+Shift+P 输入 “Debug: Open launch.json”，选择 “Chrome” → “Launch with default settings”
修改生成的 launch.json 中的 url 字段为 "http://localhost:5173"（Vite 默认端口）或 "http://localhost:3000"（CRA）
在 .jsx 或 .vue 文件中打断点，按 F5 启动调试——此时断点会停在原始源码，不是 node_modules 里的打包产物
Vue 项目若使用，确保 launch.json 中添加 "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }，否则断点不生效

最常被跳过的一步是验证 node_modules 是否真被正确安装——删掉整个 node_modules 和 package-lock.json，重新 npm install，比反复改配置更有效。

# linux # vue # react # vscode # html # js # 前端 # json # node # vue.js # vite # typescript # chrome # npm # edge # webpack # for

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】