React
React 是一个用于从封装组件构建复杂交互用户界面的 JavaScript 库。 了解更多有关该库的信息，请访问 React 官方网站。
IntelliJ IDEA 集成了 React，提供配置、编辑、linting、运行、调试和维护您的应用程序的帮助。
开始之前
创建一个新的 React 应用程序
生成 React 应用程序。
从主菜单中选择 ，或者在 欢迎 屏幕上点击 新建项目 按钮。
在 新建项目 对话框的左侧窗格中，选择 Vite。
在向导的右侧部分，指定项目名称和创建该项目的文件夹。
在 Node.js 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择 添加 以配置新的运行时。
请从 React CLI 列表中选择要使用的生成器。
接受默认
npx create-vite，可让开发环境预先配置好以使用 Vite。选择
npx create-react-app，可让开发环境预先配置好以使用 webpack、Babel 和 ESLint。如需使用之前下载的自定义生成器，请点击 选择 ，并在打开的对话框中指定生成器路径。
可选：
要使用 TSX 而不是 JSX，请选择 创建 TypeScript 项目 复选框。 IntelliJ IDEA 将为您的应用生成 .tsx 文件以及一个 tsconfig.json 配置文件。
当您点击 创建 时，IntelliJ IDEA会生成一个 React 特定项目，并包括所有必需的配置文件和下载所需的依赖项。 IntelliJ IDEA 还会创建一个 npm start 和 JavaScript Debug 配置，使用默认设置来运行或调试您的应用程序。
在空的 IntelliJ IDEA 项目中安装 React
在这种情况下，您将需要按照下文 构建 React 应用程序中的描述自行配置构建管道。 从 React 官方网站了解更多关于将 React 添加到项目中的信息。
创建一个空的 IntelliJ IDEA 项目
从主菜单中选择 ，或者在 欢迎 屏幕上点击 新建项目 按钮。
在 新建项目 对话框的左侧窗格中，选择 新建项目。
在右侧窗格中，选择 JavaScript 在 语言 区域。
为新项目命名，并在必要时更改其位置，然后点击 创建。
在空项目中安装 React
打开您将使用 React 的空项目。
在内置的 终端 （Alt+F12 ）中，输入：
npm install --save react react-dom
从现有的 React 应用程序开始
要继续开发现有的 React 应用程序，请在 IntelliJ IDEA 中打开并下载所需的依赖项。
打开您计算机上已有的应用程序源代码
点击 打开或导入 屏幕上的 欢迎 或从主菜单中选择 。 在打开的对话框中，选择存储源文件的文件夹。
从您的版本控制系统检出应用程序源代码
在 欢迎 屏幕上点击 克隆存储库。
或者，从主菜单中选择 、 或 。
在主菜单中，您可能会看到与您的项目关联的其他任何版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出应用程序源代码的存储库。 有关更多信息，请参阅 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详情请参阅 npm 和 Yarn。
或者，在编辑器中或 项目 工具窗口 (Alt+1) 中，从 package.json 的上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全
当您打开一个在 IntelliJ IDEA 外部创建并导入到其中的项目时，IntelliJ IDEA 会显示一个对话框，您可以在其中决定如何处理包含不熟悉的源代码的项目。
请选择以下选项之一：
在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也无法运行或调试您的项目。
IntelliJ IDEA 会在编辑器区域顶部显示一条通知，您可以点击 信任项目… 链接，随时加载您的项目。
信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能均可用。
不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。
有关更多信息，请参阅 项目安全。
代码补全
IntelliJ IDEA 为 JavaScript 代码中的 React APIs 和 JSX 提供代码补全。 代码补全适用于 React 方法、特定于 React 的属性、HTML 标签和组件名称、 React 事件 、组件属性等。 请访问 React 官方网站了解更多信息。
要获得 React 方法和 React 特定属性的代码补全，您需要在项目中的某个地方包含 react.js 库文件。 通常库已经在您的 node_modules 文件夹中。
完整的 React 方法、属性和事件
默认情况下，代码补全弹窗会在您输入时自动显示。 例如：
在 JSX 标签中，IntelliJ IDEA 为 特定于 React 的属性 （例如 className 或 classID ）以及 非 DOM 属性 （例如 key 或 ref ）提供编码辅助。 此外，自动完成功能还适用于项目的 CSS 文件中定义的类名：
所有 React 事件 （例如 onClick 或 onChange ）也可以与花括号  ={} 或引号 "" 一起自动完成。
默认情况下，会插入花括号。 您可以让 IntelliJ IDEA 始终添加引号，或根据 TypeScript definition file (d.ts) 的类型在引号和花括号之间选择。 要更改默认设置，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并从 为 JSX 属性添加 列表中选择适用的选项。
代码补全同样适用于大括号内的 JavaScript 表达式。 这适用于您定义的所有方法和函数：
完成 HTML 标签和组件名称
IntelliJ IDEA 为 HTML 标签和 JavaScript 方法或其他组件中定义的组件名称提供代码补全：
补全同样适用于使用 ES6 风格语法导入的组件：
完成组件属性
IntelliJ IDEA 为使用 propTypes 定义的组件属性提供代码补全，并解析它们，这样您就可以快速跳转或预览它们的定义：
当您自动完成组件的名称时，IntelliJ IDEA 会自动添加它的所有必需属性。 如果某个组件的使用中缺少一些必需的属性，IntelliJ IDEA 会提醒您。
为函数式组件添加状态
IntelliJ IDEA 通过在特定位置定义未解析的引用，建议快速修复以向函数式 React 组件添加 useState 钩子。 IntelliJ IDEA 会自动为 useState 钩子插入 import 语句。 状态的类型将根据定义该引用的位置进行推断。
将插入符号置于未解析的引用处，按 Alt+Enter ，然后在列表中选择 在 < functional component name> 组件中创建 <unresolved reference> 状态。
添加属性
IntelliJ IDEA 通过在特定位置定义未解析的引用，建议快速修复以向 React 组件添加新属性。
IntelliJ IDEA 会生成包含新增属性的组件代码。 属性的类型将根据定义相应引用的位置进行推断。
该快速修复也可用于类组件。 在此类情况下，在插入新属性后，未解析的引用将被替换为 this.props.${reference_name}。
将插入符号置于未解析的引用处，按 Alt+Enter ，然后在列表中选择 在 <component name> 组件中创建 <unresolved reference> 属性。
将 HTML 属性转移到 JSX
当您复制带有类属性或事件处理程序的 HTML 代码并将其粘贴到 JSX 中时，IntelliJ IDEA 会自动将这些属性替换为特定于 React 的属性（className、 onClick、 onChange 等）。
这也适用于 TSX：
当您将包含单标签的 HTML 代码片段复制并粘贴到 JSX 中时，IntelliJ IDEA 会在每个单标签的末尾自动添加斜杠 /。
要将 HTML 代码按原样复制到 JSX 或 TSX，请使用 Paste Simple Ctrl+Alt+Shift+V ，或者打开 设置 对话框（Ctrl+Alt+S ），转到 设置页面，并清除 将代码粘贴到 JSX 文件时关闭 HTML 单一标记 和 将 HTML 属性名称粘贴到 JSX 文件时进行转换 复选框。
React 代码片段
IntelliJ IDEA 带有超过 50 个代码片段的集合，这些片段扩展为 React 应用中常用的不同语句和代码块，包括 React Hooks。 下面的示例展示了如何使用 rcjc 缩写创建一个定义新 React 组件的类：
从代码片段创建一个 React 代码结构
请在编辑器中输入所需的缩写并按下 Tab。
按 Ctrl+J 并选择相关的代码片段。 要缩小搜索范围，请开始键入该缩写，然后在 补全列表 中选择它。
如需更多信息，请参阅 实时模板。
查看所有可用的 React 代码片段列表
在 设置 对话框 (Ctrl+Alt+S) 中，点击 实时模板 下的 编辑器 ，然后展开 React 或 React hooks 节点。
React 指令
IntelliJ IDEA 可以识别并高亮显示文件顶部和函数内的以下 React 指令：
JSX 中的 Emmet
通过 IntelliJ IDEA，您不仅可以在 HTML 中使用 Emmet ，还可以在 JSX 代码中利用一些特别的 React 变体进行使用。 例如，缩写 div.my-class 在 JSX 中扩展为 <div className=”my-class"></div> ，但不会像在 HTML 中那样扩展为 <div class=”my-class"></div>：
浏览 React 应用程序
除了 基本导航之外，IntelliJ IDEA 还能帮助您在 React 特定的代码元素之间跳转。
要跳转到方法的声明或大括号内的 JavaScript 表达式
{}，请选择方法或表达式并按 Ctrl+B。要跳转到组件声明，选中组件名称并按下 Ctrl+B。
若要查看组件定义，请按 Ctrl+Shift+I。
要查看组件的快速文档，请按 Ctrl+Q。 了解详情，请参阅 JavaScript 文档查找。
使用结构视图进行导航
结构 工具窗口与 结构 弹出窗口可帮助您更清晰地洞察 React 代码结构，便于导航并促进对 React 组件及相关元素的更好理解。
结构 工具窗口显示以下特定于 React 的节点：
由钩子初始化的变量会作为其节点下的子节点显示。
检查 React 应用程序
所有 IntelliJ IDEA 内置的 代码检查 也适用于 JSX 代码中的 JavaScript 和 HTML。 IntelliJ IDEA 会提醒您未使用的变量和函数、缺少的关闭标签、缺少的语句等。
对于某些检查，IntelliJ IDEA 提供快速修复，例如，建议添加缺失的方法。 若要查看 quick-fix 弹出窗口，请按 Alt+Enter。
要自定义检查列表，请打开 设置 对话框（Ctrl+Alt+S ），转到 Editor | Inspections，并禁用您不想看到的检查或更改其严重性级别。 请从 禁止并忽略检查 和 更改检查严重性 中了解更多信息。
ESLint
除了提供内置代码检查之外，IntelliJ IDEA 还与 ESLint 等 linter 集成，用于 JSX 代码。 ESLint 带来了一系列广泛的代码检查规则，这些规则也可以通过插件进行扩展。 IntelliJ IDEA 会在编辑器中直接显示由 ESLint 报告的警告和错误，您在键入时即可看到。 借助 ESLint，您还可以使用 JavaScript Standard Style ，以及 对 TypeScript 代码进行代码检查。
有关更多信息，请参见 ESLint。
要让 ESLint 正确理解 React JSX 语法，您需要 eslint-plugin-react。 使用此插件，您会收到警告，例如，当 React 组件没有设置显示名称，或者使用了一些危险的 JSX 属性时：
在 React 项目中安装和配置 ESLint
在内置 终端 () 中，键入：
npm install --save-dev eslint npm install --save-dev eslint-plugin-react将 ESLint 配置文件 添加到您的项目中。
在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | JavaScript | 代码质量工具 | ESLint ，然后选择 自动 ESLint 配置。 IntelliJ IDEA 会自动在您的项目 node_modules 文件夹中定位 ESLint，然后从 .eslintrc.* 文件或 package.json 中的
eslintConfig属性使用默认配置。或者，选择 手动 ESLint 配置 使用自定义 ESLint 程序包和配置。
请参见 在 IntelliJ IDEA 中激活和配置 ESLint 了解详细信息。
ESLint 1.x 版本与 react 插件的 .eslintrc 结构示例
在
ecmaFeatures对象中，添加"jsx" = true。 在这里，您还可以指定想要使用的其他语言功能，例如，ES6 classes、modules等。在
plugins对象中，添加react。在
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 官方网站。
构建一个 React 应用程序
如果您 在现有的 IntelliJ IDEA 项目中安装了 React ，需要设置构建过程。 了解各种为您的 React 应用配置构建流水线的方法，详情请参阅 React 官方网站。
在一个项目中使用多个框架
有时，您可能需要在一个 React 项目中使用其他框架。
要在每个文件中获得上下文感知的编码辅助，请创建一个配置文件 .ws-context ，并指定每个特定文件或文件夹应使用的框架。 该文件中的设置将覆盖默认配置。
在项目根目录中，从上下文菜单中选择 新建 | 文件 并将文件名指定为
.ws-context。在
.ws-context中，使用两种属性：<context-name>带有上下文值字符串具有上下文详情对象的 GLOB 模式
使用以下上下文值：
framework：vue、angular、react、svelte、astroangular-template-syntax：V_2、V_17nextjs-project：nextjsastro-project：astrovue-store：vuex、piniavue-class-component-library：vue-class-component、vue -property-decorator、vue-facing-decoratorjsdoc-dialect：jsdoc-typescript、jsdoc-closure
使用路径嵌套以简化操作。
GLOB 路径的最后一段是文件名模式，它仅支持
*通配符。如果最后一个段是一个
**，它匹配所有嵌套的目录和文件。顶层上下文属性应具有
/**模式。
当多个模式匹配相同文件名时，将使用以下规则进行消歧：
选择路径段数最多的模式，排除
**段。选择纯文件名模式，这意味着它不会以
**或/结尾。选择最先定义的模式。
示例
假设您有一个项目，其中在各个文件夹中使用了多个框架。
要为项目中的每个文件获得上下文相关的帮助，请将以下代码添加到 .ws-context: