使用插件 eslint-plugin-jsx-a11y 运行全局 ESLint

Question

我正在尝试使用配置文件的指定路径对单个文件运行 ESLint 的全局安装：

eslint FileToCheck.jsx --config "../path/to/config/.eslintrc.js"

但我收到错误

ESLint 找不到插件“eslint-plugin-jsx-a11y”。 这可能有几个不同的原因：

1. 如果 ESLint 是全局安装的，那么请确保 eslint-plugin-jsx-a11y 也是全局安装的。 全局安装的 ESLint 找不到本地安装的插件。

2. 如果 ESLint 安装在本地，那么很可能是插件没有正确安装。 尝试通过运行以下命令重新安装：

   npm 我 eslint-plugin-jsx-a11y@latest --save-dev

所以看起来#1 是适用的，我需要全局安装eslint-plugin-jsx-a11y 。 我尝试这样做

yarn global add eslint-plugin-jsx-a11y

并重新运行原始的 ESLint 命令，但它失败并出现相同的错误。 我在yarn global add期间注意到一些输出说

“eslint-plugin-jsx-a11y@6.0.2”没有二进制文件

事实上，当我检查 ~/AppData/Local/Yarn/bin 时，我没有找到该插件的任何二进制文件（尽管我为 ESLint 找到了）。

如何使用此插件让 ESLint 全局运行？ 一个好的答案不会告诉我只是在本地安装它，而是会实际回答给出的问题 - 如何通过全局安装的 ESLint 和插件来实现这一点。

我使用纱线全局安装的软件包：

• eslint
• babel 核心
• babel-eslint
• eslint 插件导入
• eslint 插件反应
• eslint-plugin-jsx-a11y
• eslint-config-airbnb

这是我的 .eslintrc.js，它可能相关也可能不相关：

module.exports = {
  'extends': 'airbnb',
  'plugins': [
    'react',
    'jsx-a11y',
    'import'
  ],

  'env': {
    'browser': true
  },

  'parser': 'babel-eslint',

  'rules': {
    'prefer-template': 'error',
    'comma-dangle': ['error', 'always-multiline'],
    'import/no-extraneous-dependencies': 'off',
    'react/prop-types': 'off',
    'react/jsx-no-bind': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'jsx-a11y/no-noninteractive-element-interactions': 'off',
    'jsx-a11y/alt-text': 'off',
    'jsx-a11y/no-autofocus': 'off',
    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
    'no-use-before-define': ['error', { 'functions': false }],
    'func-style': ['error', 'declaration', { 'allowArrowFunctions': true }],
    'no-console': 'off',
    'no-alert': 'off',
    'no-continue': 'off',
    'no-param-reassign': ['error', { 'props': false }],
    'no-plusplus': ['error', { 'allowForLoopAfterthoughts': true }],
    'one-var-declaration-per-line': ['error', 'initializations'],
    'one-var': 'off', // Not needed because of one-var-declaration-per-line
    'indent': ['error', 2, {
      'FunctionDeclaration': { 'parameters': 'first' },
      'SwitchCase': 1
    }],
    'no-restricted-syntax': [
      'error',
      {
        selector: 'ForInStatement',
        message: 'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
      },
      {
        selector: 'LabeledStatement',
        message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
      },
      {
        selector: 'WithStatement',
        message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
      },
    ],
  }
};

if (process.env.FEATURE_FLAGS) {
  const flags = Object.keys(JSON.parse(process.env.FEATURE_FLAGS));

  module.exports.globals = flags.reduce(function (flagConfig, flag) {
    flagConfig[flag] = false;
    return flagConfig;
  }, {});
}

Answer 1

此问题是由于 ESLint 在版本 5 和 6 之间加载包的方式发生了变化。有关详细信息，请参阅此处。

插件和可共享配置不再受 ESLint 位置的影响

以前，ESLint 加载插件是相对于 ESLint 包本身的位置。 因此，我们建议全局安装 ESLint 的用户也应该全局安装插件，本地安装 ESLint 的用户应该在本地安装插件。 然而，由于设计错误，这种策略导致 ESLint 在某些情况下随机无法加载插件和可共享配置，尤其是在使用 lerna 和 Yarn Plug n' Play 等包管理工具时。

根据经验：使用 ESLint v6，插件应该始终安装在本地，即使 ESLint 是全局安装的。 更准确地说，ESLint v6 默认解析与最终用户项目相关的插件，并且始终解析与导入它们的配置文件的位置相关的可共享配置和解析器。

要解决：如果您使用 ESLint 的全局安装（例如使用npm install eslint --global ）以及插件，您应该在运行 ESLint 的项目中本地安装这些插件。 如果您的配置文件扩展了可共享的配置和/或解析器，您应该确保这些包作为包含配置文件的项目的依赖项安装。

如果您使用位于本地项目之外的配置文件（带有--config标志），请考虑将插件安装为该配置文件的依赖项，并将--resolve-plugins-relative-to标志设置为配置文件。

对此有很多讨论，但目前的事态（2019 年末）似乎除了回滚到eslint@5.x ，目前还没有好的解决方案 :( 观看此问题以获取更多详细信息。