使用插件eslint-plugin-jsx-a11y

时间:2017-10-17 01:48:18

标签: javascript eslint yarnpkg eslint-config-airbnb

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

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

但是我收到了错误

  

ESLint无法找到插件“eslint-plugin-jsx-a11y”。出现这种情况的原因有两个:

     
      
  1. 如果全局安装ESLint,请确保全局安装eslint-plugin-jsx-a11y。全局安装的ESLint无法找到本地安装的插件。

  2.   
  3. 如果本地安装了ESLint,则可能是插件安装不正确。尝试运行以下命令重新安装:

         

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

  4.   

所以似乎#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
  • 巴别核
  • 巴别-eslint
  • eslint-插件导入
  • eslint-插件 - 反应
  • eslint-插件-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;
  }, {});
}

1 个答案:

答案 0 :(得分:0)

此问题是由ESLint在版本5和版本6之间加载程序包的方式更改所引起的。请参阅here for details

  

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

     

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

     

根据经验:即使使用ESLint v6,全局安装插件也应始终在本地安装。更准确地说,ESLint v6默认情况下会解析相对于最终用户项目的插件,并且始终会解析相对于导入它们的配置文件位置的可共享配置和解析器。

     

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

     

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

对此有很多讨论,但当前的情况(2019年底)似乎是,除了回退到eslint@5.x之外,目前没有很好的解决方案:(观看{{3 }},以获取更多详细信息。