如果配置正确，Create React App 附带了许多可以改善编辑器体验的工具。 这里有一些提高效率的技巧：
语法高亮显示
要在你喜欢的文本编辑器中配置语法高亮显示，请转到 相关的 Babel 文档页面 并按照说明进行操作。 一些最受欢迎的编辑已经都覆盖到了。
在编辑器中显示 Lint 输出
注意：此功能适用于
react-scripts@0.2.0及更高版本。
它也适用于 npm 3 或更高版本。
一些编辑器，包括 Sublime Text，Atom 和 Visual Studio Code，都为 ESLint 提供了插件。
他们不是必需的。你应该在终端和浏览器控制台中查看 linter 输出。但是，如果你希望在编辑器中显示 lint 结果，则可以执行一些额外的步骤。
你需要先为编辑器安装 ESLint 插件。 然后，将名为 .eslintrc.json 的文件添加到项目根目录：
{
"extends": "react-app"
}
现在你的编辑应该报告 linting 警告了。
请注意，即使你进一步编辑 .eslintrc.json 文件，这些更改也 只会影响编辑器集成。它们不会影响终端和浏览器中的 lint 输出。这是因为 Create React App 有意提供了一组最常见的错误规则。
如果要为项目强制执行编码风格，请考虑使用 Prettier 而不是 ESLint 样式规则。
在编辑器中进行调试
目前只有 Visual Studio Code 和 WebStorm 支持此功能。
Visual Studio Code 和 WebStorm 支持使用 Create React App 开箱即用的调试。这使你作为开发人员可以在不离开编辑器的情况下编写和调试 React 代码，最重要的是，它使你能够拥有连续开发工作流，其中上下文切换是最小的，因为你不必在工具之间来回切换。
Visual Studio Code
你需要安装最新版本的 VS Code 和 VS Code Chrome Debugger Extension 。
然后将下面的代码块添加到 launch.json 文件中，并将其放在应用程序根目录中的 .vscode 文件夹中。
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
注意：如果你对 HOST 或 PORT 环境变量 进行了调整，则 URL 可能会有所不同。
通过运行 npm start 启动应用程序，然后按 F5 或单击绿色调试图标在 VS Code 中开始调试。你现在可以编辑代码，设置断点，更改代码，以及从编辑器调试新修改的代码。
有 VS Code 调试问题？请参阅 故障排除指南。
WebStorm
你需要安装 WebStorm 和 JetBrains IDE Support Chrome 扩展程序。
在 WebStorm Run 菜单中选择 Edit Configurations... 。然后单击 + 并选择 JavaScript Debug 。将 http://localhost:3000 粘贴到 URL 字段中并保存配置。
注意：如果你对 HOST 或 PORT 环境变量 进行了调整，则 URL 可能会有所不同。
通过运行 npm start 来启动你的应用程序，然后按 ^D（Mac） 或 F9 ( Windows 和 Linux)，或者单击绿色调试图标以在 WebStorm 中开始调试。
与在 IntelliJ IDEA Ultimate ，PhpStorm，PyCharm Pro 和 RubyMine 中调试应用程序的方式相同。
自动格式化代码
Prettier 是一个固定的代码格式化程序，支持 JavaScript ，CSS 和 JSON 。使用 Prettier，你可以自动格式化你编写的代码，以确保项目中的代码风格。有关详细信息，请参阅 Prettier 的 GitHub 页面 ，并在 此页面查看其实际效果。
要在 git 中进行提交时格式化代码，我们需要安装以下依赖项：
npm install --save husky lint-staged prettier
或者你可以使用 yarn:
yarn add husky lint-staged prettier
husky使得使用 githooks 变得很容易，就好像它们是 npm 脚本一样。lint-staged允许我们在 git 中的 staged 文件上运行脚本。有关 lint-staged 的更多信息，请参阅 这篇博客文章。prettier的是我们将在提交运行之前的 JavaScript 格式化程序。
现在，我们可以通过向项目根目录中的 package.json 添加几行来确保每个文件的格式正确。
将以下字段添加到 package.json ：
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ }
接下来，我们在 package.json 中添加一个 'lint-staged' 字段，例如：
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": {
现在，无论何时进行提交，Prettier 都会自动格式化已更改的文件。你也可以在配置完成后运行一次 ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}" 来格式化整个项目。
接下来，你可能希望将 Prettier 集成到你喜欢的编辑器中。阅读 Prettier GitHub页面上的 编辑器集成 部分。