如何使用EXTEND_ESLINT环境变量扩展CRA ESLint规则

素材狗 2022-01-01 23:14:31 文章分类：前端问题点击数：1次

文章标签

How to extend CRA ESLint rules with EXTEND_ESLINT environment variable(如何使用EXTEND_ESLINT环境变量扩展CRA ESLint规则)

本文介绍了如何使用EXTEND_ESLINT环境变量扩展CRA ESLint规则的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Facebook的Create Reaction App(CRA)最近发布了一项新功能，允许您扩展其基本ESLint规则。

我们认识到，在某些情况下，需要进一步定制。它属性来扩展基本ESLint配置将_ESLINT环境变量扩展为True。 Setting Up Your Editor

以下是给出的示例，但没有详细说明，如文件名或"共享配置"是什么。

{
    "eslintConfig": {
        "extends": ["react-app", "shared-config"],
        "rules": {
            "additional-rule": "warn"
        },
        "overrides": [
            {
                 "files": ["**/*.ts?(x)"],
                 "rules": {
                     "additional-typescript-only-rule": "warn"
                 }
             }
        ]
    }
}

通过添加环境变量启用该功能。

EXTEND_ESLINT=true

但在文档页面上也没有提供任何如何使用它的信息-Advanced configuation

我已在名为.eslintrc.json的文件中将它们的示例代码添加到我的构建中，但我收到一个构建错误：

"错误：.eslintrc.json中的ESLint配置无效：-意外的顶级属性"eslintConfig"。"

有人把它修好了吗？该文件是否需要导出模块？

虽然Create-React-App documentation不清楚，但他们给出的示例就好像项目的推荐答案配置位于package.json文件的eslintConfig属性中。

您需要configure ESLint as described in its documentation。因此，如果您选择.eslintrc.json方式，则它必须是有效的ESLint配置文件，该文件没有eslintConfig属性。

该示例中唯一重要的事情是：

它们在任何其他配置之前从"react-app"扩展
任何附加规则都设置为"warn"，以避免停止生成项目
如果使用TypeScrip，请将特定的TS相关配置放在"overrides"部分中。

使用TypeScrip的CRA项目的简单.eslintrc.js(请注意扩展名)配置文件可能如下所示：

const defaultRules = [
  'react-app',
  'eslint:recommended',
  // any other plugins or custom configuration you'd like to extend from.
];

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  extends: defaultRules,
  rules: {
    'array-callback-return': 'warn',
    'consistent-return': 'warn',
    'default-case': 'warn',
    // etc.
  },
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      plugins: ['@typescript-eslint'],
      extends: [
        ...defaultRules,
        'plugin:@typescript-eslint/recommended',
        // any other TypeScript specific config (from a plugin, or custom)
      ],
      rules: {
        '@typescript-eslint/no-explicit-any': 'warn',
        '@typescript-eslint/no-unused-vars': 'warn',
        '@typescript-eslint/no-unused-expressions': 'warn',
        // etc.
      },
    },
  ],
  settings: {
    react: {
      // React version. "detect" automatically picks the version you have installed.
      version: 'detect',
    },
  },
};