阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      create-react-app 编辑器配置

      前言

      如果配置正确,Create React App会提供很多工具来改善编辑体验。

      本文介绍一些技巧,可以最大程度的提高您的生产力,你只需要正确的配置它们就可以了。

      语法高亮

      https://a.axihe.com/react/create-react-app/syntax-highlighting.png

      如今,许多流行的编辑器都支持开箱即用的ECMAScript新版本+语法高亮显示功能;

      而有些编辑器则需要安装其他扩展。

      这部分帮助您高亮显示语法。

      如果您正在寻找更高级的集成,则可能需要看一下《Babel安装指南》。

      提示:上面的屏幕截图中使用的字体是 FiraCode

      Atom

      安装 language-babel 软件包,然后按照 说明 进行操作。

      Sublime Text 3

      首先,安装Package Control。然后从“程序包控制”菜单安装Babel程序包,并按照说明 进行操作。

      Vim

      安装 vim-javascript 插件,它将为Vim带来改进的语法高亮显示和对JavaScript的缩进支持。

      另一个选择是将 yajs.vimes.next.syntax 一起使用。

      Visual Studio Code

      安装 vscode-language-babel 扩展并按照说明进行操作。

      似乎还有另一种方法可以使语法高亮显示正常工作,您可以在 Visual Studio Code文档 中了解有关它的更多信息。

      WebStorm

      WebStorm现在附带对ES2015 +的支持,而无需安装任何其他扩展。但是,您可能需要启用它

      在编辑器中显示Lint输出

      适用条件

      • 注意:此功能可用于 react-scripts@0.2.0 或更高版本。
      • 对于具有 react-scripts@2.0.3 及更高版本的新创建项目,它开箱即用。
      • 它也仅适用于 npm 3.X 或更高版本。

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

      这些不是必需的,看个人喜好吧,您应该在终端以及浏览器控制台中看到linter输出。如果您希望将结果显示在编辑器中,请确保安装了ESLint插件/扩展。

      请注意,即使您自定义ESLint配置,这些更改也只会影响编辑器集成。

      它们不会影响终端和浏览器内的lint输出。

      这是因为Create React App故意提供了最小的规则集来查找常见错误。

      如果要强制执行的编码风格为您的项目,可以考虑使用更 pretter ,而不是ESLint样式规则。

      实验性:扩展ESLint配置

      我们认识到在某些情况下需要进一步的自定义。现在可以通过将EXTEND_ESLINT环境变量设置为来扩展基本ESLint配置true。

      有关可用环境变量的更多信息,请参见高级配置。

      请注意,任何设置为“error”的规则都将阻止项目的构建。

      有几件事要记住:

      • 我们强烈建议扩展基本配置,如果你删除它可能会导致难以发现的问题。
      • 使用TypeScript时,您需要为仅以 TypeScript文件为overrides目标的规则提供一个对象。

      在以下示例中:

      • 基本配置已通过共享的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 CodeWebStorm 支持此功能。

      Visual Studio CodeWebStorm 支持使用Create React App进行开箱即用的调试。

      这使您作为开发人员能够在不离开编辑器的情况下编写和调试React代码,最重要的是,它使您能够拥有连续开发的体验工作流(因为您不必在工具之间进行切换)。

      Visual Studio Code

      您需要安装最新版本的 VS CodeDebugger for Chrome 扩展。

      然后将下面的代码添加到您·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 Code调试有问题,请参阅其故障排除指南

      WebStorm

      您将需要安装 WebStorm 和 JetBrains IDE Support Chrome扩展。

      在WebStorm菜单中,Run选择Edit Configurations…。然后单击并选择 JavaScript Debug。

      粘贴 http://localhost:3000 到 “URL” 字段中并保存配置。

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

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

      自动格式化代码

      Prettier是一个代码格式化程序,支持JavaScript,CSS和JSON。

      使用Prettier,您可以自动格式化您编写的代码,以确保项目中的代码样式都是一致的。

      有关更多信息,请参见Prettier的GitHub页面,并查看此页面以查看实际操作。

      Git仓库提交时格式化代码

      要在git中进行提交时格式化代码,我们需要安装以下依赖项:

      npm install --save husky lint-staged prettier
      

      或者,您可以使用yarn:

      yarn add husky lint-staged prettier
      
      • husky 使有可能像gpmooks一样使用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": {
      

      上面的+号仅仅是为了方便演示,使用时候需要去掉

      "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
          "prettier --write"
        ]
      },
      

      现在,无论何时提交,Prettier都会自动格式化更改的文件。

      您还可以 ./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}" 第一次设置整个项目的格式。

      接下来,您可能需要将Prettier集成到您喜欢的编辑器中。

      阅读Prettier GitHub页面上有关编辑器集成的部分。

      目录
      目录