为 create-react-app 项目启用 StandardJS

create-react-app 因为其零配置的特性备受开发者欢迎,但开发者无法自定义配置。比如我喜欢用 JavaScript Standard Style 代码检查工具,却没法替换 cra 中的 eslint。虽然可以用 eslint-config-standard 将 standard 作为插件配置到 eslint 中,但 ESLINT 自定义配置在 cra 项目中并没有被启用,因此我们需要先启用 ESLINT 自定义配置。

启用 .eslintrc

方法一:遵循官方文档

根据 cra 的文档 Experimental: Extending the ESLint config在根目录创建 .env 文件,设置环境变量 EXTEND_ESLINTtrue,即可启用 .eslintrc

EXTEND_ESLINT=true  

方法二:更加自定义

因为 cra 用的人很多,但总有人需要自定义配置,所以社区诞生了 react-app-rewired,它可以在不弹出 cra 配置(eject)的情况下来配置 webpack。
在此基础上 customize-cra 可以进一步简化配置,并提供了很多常用的 webpack 插件及配置。

下面我们来配置这两个工具:

$ yarn add --dev react-app-rewired customize-cra

create-react-app 内含 eslint 和 babel-eslint,我们并不需要额外安装这两个依赖。

更新 package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

在项目根目录创建 config-overrides.js

const {  
  override, addDecoratorsLegacy,
  addBabelPlugins, useEslintRc
} = require('customize-cra')

module.exports = override(  
  addDecoratorsLegacy(),
  useEslintRc('.eslintrc'),
  ...addBabelPlugins(
    '@babel/plugin-transform-react-constant-elements',
    ['babel-plugin-styled-components', { pure: true }],
    'transform-react-remove-prop-types',
    'lodash'
  )
)

有了useEslintRc('.eslintrc'),我们便启用了 .eslintrc,另外我还添加了装饰器语法支持和几个 babel 插件(各位请按需配置)。

启用 StandardJS

默认的 standard 工具无法在 eslint 中配置,但它内部有几个高级版工具可以让我们在 eslint 中使用:

eslint-config- 前缀的包需要在 .eslintrc 中用 extends 配置(Shareable Configs),其中 eslint-config-standard-react 包含 eslint-config-standard-jsx 可选其一使用。

安装依赖:

$ yarn add --dev eslint-config-standard eslint-config-standard-react eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-react eslint-plugin-react-hooks

import/node/promise/standard 插件是 eslint-config-standard 的同级依赖(peerDependencies),
eslint-plugin-reacteslint-config-standard-react 的同级依赖,
eslint-plugin-react-hooks 为额外添加的规则插件(可不加)。

配置 .eslintrc

{
  "env": {
    "commonjs": true,
    "node": true,
    "browser": true,
    "serviceworker": true
  },
  "parser": "babel-eslint",
  "extends": ["standard", "standard-react"],
  "plugins": ["react-hooks"],
  "rules": {
    "react/prop-types": 0,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error"
  }
}

因为不需要 eslint-config-standard-react 中的 react/prop-types 规则,所以禁用掉了。

至此自定义 eslint 与 standard 均配置完成,我们来看下最终效果:

standard lint

正在加载 Disqus 评论组件...