如何在Visual Studio 2022 Mac中正确连接create-react-app项目

核心原因 #

Mac版Visual Studio的目录加载逻辑和VS Code完全不同，它不会自动识别任意文件夹为可加载项目，仅会识别包含对应格式项目文件（.sln、.njsproj、.csproj等）的目录，文件夹不显示、置灰问题本质都是目标目录缺少VS可识别的项目标识文件。

从零创建可识别React项目的步骤 #

• 打开终端，进入你计划存放项目的上级目录，执行命令生成React基础项目：npx create-react-app my-first-react-app，等待依赖安装完成后关闭终端提示。
• 启动Mac版Visual Studio，在启动界面选择「新建项目」，在模板分类中找到 Node.js/Web 分类，选择「空白Node.js Web应用」模板，点击继续。
• 项目名称填写和刚才生成的React项目完全一致的my-first-react-app，项目存储位置选择刚才执行create-react-app命令的上级目录（不要选到my-first-react-app文件夹内部），点击创建。
• 创建完成后，VS会自动生成匹配的.njsproj项目配置文件，此时在解决方案资源管理器里就能看到所有create-react-app生成的目录和文件，不会出现识别失败的问题。

已有create-react-app项目的加载方法 #

如果已经提前通过create-react-app生成了项目，不需要重建，按以下步骤操作即可：

• 打开终端进入已有的React项目根目录，确认目录下存在package.json文件，没有的话执行npm init -y生成。
• 启动Visual Studio，选择「新建项目」，在Node.js分类下找到「从现有Node.js代码创建项目」模板，按向导提示选中已有的React项目目录。
• 向导中配置启动文件为src/index.js，Web根目录选择public文件夹，完成配置后VS会自动在项目目录下生成适配的项目文件，目录就不会再显示为灰色。

两类失败操作的问题说明 #

• 先在VS新建项目再在目录内执行create-react-app：VS新建项目时会生成专属的项目文件清单，后续通过命令生成的新文件夹没有被加入这份清单，VS默认不会自动扫描显示新增的未登记目录。
• 直接选择create-react-app生成的文件夹打开：create-react-app默认不会生成Visual Studio专属的项目配置文件，VS的文件选择器会自动把这类无有效项目标识的目录置灰，禁止直接加载。

基础运行配置 #

项目正常加载后，右键项目名称打开属性面板，找到启动配置项，将启动命令修改为npm start，工作目录绑定项目根目录，保存后点击顶部运行按钮，即可直接在VS内启动React开发服务，自动打开预览页面。

内容的提问来源于stack exchange，提问作者gwhiz