设置你的编辑器

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

¥Create React App comes with a bunch of tools that improve the editing experience - if configured correctly. Here's a few tips to maximize your productivity:

语法高亮

¥Syntax highlighting

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

¥To configure the syntax highlighting in your favorite text editor, head to the relevant Babel documentation page and follow the instructions. Some of the most popular editors are covered.

在编辑器中显示 Lint 输出

¥Displaying Lint Output in the Editor

注意：react-scripts@0.2.0 及更高版本提供此功能。
¥Note: this feature is available with react-scripts@0.2.0 and higher.

它开箱即用，适用于新创建的 react-scripts@2.0.3 及更高版本的项目。
¥It works out of the box for newly created projects with react-scripts@2.0.3 and higher.

它也只适用于 npm 3 或更高版本。
¥It also only works with npm 3 or higher.

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

¥Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.

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

¥They are not required for linting. You should see the linter output right in your terminal as well as the browser console. If you prefer the lint results to appear right in your editor, please make sure you install an ESLint plugin/extension.

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

¥Note that even if you customise your ESLint config, these changes will only affect the editor integration. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.

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

¥If you want to enforce a coding style for your project, consider using Prettier instead of ESLint style rules.

扩展或替换默认的 ESLint 配置

¥Extending or replacing the default ESLint config

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

¥You can extend our base ESLint config, or replace it completely if you need.

有几件事要记住：

¥There are a few things to remember:

我们强烈建议扩展基本配置，因为删除它可能会引入难以发现的问题。
¥We highly recommend extending the base config, as removing it could introduce hard-to-find issues.
使用 TypeScript 时，你需要为应仅针对 TypeScript 文件的规则提供 overrides 对象。
¥When working with TypeScript, you'll need to provide an overrides object for rules that should only target TypeScript files.
请务必注意，任何设置为 "error" 的规则都将停止项目的构建。
¥It's important to note that any rules that are set to "error" will stop the project from building.

在下面的例子中：

¥In the below example:

基本配置已通过共享 ESLint 配置进行扩展，
¥the base config has been extended by a shared ESLint config,
已设置适用于所有 JavaScript 和 TypeScript 文件的新规则，并且
¥a new rule has been set that applies to all JavaScript and TypeScript files, and
已设置仅针对 TypeScript 文件的新规则。
¥a new rule has been set that only targets TypeScript files.

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

在编辑器中调试

¥Debugging in the Editor

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

¥This feature is currently only supported by Visual Studio Code and WebStorm.

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

¥Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.

Visual Studio Code

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

¥You need to have the latest version of VS Code installed.

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

¥Then add the block below to your launch.json file and put it inside the .vscode folder in your app’s root directory.

{
  "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 可能会有所不同。
¥Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

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

¥Start your app by running npm start, and start debugging in VS Code by pressing F5 or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.

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

¥Having problems with VS Code Debugging? Please see their troubleshooting guide.

WebStorm

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

¥You need to have WebStorm and JetBrains IDE Support Chrome extension installed.

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

¥In the WebStorm menu Run select Edit Configurations.... Then click + and select JavaScript Debug. Paste http://localhost:3000 into the URL field and save the configuration.

注意：如果你通过 HOST 或 PORT 环境变量进行了调整，则 URL 可能会有所不同。
¥Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

通过运行 npm start 启动你的应用，然后在 macOS 上按 ^D 或在 Windows 和 Linux 上按 F9 或单击绿色调试图标开始在 WebStorm 中进行调试。

¥Start your app by running npm start, then press ^D on macOS or F9 on Windows and Linux or click the green debug icon to start debugging in WebStorm.

与在 IntelliJ IDEA Ultimate、PhpStorm、PyCharm Pro 和 RubyMine 中调试应用的方式相同。

¥The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.

自动格式化代码

¥Formatting Code Automatically

Prettier 是一个有想法的代码格式化程序，支持 JavaScript、CSS 和 JSON。使用 Prettier，你可以自动格式化你编写的代码，以确保项目中的代码风格。详见 Prettier 的 GitHub 页面，查看这个页面以查看实际效果。

¥Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See Prettier's GitHub page for more information, and look at this page to see it in action.

每当我们在 git 中进行提交时，为了格式化我们的代码，我们需要安装以下依赖：

¥To format our code whenever we make a commit in git, we need to install the following dependencies:

npm install --save husky lint-staged prettier

或者你可以使用 yarn：

¥Alternatively you may use yarn:

yarn add husky lint-staged prettier

husky 使使用 githooks 成为可能，就好像它们是 npm 脚本一样。
¥husky makes it possible to use githooks as if they are npm scripts.
lint-staged 允许我们在 git 中的暂存文件上运行脚本。见此有关 lint-staged 的博客文章以了解更多信息。
¥lint-staged allows us to run scripts on staged files in git. See this blog post about lint-staged to learn more about it.
prettier 是我们将在提交之前运行的 JavaScript 格式化程序。
¥prettier is the JavaScript formatter we will run before commits.

现在我们可以通过向项目根目录中的 package.json 添加几行来确保每个文件的格式正确。

¥Now we can make sure every file is formatted correctly by adding a few lines to the package.json in the project root.

将以下字段添加到 package.json 部分：

¥Add the following field to the package.json section:

+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }

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

¥Next we add a 'lint-staged' field to the package.json, for example:

  "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}" 来第一次格式化你的整个项目。

¥Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run ./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}" to format your entire project for the first time.

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

¥Next you might want to integrate Prettier in your favorite editor. Read the section on Editor Integration on the Prettier GitHub page.

语法高亮​

在编辑器中显示 Lint 输出​

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

在编辑器中调试​

Visual Studio Code​

WebStorm​

自动格式化代码​