正确配置的编辑器可以让代码更易读、书写更快。它甚至还能在你写代码时帮你发现 bug!如果这是你第一次设置编辑器,或者你想优化当前的编辑器,我们有一些推荐。
You will learn
- 最流行的编辑器有哪些
- 如何自动格式化你的代码
你的编辑器
VS Code 是当今最流行的编辑器之一。它拥有庞大的扩展市场,并且能与 GitHub 之类的流行服务很好地集成。下面列出的许多功能也可以作为扩展添加到 VS Code 中,使它具有很强的可配置性!
React 社区中使用的其他流行文本编辑器包括:
- WebStorm 是一款专为 JavaScript 设计的集成开发环境。
- Sublime Text 内置支持 JSX 和 TypeScript、语法高亮 以及自动补全。
- Vim 是一款高度可配置的文本编辑器,旨在高效地创建和修改各种文本。它在大多数 UNIX 系统以及 Apple OS X 中都以 “vi” 的形式包含。
推荐的文本编辑器功能
有些编辑器内置了这些功能,但其他编辑器可能需要添加扩展。请查看你所选编辑器提供哪些支持,以确保满足需求!
代码检查
代码检查工具会在你编写代码时发现问题,帮助你及早修复它们。ESLint 是一个流行的、开源的 JavaScript 代码检查工具。
请确保你已经为项目启用了 eslint-plugin-react-hooks 的所有规则。 它们至关重要,并且能尽早发现最严重的 bug。推荐的 eslint-config-react-app 预设已经包含了它们。
格式化
当你与其他贡献者共享代码时,最不想做的事就是讨论 制表符和空格哪个更好!幸运的是,Prettier 会通过重新格式化你的代码来清理它,使其符合预设的、可配置的规则。运行 Prettier 后,所有制表符都会被转换为空格——同时你的缩进、引号等也都会被修改为符合配置。在理想设置中,Prettier 会在你保存文件时运行,快速为你完成这些编辑。
你可以按照以下步骤安装 VSCode 中的 Prettier 扩展:
- 启动 VS Code
- 使用快速打开(按 Ctrl/Cmd+P)
- 粘贴
ext install esbenp.prettier-vscode - 按 Enter
保存时格式化
理想情况下,你应该在每次保存时都格式化代码。VS Code 有相关设置!
- 在 VS Code 中,按
CTRL/CMD + SHIFT + P。 - 输入 “settings”
- 按 Enter
- 在搜索栏中输入 “format on save”
- 确保 “format on save” 选项已勾选!
如果你的 ESLint 预设包含格式化规则,它们可能会与 Prettier 冲突。我们建议使用
eslint-config-prettier禁用 ESLint 预设中的所有格式化规则,这样 ESLint 就只用于发现逻辑错误。如果你希望在 pull request 合并之前强制文件已完成格式化,请在持续集成中使用prettier --check。