设置你的编辑器

如果配置正确，Create React App 附带了一堆可以改善编辑体验的工具。这里有一些技巧可以最大限度地提高你的工作效率：

语法高亮

要在你最喜欢的文本编辑器中配置语法突出显示，请前往相关的 Babel 文档页面并按照说明进行操作。涵盖了一些最受欢迎的编辑器。

在编辑器中显示 Lint 输出

注意： react-scripts@0.2.0 及更高版本提供此功能。

它开箱即用，适用于新创建的 react-scripts@2.0.3 及更高版本的项目。

它也只适用于 npm 3 或更高版本。

一些编辑器，包括 Sublime Text、Atom 和 Visual Studio Code，为 ESLint 提供了插件。

linting 不需要它们。你应该会在终端和浏览器控制台中看到 linter 输出。如果你希望 lint 结果直接出现在你的编辑器中，请确保你安装了 ESLint 插件/扩展。

请注意，即使你自定义 ESLint 配置，这些更改也只会影响编辑器集成**。它们不会影响终端和浏览器内的 lint 输出。这是因为 Create React App 有意提供了一组最小的规则来发现常见错误。

如果你想为你的项目强制执行编码风格，请考虑使用 Prettier 而不是 ESLint 风格规则。

扩展或替换默认的 ESLint 配置

你可以扩展我们的基本 ESLint 配置，或者如果需要可以完全替换它。

有几件事要记住：

我们强烈建议扩展基本配置，因为删除它可能会引入难以发现的问题。
使用 TypeScript 时，你需要为应仅针对 TypeScript 文件的规则提供 overrides 对象。
请务必注意，任何设置为 "error" 的规则都将停止项目的构建。

在下面的例子中：

基本配置已通过共享 ESLint 配置进行扩展，
已设置适用于所有 JavaScript 和 TypeScript 文件的新规则，并且
已设置仅针对 TypeScript 文件的新规则。

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

在编辑器中调试

此功能目前仅 Visual Studio Code 和 WebStorm 支持。

Visual Studio Code 和 WebStorm 支持使用 Create React App 进行开箱即用的调试。这使你作为开发人员能够在不离开编辑器的情况下编写和调试 React 代码，最重要的是，它使你能够拥有一个持续的开发工作流程，其中上下文切换最少，因为你不必在工具之间切换。

Visual Studio Code

你需要安装最新版本的 VS Code。

然后将下面的块添加到你的 launch.json 文件中，并将其放入应用程序根目录中的 .vscode 文件夹中。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

注意：如果你通过 HOST 或 PORT 环境变量进行了调整，则 URL 可能会有所不同。

通过运行 npm start 启动你的应用程序，然后通过按 F5 或单击绿色调试图标在 VS Code 中开始调试。你现在可以编写代码、设置断点、更改代码以及调试新修改的代码——全部来自你的编辑。

VS 代码调试有问题？请参阅他们的故障排除指南。

WebStorm

你需要安装 WebStorm 和 JetBrains IDE 支持 Chrome 扩展程序。

在 WebStorm 菜单 Run 中选择 Edit Configurations...。然后单击 + 并选择 JavaScript Debug。将 http://localhost:3000 粘贴到 URL 字段并保存配置。

注意：如果你通过 HOST 或 PORT 环境变量进行了调整，则 URL 可能会有所不同。

通过运行 npm start 启动你的应用程序，然后在 macOS 上按 ^D 或在 Windows 和 Linux 上按 F9 或单击绿色调试图标开始在 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 中的暂存文件上运行脚本。见此有关 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 --write"
+   ]
+ },
  "scripts": {

现在，无论何时你进行提交，Prettier 都会自动格式化更改的文件。你也可以运行 ./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}" 来第一次格式化你的整个项目。

接下来，你可能希望将 Prettier 集成到你喜欢的编辑器中。阅读 Prettier GitHub 页面上关于编辑器集成的部分。

语法高亮​

在编辑器中显示 Lint 输出​

扩展或替换默认的 ESLint 配置​

在编辑器中调试​

Visual Studio Code​

WebStorm​

自动格式化代码​