【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包管理器）。

安装完成后，打开终端或命令提示符，输入以下命令检查安装是否成功：

bash 复制代码

node -v
npm -v

二、安装React开发环境

安装Create React App：

打开VSCode，按 `Ctrl + ``（反引号键，通常位于Tab键上方）打开终端。

在终端中输入以下命令，全局安装Create React App工具：

bash 复制代码

npm install -g create-react-app

验证安装是否成功：

bash 复制代码

create-react-app -V

如果显示版本号，说明安装成功。

创建React项目：

在终端中输入以下命令来创建一个新的React项目：

bash 复制代码

create-react-app my-react-app

这里的 my-react-app 是项目名称，你可以根据需要自行更改。

项目创建完成后，使用以下命令进入项目目录：

bash 复制代码

cd my-react-app

启动React项目：

安装项目依赖：

bash 复制代码

npm install

启动项目：

bash 复制代码

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 文件，添加以下配置：

javascript 复制代码

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

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

.eslintrc.json示例：

javascript 复制代码

{
  "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示例：

javascript 复制代码

{
  "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

bash 复制代码

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

bash 复制代码

cnpm -v

vscode 终端识别不了

bash 复制代码

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时都会应用这个策略）：

bash 复制代码

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

系统会给你一个安全提示，输入Y确认即可。

验证是否更改成功：

你可以通过以下命令查看当前的执行策略，确保已经更改为RemoteSigned：

bash 复制代码

Get-ExecutionPolicy

重新运行npm命令：

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

bash 复制代码

npm -v

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

好了，这个环境问题解决