React 支持

1. 从主菜单中点击 文件 | 新建 | 项目。 或者，在欢迎界面的左侧窗格中，点击 新建 | 新建项目。

   新建 项目 对话框 打开。

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

3. 在右侧窗格中：

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

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

   3. 在 React CLI​​ 列表中，选择要使用的生成器。

      • 接受默认的 npx create-vite ，以便预设好您的开发环境以使用 Vite。

      • 选择 npx create-react-app ，以便预设好您的开发环境以使用 webpack、Babel 和 ESLint。

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

      

   4. 可选：

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

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

创建空白 PyCharm 项目

1. 从主菜单中点击 文件 | 新建 | 项目。 或者，在欢迎界面的左侧窗格中，点击 新建 | 新建项目。

   新建 项目 对话框 打开。

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

在空项目中安装 React

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

2. 在命令行 shell 或嵌入式 终端 （Alt+F12 ）中输入：

   npm install --save react react-dom

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

• 按 Ctrl+J 并选择相关片段。 要缩小搜索范围，请开始键入该缩写，然后在 补全列表 中选择它。

有关详细信息，请参阅 实时模板。

• 在 设置 对话框（Ctrl+Alt+S ）中，点击 活动模板 （位于 编辑器 下），然后展开 React 或 React 钩子 节点。

  

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

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

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

  要从结构视图中的条目跳转到源代码，请按 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 配置。 PyCharm 会在您的项目 node_modules 文件夹中自动定位 ESLint，然后使用 .eslintrc.* 文件中的默认配置，或使用 package.json 中的 eslintConfig 属性。

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

   详情请参阅 在 PyCharm 中激活并配置 ESLint。

.eslintrc 结构示例（ESLint 1.x 搭配 react 插件）

1. 在 ecmaFeatures 对象中，添加 "jsx" = true。 在此，您还可以指定希望使用的其他语言特性，例如 ES6 类、模块等。

2. 在 plugins 对象中，添加 react。

3. 在 rules 对象中，您可以列出希望启用的 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 官方网站 了解有关 ESLint 及 react 插件配置的更多信息。