【React】win系统环境搭建

动图更精彩

方案如下

在Visual Studio Code（VSCode）中搭建React开发环境是一个相对简单但非常重要的步骤，可以帮助你更高效地进行前端开发。以下是详细的步骤和配置指南：

一、准备工作

安装Visual Studio Code (VSCode)：
访问VSCode官网 https://code.visualstudio.com/，下载并安装最新版本的VSCode。
安装Node.js和npm：
访问Node.js官网 https://nodejs.org/，下载并安装最新LTS版本的Node.js。安装过程中会自动安装npm（Node包管理器）。
安装完成后，打开终端或命令提示符，输入以下命令检查安装是否成功：

node -v
npm -v

二、安装React开发环境

安装Create React App：
打开VSCode，按 `Ctrl + ``（反引号键，通常位于Tab键上方）打开终端。
在终端中输入以下命令，全局安装Create React App工具：

npm install -g create-react-app

验证安装是否成功：

create-react-app -V

如果显示版本号，说明安装成功。
创建React项目：
在终端中输入以下命令来创建一个新的React项目：

create-react-app my-react-app

这里的 my-react-app 是项目名称，你可以根据需要自行更改。
项目创建完成后，使用以下命令进入项目目录：

cd my-react-app

启动React项目：
安装项目依赖：

npm install

启动项目：

npm start

此时，VSCode终端会显示一个本地服务器的URL，通常是 http://localhost:3000。在浏览器中打开这个URL，你应该能看到React的欢迎页面。

三、配置VSCode

安装VSCode插件：
ESLint：用于代码风格和错误检查。
Prettier - Code formatter：用于代码格式化。
React Native Tools：提供React开发相关的工具和功能。
ES7 React/Redux/GraphQL/React-Native snippets：提供React、Redux、GraphQL和React Native的代码片段，极大提高编码效率。
配置ESLint和Prettier：
在项目根目录下创建或修改 .vscode/settings.json 文件，添加以下配置：

{"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"editor.formatOnSave": true,"prettier.requireConfig": true,"files.associations": {"*.js": "javascriptreact"}
}

在项目根目录下创建 .eslintrc.json 和 .prettierrc.json 文件，配置相关规则：
.eslintrc.json示例：

{"env": {"browser": true,"es2021": true},"extends": ["eslint:recommended","plugin:react/recommended"],"parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": 12,"sourceType": "module"},"plugins": ["react"],"rules": {"react/jsx-uses-react": "error","react/jsx-uses-vars": "error"}
}

.prettierrc.json示例：

{"singleQuote": true,"trailingComma": "es5","tabWidth": 4
}

四、项目结构简介

创建完的React项目会有以下基本结构：
node_modules：存放项目依赖的文件夹。
public：存放静态文件，如 index.html。
src：存放源代码，如 App.js 和 index.js。
package.json：项目描述文件，记录了项目依赖和脚本等信息。

五、进阶配置

主题与配色：
在VSCode中，点击左侧的设置图标，选择“颜色主题”，然后选择你喜欢的主题。
字体与字号设置：
在设置中搜索“字体”，找到“编辑器：字体大小”和“编辑器：字体家族”，根据需要进行调整。
文件编码与换行：
为了确保代码在不同操作系统间兼容，建议将文件编码设置为UTF-8，并在设置中启用自动换行。

六、调试设置

配置launch.json：
打开VSCode的调试视图（点击左侧的虫子图标），点击“创建launch.json文件”。
选择“Chrome”或“Edge”作为调试环境，VSCode会自动生成 launch.json 文件。
你可以根据需要修改 launch.json 文件，例如设置断点调试。
使用断点调试：
在代码中设置断点，然后启动调试会话（按 F5 或点击“开始调试”按钮）。
浏览器会自动打开并加载你的React应用，你可以在VSCode中查看和修改变量值，逐步调试代码。

七、常见问题与解决方案

连接问题：
确保蓝牙耳机和计算机都已开启蓝牙功能。
重启蓝牙耳机和计算机，重新配对。
音质问题：
确保蓝牙耳机支持高质量音频编码（如AAC、LDAC、aptX）。
检查音频设备设置，确保默认设备设置正确。

八、总结

通过以上步骤，你成功在VSCode中配置了React开发环境，并创建和运行了一个React项目。整个过程虽然简单，但却是前端开发的重要基础。希望这篇文章能帮助到你，让你在React开发的路上更加顺利。

九、参考资料

VSCode官网 https://code.visualstudio.com/
Node.js官网 https://nodejs.org/
Create React App文档 https://create-react-app.dev/

注意有坑

npm 下载太慢了，所以果断切换到cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm -v

vscode 终端识别不了

PS D:\code\my-react-app> node -v
node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ node -v
+ ~~~~+ CategoryInfo          : ObjectNotFound: (node:String) [], CommandNotFoundException+ FullyQualifiedErrorId : CommandNotFoundExceptionPS D:\code\my-react-app> 

未解决；好长时间没有用win电脑了，最近从Mac切换到win，有些坑点也不能快速解决；不过大概率重启就好了。

填坑-2025-01-17 09:11:49

效果如下：

执行如下终端命令：
出现“npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本”的问题，是因为Windows系统中PowerShell的执行策略限制了脚本的运行。要解决这个问题，可以按照以下步骤操作：
以管理员身份运行PowerShell：
点击“开始”菜单，搜索“PowerShell”，然后右键点击“Windows PowerShell”，选择“以管理员身份运行”。
更改执行策略：
在打开的PowerShell窗口中，输入以下命令来更改执行策略为RemoteSigned，并设置为作用于当前用户（这样后续该用户使用PowerShell时都会应用这个策略）：

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

系统会给你一个安全提示，输入Y确认即可。
验证是否更改成功：
你可以通过以下命令查看当前的执行策略，确保已经更改为RemoteSigned：

Get-ExecutionPolicy

重新运行npm命令：
更改执行策略后，重新打开VSCode或命令提示符，然后尝试再次运行npm命令，如：

npm -v

通过以上步骤，你应该能够解决因执行策略限制而导致的npm命令无法运行的问题。如果问题仍然存在，可以尝试重启计算机后再试。
好了，这个环境问题解决