v19.2Latest

编辑器设置

一个配置得当的编辑器可以让代码更清晰易读,编写速度更快。它甚至可以在你编写代码时帮你发现错误!如果你是第一次设置编辑器,或者想要优化当前的编辑器,我们有一些建议。

您将学习
  • 最流行的编辑器有哪些
  • 如何自动格式化代码

您的编辑器

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

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

  • WebStorm是一款专门为 JavaScript 设计的集成开发环境。
  • Sublime Text支持 JSX 和 TypeScript,内置语法高亮和自动补全功能。
  • Vim是一款高度可配置的文本编辑器,旨在高效地创建和修改任何类型的文本。它作为“vi”包含在大多数 UNIX 系统和 Apple OS X 中。

有些编辑器内置了这些功能,但其他编辑器可能需要添加扩展。请检查您选择的编辑器提供了哪些支持以确保无误!

代码检查

代码检查工具可以在您编写代码时发现问题,帮助您及早修复。ESLint是一款流行的、开源的 JavaScript 代码检查工具。

请确保您已为项目启用所有eslint-plugin-react-hooks规则。这些规则至关重要,可以及早发现最严重的错误。推荐的eslint-config-react-app预设已包含它们。

格式化

当您与其他贡献者共享代码时,最不希望发生的事情就是陷入关于制表符与空格的讨论!幸运的是,Prettier会通过将代码重新格式化为符合预设的、可配置的规则来清理您的代码。运行 Prettier,您所有的制表符都将转换为空格——您的缩进、引号等也将全部更改为符合配置。在理想设置中,Prettier 会在您保存文件时运行,快速为您进行这些编辑。

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

  1. 启动 VS Code
  2. 使用快速打开(按 Ctrl/Cmd+P)
  3. 粘贴ext install esbenp.prettier-vscode
  4. 按 Enter 键

保存时格式化

理想情况下,您应该在每次保存时格式化代码。VS Code 有相应的设置!

  1. 在 VS Code 中,按下CTRL/CMD + SHIFT + P
  2. 输入“settings”
  3. 按 Enter 键
  4. 在搜索栏中,输入“format on save”
  5. 确保勾选了“format on save”选项!

如果你的 ESLint 预设包含格式化规则,它们可能与 Prettier 冲突。我们建议使用eslint-config-prettier来禁用 ESLint 预设中的所有格式化规则,这样 ESLint 就用于捕获逻辑错误。如果你想在合并拉取请求前强制格式化文件,请在持续集成中使用prettier --check