create-react-app 编辑器配置

🌙
手机阅读
本文目录结构
axihe

前言

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang