React

1. 点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 文件 | 新建 | 项目。 将打开 新建 Project 对话框。

2. 在左侧窗格中，选择 React。

3. 在右侧窗格中：

   1. 指定存储与项目相关的文件的文件夹路径。

   2. 在 Node.js 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择 Add 以配置新的运行时。

   3. 从 React CLI},{ 列表中选择要使用的生成器。

      • 接受默认的 npx create-vite ，即可让您的开发环境预设为使用 Vite。

      • 选择 npx create-react-app ，即可让您的开发环境预设为使用 webpack、Babel 和 ESLint。

      • 要使用自定义的已下载生成器，请点击 Select ，并在打开的对话框中指定生成器的路径。

      

   4. 可选：

      要使用 TSX 而不是 JSX，请选择 创建 TypeScript 项目 复选框。 PhpStorm 将为您的应用生成 .tsx 文件以及一个 tsconfig.json 配置文件。

4. 当您点击 创建 时，PhpStorm会生成一个 React 特定项目，并包括所有必需的配置文件和下载所需的依赖项。 PhpStorm 还会创建一个 npm start 和一个 JavaScript Debug 配置，以默认设置用于运行或调试您的应用程序。

创建一个空的 PhpStorm 项目

1. 点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 文件 | 新建 | 项目。 将打开 新建 Project 对话框。

2. 在左侧窗格中，选择 PHP 空项目。 在右侧窗格中，指定应用程序文件夹并单击 创建。

在空项目中安装 React

1. 打开您将使用 React 的空项目。

2. 在嵌入的 终端 (Alt+F12 )中，输入：

   npm install --save react react-dom

• 请在编辑器中输入所需的缩写并按下 Tab。

• 按 Ctrl+J 并选择相关的代码片段。 为了缩小搜索范围，开始输入缩写，然后从 补全列表中选择。

如需更多信息，请参阅 实时模板。

• 在 设置 对话框 (Ctrl+Alt+S) 中，点击 活动模板 下的 编辑器 ，然后展开 React 或 React hooks 节点。

  

• 要打开 结构 工具窗口，请按 Alt+7 ，或在主菜单中转到 视图(V) | 工具窗口(T) | 结构。

• 要打开 结构 弹出窗口，请按 Ctrl+F12 ，或在主菜单中转到 导航(N) ｜ 文件结构(I)。

• 结构 工具窗口与 结构 弹出窗口会与活动编辑器选项卡中的文件同步。 在结构视图中移动时，文件中的相应代码元素会被高亮显示。 此外，如果您在源代码中重命名某个项目，相应的节点也会随之更新。

  要从结构视图中的某个项目跳转到源代码，请按 F4。

详细了解请参阅 源代码导航：文件结构。

在 React 项目中安装和配置 ESLint

1. 在内置 终端 (视图｜工具窗口｜终端) 中，键入：

   npm install --save-dev eslint npm install --save-dev eslint-plugin-react

2. 将 ESLint 配置文件 添加到您的项目中。

3. 在 设置 对话框（Ctrl+Alt+S ）中，进入 语言与框架 | JavaScript | 代码质量工具 | ESLint ，然后选择 自动 ESLint 配置。 PhpStorm 会自动在您的项目 node_modules 文件夹中定位 ESLint，然后从 .eslintrc.* 文件或 package.json 中的 eslintConfig 属性使用默认配置。

   或者，选择 手动 ESLint 配置 使用自定义 ESLint 程序包和配置。

   请参见 在 PhpStorm 中激活和配置 ESLint 了解详细信息。

ESLint 1.x 版本与 react 插件的 .eslintrc 结构示例

1. 在 ecmaFeatures 对象中，添加 "jsx" = true。 在这里，您还可以指定想要使用的其他语言功能，例如，ES6 classes、modules等。

2. 在 插件 对象中，添加 react。

3. 在 规则 对象中，您可以列出希望启用的 ESLint 内置规则以及 通过 react 插件提供的规则。

   { "parser": "babel-eslint", "env": { "browser": true, "es6": true, "jest": true }, "rules": { "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }], "react/jsx-props-no-spreading": "off", "react/jsx-sort-props": ["error", { "reservedFirst": ["key"] }], "react/require-default-props": "off", "react/sort-prop-types": "error", "react/state-in-constructor": ["error", "never"], "semi-spacing": "warn" }, "overrides": [ { "files": [ "sample/**", "test/**" ], "rules": { "import/no-unresolved": "off" } } ] }

了解更多关于 ESLint 和 react 插件配置的信息，请访问 ESLint 官方网站。