编辑器设置

你的编辑器

¥Your editor

VS Code 是当今最流行的编辑器之一。它有一个庞大的扩展市场，并与 GitHub 等流行服务很好地集成。下面列出的大多数功能也可以作为扩展添加到 VS Code 中，使其具有高度可配置性！

¥VS Code is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable!

React 社区中使用的其他流行的文本编辑器包括：

¥Other popular text editors used in the React community include:

• WebStorm 是专门为 JavaScript 设计的集成开发环境。

  ¥WebStorm is an integrated development environment designed specifically for JavaScript.

• Sublime Text 支持 JSX 和 TypeScript，语法高亮 和内置的自动补齐功能。

  ¥Sublime Text has support for JSX and TypeScript, syntax highlighting and autocomplete built in.

• Vim 是一个高度可配置的文本编辑器，旨在非常高效地创建和更改任何类型的文本。它作为 “vi” 包含在大多数 UNIX 系统和 Apple OS X 中。

  ¥Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as “vi” with most UNIX systems and with Apple OS X.

推荐的文本编辑器功能

¥Recommended text editor features

一些编辑器内置了这些功能，但其他编辑器可能需要添加扩展。检查以确保你选择的编辑器提供了哪些支持！

¥Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!

代码检查

¥Linting

代码检查器会在你编写代码时发现代码中的问题，帮助你及早修复它们。ESLint 是一个流行的开源 JavaScript 检查器。

¥Code linters find problems in your code as you write, helping you fix them early. ESLint is a popular, open source linter for JavaScript.

• 使用推荐的 React 配置安装 ESLint（确保你有 Node 已安装）

  ¥Install ESLint with the recommended configuration for React (be sure you have Node installed!)

• 使用官方扩展在 VSCode 中集成 ESLint

  ¥Integrate ESLint in VSCode with the official extension

确保你已为项目启用所有 eslint-plugin-react-hooks 规则。它们是必不可少的，可以及早发现最严重的错误。推荐的 eslint-config-react-app 预设已经包含它们。

¥Make sure that you’ve enabled all the eslint-plugin-react-hooks rules for your project. They are essential and catch the most severe bugs early. The recommended eslint-config-react-app preset already includes them.

格式化

¥Formatting

与其他贡献者共享代码时，你最不想做的事情就是参与有关 制表符与空格 的讨论！幸运的是，Prettier 将通过重新格式化代码以符合预设的可配置规则来清理你的代码。运行 Prettier，你的所有制表符都将转换为空格，并且你的缩进、引号等也将全部更改以符合配置。在理想的设置中，Prettier 将在你保存文件时运行，为你快速进行这些编辑。

¥The last thing you want to do when sharing your code with another contributor is get into a discussion about tabs vs spaces! Fortunately, Prettier will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.

你可以按照以下步骤安装 VSCode 中的 Prettier 扩展：

¥You can install the Prettier extension in VSCode by following these steps:

1. 启动 VS Code

   ¥Launch VS Code

2. 使用快速打开（按 Ctrl/Cmd+P）

   ¥Use Quick Open (press Ctrl/Cmd+P)

3. 粘贴到 ext install esbenp.prettier-vscode

   ¥Paste in ext install esbenp.prettier-vscode

4. 按回车

   ¥Press Enter

保存时格式化

¥Formatting on save

理想情况下，你应该在每次保存时格式化你的代码。VS Code 有这方面的设置！

¥Ideally, you should format your code on every save. VS Code has settings for this!

1. 在 VS Code 中，按 CTRL/CMD + SHIFT + P。

   ¥In VS Code, press CTRL/CMD + SHIFT + P.

2. 键入 “设置”

   ¥Type “settings”

3. 回车

   ¥Hit Enter

4. 在搜索栏中，输入 “保存时格式化”

   ¥In the search bar, type “format on save”

5. 确保勾选 “保存时格式化” 选项！

   ¥Be sure the “format on save” option is ticked!

如果你的 ESLint 预设有格式化规则，它们可能会与 Prettier 冲突。我们建议使用 eslint-config-prettier 禁用 ESLint 预设中的所有格式化规则，以便 ESLint 仅用于捕获逻辑错误。如果你想在合并拉取请求之前强制对文件进行格式化，请使用 prettier --check 进行持续集成。

¥If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using eslint-config-prettier so that ESLint is only used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use prettier --check for your continuous integration.