【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 : CommandNotFoundException
PS 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命令无法运行的问题。如果问题仍然存在，可以尝试重启计算机后再试。
好了，这个环境问题解决
原文地址：https://blog.csdn.net/lichong951/article/details/145183934
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！