编辑器设置
一个配置得当的编辑器可以让代码更清晰易读,编写速度更快。它甚至可以在你编写代码时帮你发现错误!如果你是第一次设置编辑器,或者想要优化当前的编辑器,我们有一些建议。
您将学习
- 最流行的编辑器有哪些
- 如何自动格式化代码
您的编辑器
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 扩展:
- 启动 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 就仅用于捕获逻辑错误。如果你想在合并拉取请求前强制格式化文件,请在持续集成中使用prettier --check。
