React 可与编辑器、TypeScript、浏览器扩展和编译器等多种工具集成。本节说明这些工具的配置。
编辑器(IDE)配置
常用IDE推荐
VS Code 是现如今最流行的编辑器之一。它拥有庞大的扩展市场，同时可以与 GitHub 等流行服务完美集成。下面列出的大多数功能都可以作为扩展添加到 VS Code 中，使其具有极高的可配置性！
React 社区中其他较为流行的文本编辑器包括：
- WebStorm 是专为 JavaScript 设计的集成开发环境。
- Sublime Text 支持 JSX 和 TypeScript，内置语法高亮和代码自动补全功能。
- Vim 是一个高度可配置的文本编辑器，可以非常高效地创建和更改任何类型的文本。它作为 "vi" 包含在大多数 UNIX 系统和 Apple OS X 中。
IDE常用功能
有些编辑器内置了这些功能，但某些编辑器可能需要添加扩展。
代码检查（Linting）
代码检查（Code linters）可以在开发者编写代码时，发现代码中的问题，帮助开发者尽早修复。ESLint 是一款流行且开源的 JavaScript 代码检查工具。
- 使用 React 的推荐配置安装 ESLint （确保你已经安装了 Node）
- 安装 VSCode 中的官方 ESLint 扩展
请确保你已经为你的项目启用了 eslint-plugin-react-hooks 规则。这在 React 项目中是必备的，同时能帮助你及早的捕获较为严重的 bug。
格式化
Prettier 会根据预设配置的规则重新格式化代码，以保证代码整洁。运行 Prettier，你的所有 tabs 都将转换为空格，同时缩进、引号等也都将根据你的配置而改变。理想状态下，当你保存文件时，Prettier 会自动执行格式化操作。
你可以为 VSCode 安装 Prettier 扩展，具体步骤如下：
- 启动 VS Code
- 使用快速打开（使用快捷键
Ctrl/Cmd + P） - 粘贴
ext install esbenp.prettier-vscode - 按回车键
保存并自动格式化
理想情况下，你应该在每次保存时自动格式化代码。VS Code 就包含该配置!
- 在 VS Code, 按快捷键
Ctrl/Cmd + Shift + P. - 输入 "settings"
- 按回车键
- 在搜索栏, 输入 "format on save"
- 确保勾选 "format on save" 选项！
如果你的 ESLint 预设包含格式化规则，它们可能会与 Prettier 发生冲突。我们建议使用eslint-config-prettier 禁用你 ESLint 预设中的所有格式化规则，这样 ESLint 就只用于捕捉逻辑错误。如果你想在合并 PR 前强制执行文件的格式化，请在你的 CI 中使用 prettier --check 命令。
TypeScript 集成到React
TypeScript 是一种为 JavaScript 代码库添加类型定义的流行方式。
React 开发者工具
React Compiler
React Compiler 是一款自动优化 React 应用程序的工具。了解更多。