Eslint 无法加载在 '.eslintrc' 中声明的插件 'security'：找不到模块 'eslint-plugin-security'

Question

我的 eslint 不工作，我也不知道为什么。

这是我的 eslint 文件：

{
  "parser": "babel-eslint",
  "plugins": [
    "security",
    "react",
    "import",
    "material-ui",
    "eslint-plugin-no-inline-styles"
  ],
  "extends": [
    "airbnb",
    "plugin:security/recommended",
    "plugin:import/react",
    "plugin:import/recommended"
  ],
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "jsx-a11y/media-has-caption": 0,
    "import/no-extraneous-dependencies": 0,
    "security/detect-object-injection": 0,
    "security/detect-child-process": 0,
    "security/detect-non-literal-regexp": 0,
    "react/jsx-props-no-spreading": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-indent": 0,
    "react/jsx-indent-props": 0,
    "no-tabs": 0,
    "indent": 0,
    "no-underscore-dangle": 0,
    "max-len": 0,
    "jsx-quotes": 0,
    "react/sort-comp": 0,
    "no-debugger": 0,
    "import/prefer-default-export": 0,
    "arrow-body-style": 0,
    "react/jsx-wrap-multilines": 0,
    "spaced-comment": 0,
    "class-methods-use-this": 0,
    "padded-blocks": 0,
    "eol-last": 0,
    "no-lone-blocks": 0,
    "implicit-arrow-linebreak": 0,
    "no-plusplus": 0,
    "default-case": 0,
    "radix": 0,
    "arrow-parens": [
      "error",
      "always"
    ],
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          "@material-ui/*/*/*",
          "!@material-ui/core/test-utils/*"
        ]
      }
    ],
    "react/destructuring-assignment": [
      0,
      "never",
      {
        "ignoreClassFields": true
      }
    ],
    "react/jsx-no-duplicate-props": [
      2,
      {
        "ignoreCase": false
      }
    ],
    "no-inline-styles/no-inline-styles": 2
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    },
    "import/extensions": [
      ".js",
      ".jsx"
    ]
  }
}

由于某种原因，我收到以下错误：

Failed to load plugin 'security' declared in '.eslintrc': Cannot find module 'eslint-plugin-security'

我尝试全局安装eslint-plugin-security，但没有解决问题。
有什么帮助吗？
谢谢。

Answer 1

添加“eslint-plugin-security”作为开发依赖解决了我的问题。

 yarn add eslint-plugin-security --dev 

或

 npm install eslint-plugin-security --save-dev

会起作用

Answer 2

将eslint文件改成如下解决：

{
  "parser": "babel-eslint",
  "plugins": [
    "security",
    "react",
    "import",
    "material-ui",
    "eslint-plugin-no-inline-styles"
  ],
  "extends": [
    "airbnb",
    "plugin:security/recommended",
    "plugin:import/react",
    "plugin:import/recommended"
  ],
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "jsx-a11y/media-has-caption": 0,
    "import/no-extraneous-dependencies": 0,
    "security/detect-object-injection": 0,
    "security/detect-child-process": 0,
    "security/detect-non-literal-regexp": 0,
    "react/jsx-props-no-spreading": 0,
    "arrow-parens": ["error", "always"],
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["@material-ui/*/*/*", "!@material-ui/core/test-utils/*"]
      }
    ],
    "react/destructuring-assignment": [2, "never", { "ignoreClassFields": true }],
    "react/jsx-no-duplicate-props": [2, { "ignoreCase": false }],
    "no-inline-styles/no-inline-styles": 2,
    "react/jsx-key": [2, { "checkFragmentShorthand": true }],
    "react/no-unsafe": [2, { "checkAliases": true }]
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    },
    "import/extensions": [
      ".js",
      ".jsx"
    ]
  }
}