React

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

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

3. 在右侧窗格中：

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

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

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

      • 接受默认的 npx create-vite ，以便为使用 Vite 预配置开发环境。

      • 选择 npx create-react-app ，以便为使用 webpack、Babel 和 ESLint 预配置开发环境。

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

      

   4. 可选：

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

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

创建一个空的 WebStorm 项目

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

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

在空项目中安装 React

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

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

   npm install --save react react-dom

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

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

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

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

  

• 要打开 结构 工具窗口，请按 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 配置。 WebStorm 会自动在您的项目 node_modules 文件夹中定位 ESLint，然后从 .eslintrc.* 文件或 package.json 中的 eslintConfig 属性使用默认配置。

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

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

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

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

2. 在 插件 对象中，添加 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 和 react 插件配置的信息，请访问 ESLint 官方网站。