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

Posted 2023-02-16

【中文标题】使用插件 eslint-plugin-jsx-a11y 运行全局 ESLint

【英文标题】：Run global ESLint with plugin eslint-plugin-jsx-a11y

【发布时间】：2018-03-28 14:59:20

【问题描述】：

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

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

但我得到了错误

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

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

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

npm i 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 和插件。

我用 yarn 全局安装的包：

eslint 巴别塔核心 babel-eslint eslint-plugin-import eslint-plugin-react 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;
  , );

【问题讨论】：

我刚刚尝试使用 npm 而不是 yarn，它对我来说效果很好。我还添加了--no-eslintrc，因为它试图在文件位置引用本地 .eslintrc

【参考方案1】：

此问题是由于 ESLint 在版本 5 和 6 之间加载包的方式发生了变化。请参阅here for details。

插件和可共享配置不再受 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 之外，目前没有好的解决方案:( 观看this issue 了解更多信息详情。