react学习笔记-编辑器配置

最新推荐文章于 2025-12-05 15:59:02 发布

原创最新推荐文章于 2025-12-05 15:59:02 发布 · 265 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #笔记

编辑器设置

正确的编辑器配置可以开发事半功倍。并且还可以在编码时帮你提示错误！如果这是你第一次配置编辑器，或者相对现有编辑器进行调整，我们有一些建议可供参考。

你的编辑器

VS Code（https://code.visualstudio.com/）是现如今最流行的编辑器之一。它拥有庞大的扩展市场，同时可以与GitHub等流行服务完美集成。下面列出的大多数功能都可以作为扩展添加到VS Code中，使其具有极高的可配置性。

React社区中其他较为流行的文本编辑器包括：

WebStorm（https://www.jetbrains.com/webstorm/）是转为JavaScript设计的集成开发环境。

Sublime Text支持JSX和TypeScript，内置语法高亮（https://stackoverflow.com/questions/65555800/how-to-make-sublime-3-open-js-files-with-jsx-syntax/70960574#70960574）和代码自动补全功能。

Vim（https://www.vim.org/）是一个高度可配置的文本编辑器，可以非常高效地创建和更改任何类型的文本。它作为“vi”包含在大多数UNIX系统和Apple OS X中。

代码检查（Linting）

代码检查（Code linters）可以在你编写代码时，发现代码中的问题，以帮你今早修复。ESLint（https://eslint.org/）是一款流行且开源的JavaScript代码检查工具。

使用React的推荐配置安装ESLint（https://www.npmjs.com/package/eslint-config-react-app）（确保你已经安装了Node）

安装VSCode中的官方ESLint扩展（https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint）

请确保你已经为你的项目启用了eslint-plugin-react-hooks规则。这在React项目中是必备的，同时能帮助你及早的捕获较为严重的bug。我们推荐的eslint-config-react-app preset中已经集成了该规则。

格式化

与其他贡献者共享代码时，你最不想做的事就是争论代码缩进应该使用tabs还是空格！（https://www.google.com/search?q=tabs+vs+spaces）幸好，prettier（https://prettier.io/）会根据预设配置的规则重新格式化代码，以保证代码整洁。运行Prettier，你的所有tabs都将转换为空格，同时缩进、引号等也都将根据你的配置而改变。理想状态下，当你保存文件时，Prettier会自动执行格式化操作。

你可以为VSCode安装Prettier扩展（https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode），具体步骤如下：

启动VS Code
使用快速打开（快捷键ctrl/cmd + P）
粘贴ext install esbenp.prettier-vscode
按回车键

保存并自动格式化

理想情况下，你应该在每次保存时自动化格式化代码。VS Code就包含该配置！

在VS Code，快捷键ctrl/cmd + shift + p
输入“settings”
按回车键
搜索栏，输入“format on save”
确保勾选“format on save”选项！

如果你的ESLint预设包含格式化规则，他们可能会与Prettier发生冲突。我们建议使用eslint-config-prettier（https://github.com/prettier/eslint-config-prettier）禁用你ESLint预设中的所有格式化规则，这样ESLint就只用于捕捉逻辑错误。如果你想在合并PR前强制执行文件的格式化，请在你的CI中使用prettier-check（https://prettier.io/docs/cli.html#--check）命令。