ESLINT 意外的顶级属性 "import/order" 错误

Question

我正在尝试创建一个规则，在内部和外部导入之间留一个空行。

.eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "env": {
      "es6": true,
      "node": true,
      "jest/globals": true,
      "browser": true
  },
  "parserOptions": {
      "sourceType": "module",
      "ecmaVersion": 2019,
      "project": "tsconfig.json",
      "ecmaFeatures": {
          "jsx": true
      }
  },
  "rules": {
    "import/order": [
    "error",
    {
      "groups": [["builtin", "external"]],
      "newlines-between": "always"
    }
  ]
  }
}

我有以下错误：

Compiled with problems:X

ERROR

ESLint configuration in .eslintrc.json is invalid:
    - Unexpected top-level property "import/order".

Answer 1

安装此依赖项：eslint-import-resolver-typescript

# npm
npm i -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

# yarn
yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

并将 import 添加到您的插件中：

 "plugins": ["import"],

eslint-import-resolver-typescript

Answer 2

我修改了一个具有类似 eslint 配置的现有项目以使用您的规则。它工作得很好。我怀疑您的问题是您没有包含导入规则的 extends 属性。这是我的 eslint 配置：

module.exports = {
    root: true,
    env: {
        node: true,
    },
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:import/warnings', // <--- note this inclusion here
    ],
    rules: {
        'import/order': [
            'error',
            {
                groups: [['builtin', 'external']],
                'newlines-between': 'always',
            },
        ],
    },
};

当我运行 linter 时，我得到了你想要的预期错误：

13:1  error  There should be at least one empty line between import groups  import/order

我会尝试玩你的 extends 属性。我有一些你可能根本不需要的东西，我没有有这个特定项目的 jsx 东西，但希望这能帮助你开始。

ESLINT 意外的顶级属性 "import/order" 错误

ESLINT Unexpected top-level property "import/order" error

typescript

reactjs

webpack

create-react-app

eslintrc

ESLINT 意外的顶级 属性 "import/order" 错误

ESLINT Unexpected top-level property "import/order" error

typescript

reactjs

webpack

create-react-app

eslintrc

ESLINT 意外的顶级属性 "import/order" 错误