Edit

设置编辑器

如果配置正确，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页面上的 编辑器集成 部分。

← PreviousNext →