ESLINT 意外的頂級屬性“導入/訂購”錯誤

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 東西，但希望這會讓你開始。