关于前端:关于-createreactapp-自定义-eslint文件配置解决方案

create-react-app 我的项目自定义 eslitn 配置形式

计划一 eject 我的项目 webpack 配置进行自定义

这个计划比拟 low，不倡议应用。这里不解说了。

计划二  在 package.json 中的 script 命令 增加环境变量 EXTEND_ESLINT=treu 开启自定义

react-script4.x 版本以下可用这个计划

咱们能够关上 react-script 源码看到 webpack.config.js 文件

​

​

当环境变量设定为 true 时候,react-script 会认为咱们自定义 eslint 配置，不启用 eslint-config-react-app 的配置。

然而开启这个变量咱们只能在 package.json 中的 eslintConfig 字段进行配置自定义，无奈通过根目录 .eslintrc 配置，所以不倡议应用。咱们应用第三计划

计划三 react-app-rewired 和 customize-cra

react-app-rewired 和 customize-cra 是用于对 react-scripts 手脚架包装一次进行应用，可不对 react eject 就能够对我的项目自定义 webpack，仅限于 react-scriptr4.x 以下。

1. 先装置依赖 

npm i react-app-rewired customize-cra -D

2. 在我的项目跟目录创立 config-overrides.js 内容如下

const {override, addWebpackAlias, useEslintRc} = require('customize-cra')
const path = require('path')

module.exports = override(
  // 留神，肯定要用 path.resolve 引入 eslint 的配置文件，否则不失效
  useEslintRc(path.resolve(__dirname, './.eslintrc.json')),
  // 配置门路别名
  addWebpackAlias({'@': path.resolve(__dirname, './src'),
    '_c': path.resolve(__dirname, './src/components')
  })
) 

3. 批改 package.json 的命令 

"start": "cross-env REACT_APP_API=development PORT=3005 react-app-rewired start",

4. 而后在根目录创立 .eslintrc.json 进行自定义 eslint 配置即可。这里分享一下咱们团队 eslint 配置，具体更多配置，大家可本人到 eslint 官网进行参考, 0 示意敞开，1 示意正告，2 示意严重错误

{
    "env": {
        "node": true,
        "mocha": true,
        "jest": true,
        "es6": true,
        "browser": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {"jsx": true},
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "jsx-a11y",
        "react-hooks"
    ],
    "settings": {
        "react": {"version": "detect"}
    },
    "globals": {
        "JSX": true,
        "React": true,
        "NodeJS": true,
        "Promise": true
    },
    "rules": {"no-console": [1, { "allow": ["error"] }],
        "consistent-return": 2,
        "curly": [2, "multi-or-nest"],
        "dot-location": 0,
        "eqeqeq": 2,
        "no-alert": 2,
        "no-eq-null": 2,
        "no-lone-blocks": 2,
        "no-return-await": 2,
        "no-unused-expressions": 2,
        "no-label-var": 1,
        "array-bracket-spacing": 2,
        "brace-style": 0,
        "comma-spacing": 1,
        "consistent-this": 1,
        "eol-last": 0,
        "multiline-ternary": [1, "always-multiline"],
        "new-cap": [2, { "capIsNew": false}],
        "no-trailing-spaces": 0,
        "semi": ["error", "never"],
        "space-before-blocks": 2,
        "space-in-parens": 2,
        "spaced-comment": 2,
        "switch-colon-spacing": ["error", { "after": true, "before": false}],
        "arrow-spacing": 2,
        "quotes": [0, "single"],
        "key-spacing": 2,
        "comma-dangle": ["error", "never"],
        "react-hooks/exhaustive-deps": 0,
        "no-empty-function": 1,
        "react-native/no-inline-styles": 0,
        "react/forbid-prop-types": 0,
        "react/prop-types": 0,
        "react/display-name": 0,
        "prefer-promise-reject-errors": 0,
        "react/no-array-index-key": 2,
        "react/no-unused-state": 2,
        "react/jsx-indent-props": 1,
        "react/jsx-no-comment-textnodes": 1,
        "react/jsx-no-duplicate-props": 2,
        "react/jsx-no-target-blank": [1, { "enforceDynamicLinks": "always"}],
        "react/jsx-no-undef": 2,
        "react/jsx-props-no-multi-spaces": 1,
        "react/jsx-tag-spacing": 1,
        "react/jsx-uses-vars": 2,
        "react/jsx-wrap-multilines": 2,
        "react-hooks/rules-of-hooks": 2
    }
} 

计划 4 react-script 4.x 计划

react17 官网团队批改了脚手架容许间接在内部申明.eslintrc 文件笼罩 eslint 配置。不须要对 package 和 react-app-rewired 和 customize-cra 就可用实现 eslint 配置。

在根目录创立文件 .eslintrc.json，配置的 extends 字段须要改一下

{
    "env": {
        "node": true,
        "mocha": true,
        "jest": true,
        "es6": true,
        "browser": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {"jsx": true},
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "jsx-a11y",
        "react-hooks"
    ],
    "settings": {
        "react": {"version": "detect"}
    },
    "globals": {
        "JSX": true,
        "React": true,
        "NodeJS": true,
        "Promise": true
    },
    "rules": {"no-console": [1, { "allow": ["error"] }],
        "consistent-return": 2,
        "curly": [2, "multi-or-nest"],
        "dot-location": 0,
        "eqeqeq": 2,
        "no-alert": 2,
        "no-eq-null": 2,
        "no-lone-blocks": 2,
        "no-return-await": 2,
        "no-unused-expressions": 2,
        "no-label-var": 1,
        "array-bracket-spacing": 2,
        "brace-style": 0,
        "comma-spacing": 1,
        "consistent-this": 1,
        "eol-last": 0,
        "multiline-ternary": [1, "always-multiline"],
        "new-cap": [2, { "capIsNew": false}],
        "no-trailing-spaces": 0,
        "semi": ["error", "never"],
        "space-before-blocks": 2,
        "space-in-parens": 2,
        "spaced-comment": 2,
        "switch-colon-spacing": ["error", { "after": true, "before": false}],
        "arrow-spacing": 2,
        "quotes": [0, "single"],
        "key-spacing": 2,
        "comma-dangle": ["error", "never"],
        "react-hooks/exhaustive-deps": 0,
        "no-empty-function": 1,
        "react-native/no-inline-styles": 0,
        "react/forbid-prop-types": 0,
        "react/prop-types": 0,
        "react/display-name": 0,
        "prefer-promise-reject-errors": 0,
        "react/no-array-index-key": 2,
        "react/no-unused-state": 2,
        "react/jsx-indent-props": 2,
        "react/jsx-no-comment-textnodes": 1,
        "react/jsx-no-duplicate-props": 2,
        "react/jsx-no-target-blank": [1, { "enforceDynamicLinks": "always"}],
        "react/jsx-no-undef": 2,
        "react/jsx-props-no-multi-spaces": 1,
        "react/jsx-tag-spacing": 1,
        "react/jsx-uses-vars": 2,
        "react/jsx-wrap-multilines": 2,
        "react-hooks/rules-of-hooks": 2
    }
}