ESLint：为一个具有大规则对象的规则运行 ESLint

Question

我试图在我的 React 项目中运行 ESLint，只是为了检查一个特定的（例如：max-len）规则，如下所示：

eslint . --ext .js,.jsx,.ts,.tsx --rule "{'max-len': ['error', { code: 120, ignoreComments: true, ignoreTrailingComments: true, ignoreUrls: true, ignoreStrings: true, ignoreTemplateLiterals: true, }]}"

但结果也显示其他类型的错误。

这是我的 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'react-app',
    'airbnb',
    'plugin:react/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:jsx-a11y/recommended',
  ],
  plugins: [
    'react',
    'jsx-a11y',
    '@typescript-eslint',
  ],
  // parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2017,
    sourceType: 'module',
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    'max-len': ['error', {
      code: 120,
      ignoreComments: true,
      ignoreTrailingComments: true,
      ignoreUrls: true,
      ignoreStrings: true,
      ignoreTemplateLiterals: true,
    }],
  },
};

我还尝试使用 --no-eslintrc 忽略文件 .eslintrc.js 运行，如下所示：

eslint . --ext .js,.jsx,.ts,.tsx --no-eslintrc --rule ....same-rule-above

这次我只得到一个 max-len 错误，其余的是解析 import 关键字的错误：

/Users/olcayertas/10n/src/util/helpers.ts
  1:1  error  Parsing error: The keyword 'import' is reserved

/Users/olcayertas/10n/src/util/routes.ts
  1:1  error  Parsing error: The keyword 'export' is reserved

/Users/olcayertas/10n/src/util/ui-helpers.ts
  1:1  error  Parsing error: The keyword 'import' is reserved

✖ 196 problems (196 errors, 0 warnings)

如何使用规则对象只为一条规则运行 ESLint？

Answer 1

如果您想使用 .eslintrc 文件来保留您的配置（解析器、插件设置等），您可以使用 eslint-nibble 和 --rule=max-len 标志。这将尊重您的正常配置，但仅向您显示该规则的错误，并提供修复它们的选项，如果该规则是可自动修复的。

免责声明：我是 eslint-nibble 的创造者。

Answer 2

我找到了问题，这就是答案。因为我们的项目使用的是TypeScript，所以需要eslintrc.js文件上的配置，所以使用--no-eslintrc是行不通的。相反，我们禁用了扩展规则（不是插件）：

module.exports = {
  ...
  extends: [
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    //'plugin:react/recommended',
    //'arbnb',
  ],
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'import/prefer-default-export': 'off',
    'import/no-unresolved': ['error', { ignore: [ '.svg' ] } ],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
  },
}

因为我想查看导入错误，所以我为导入启用了插件和规则。禁用扩展规则后，我运行以下命令：

eslint . --ext .js,.jsx,.ts,.tsx

而且效果很好！这样我们就可以逐步添加规则了。