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 项目若使用
<script setup></script>，确保launch.json中添加"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }，否则断点不生效
最常被跳过的一步是验证 node_modules 是否真被正确安装——删掉整个 node_modules 和 package-lock.json，重新 npm install，比反复改配置更有效。
