Create React App 设置编辑器

如果配置正确,Create React App 附带了许多可以改善编辑器体验的工具。 这里有一些提高效率的技巧:

语法高亮显示

要在你喜欢的文本编辑器中配置语法高亮显示,请转到 相关的 Babel 文档页面 并按照说明进行操作。 一些最受欢迎的编辑已经都覆盖到了。

在编辑器中显示 Lint 输出

注意:此功能适用于 react-scripts@0.2.0 及更高版本。
它也适用于 npm 3 或更高版本。

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

他们不是必需的。你应该在终端和浏览器控制台中查看 linter 输出。但是,如果你希望在编辑器中显示 lint 结果,则可以执行一些额外的步骤。

你需要先为编辑器安装 ESLint 插件。 然后,将名为 .eslintrc.json 的文件添加到项目根目录:

-
  ---------- -----------
-

现在你的编辑应该报告 linting 警告了。

请注意,即使你进一步编辑 .eslintrc.json 文件,这些更改也 只会影响编辑器集成。它们不会影响终端和浏览器中的 lint 输出。这是因为 Create React App 有意提供了一组最常见的错误规则。

如果要为项目强制执行编码风格,请考虑使用 Prettier 而不是 ESLint 样式规则。

在编辑器中进行调试

目前只有 Visual Studio CodeWebStorm 支持此功能。

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

Visual Studio Code

你需要安装最新版本的 VS Code 和 VS Code Chrome Debugger Extension

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

-
  ---------- --------
  ----------------- -
    -
      ------- ---------
      ------- ---------
      ---------- ---------
      ------ ------------------------
      ---------- -----------------------
      ------------------------- -
        ------------------- --------------
      -
    -
  -
-

注意:如果你对 HOST 或 PORT 环境变量 进行了调整,则 URL 可能会有所不同。

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

有 VS Code 调试问题?请参阅 故障排除指南

WebStorm

你需要安装 WebStormJetBrains 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 中进行提交时格式化代码,我们需要安装以下依赖项:

--- ------- ------ ----- ----------- --------

或者你可以使用 yarn:

---- --- ----- ----------- --------
  • husky 使得使用 githooks 变得很容易,就好像它们是 npm 脚本一样。
  • lint-staged 允许我们在 git 中的 staged 文件上运行脚本。有关 lint-staged 的更多信息,请参阅 这篇博客文章
  • prettier 的是我们将在提交运行之前的 JavaScript 格式化程序。

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

将以下字段添加到 package.json

-  -------- -
-    -------- -
-      ------------- -------------
-    -
-  -

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

  --------------- -
    -- ---
  --
- -------------- -
-   -------------------------------------------- -
-     --------- -------------- ---------
-     ---- ----
-   -
- --
  ---------- -

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

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


上一篇:更新到新版本
下一篇:隔离开发组件