正确配置的编辑器可以使代码更清晰易读,编写速度更快。它甚至可以帮助你在编写代码时捕获错误!如果这是你第一次设置编辑器,或者你正在考虑调整你当前的编辑器,我们有一些建议。
你将学习
- 最流行的编辑器是什么
- 如何自动格式化你的代码
你的编辑器
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 扩展
- 启动 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
。