编辑器设置

正确配置的编辑器可以使代码更清晰易读,编写速度更快。它甚至可以帮助你在编写代码时捕获错误!如果这是你第一次设置编辑器,或者你正在考虑调整你当前的编辑器,我们有一些建议。

你将学习

  • 最流行的编辑器是什么
  • 如何自动格式化你的代码

你的编辑器

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预设已包含它们。

代码格式化

与其他贡献者共享代码时,最不想遇到的问题就是关于Tab键与空格的争论!幸运的是,Prettier 可以通过将其重新格式化以符合预设的可配置规则来清理您的代码。运行 Prettier,所有 Tab 键都将转换为空格——并且您的缩进、引号等也将全部更改为符合配置。在理想情况下,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