设置您的编辑器

创建 React 应用附带了一堆工具，可以改善编辑体验 - 如果配置正确。以下是一些提高工作效率的技巧

语法高亮

要配置您最喜欢的文本编辑器中的语法高亮，请前往相关的 Babel 文档页面并按照说明操作。涵盖了一些最流行的编辑器。

在编辑器中显示 Lint 输出

注意：此功能适用于 [email protected] 及更高版本。

对于使用 [email protected] 及更高版本的新创建的项目，它开箱即用。

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

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

它们不是代码风格检查（linting）的必要条件。您应该在终端和浏览器控制台中看到代码风格检查的输出。如果您希望代码风格检查结果直接显示在编辑器中，请确保您安装了 ESLint 插件/扩展。

请注意，即使您自定义了 ESLint 配置，这些更改也**只会影响编辑器集成**。它们不会影响终端和浏览器中的代码风格检查输出。这是因为 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 和 VS Code Chrome 调试器扩展。

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

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

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

通过运行 npm start 启动您的应用程序，并通过按 F5 或单击绿色调试图标在 VS Code 中开始调试。您现在可以编写代码、设置断点、更改代码并调试您新修改的代码——所有这些都可以在您的编辑器中完成。

在 VS Code 调试方面遇到问题？请查看他们的故障排除指南。

WebStorm

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

在 WebStorm 菜单中，选择 运行，然后选择 编辑配置...。然后点击 + 并选择 JavaScript 调试。将 https://127.0.0.1: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"
+    }
+  }

接下来，我们将一个 'lint-staged' 字段添加到 package.json 中，例如

  "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​

自动格式化代码​