CODEWITHSUNDEEP
reactjstypescriptwebpackcreate-react-appeslintrc
Alina Khachatrian
Alina Khachatrian

Reputation: 757

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

I'm trying to create a rule to have a one empty line between internal and external imports.

.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"
    }
  ]
  }
}

I have the following error:

Compiled with problems:X

ERROR

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

Upvotes: 0

Views: 5808

Answers (2)

Matthieu Riegler
Matthieu Riegler

Reputation: 55102

Install this dependency: 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

And add import to your plugins :

 "plugins": ["import"],

eslint-import-resolver-typescript

Upvotes: 2

Seth Lutske
Seth Lutske

Reputation: 10696

I modified an existing project with a similar eslint config to use your rule. It is working nicely. I have a suspicion your issue is that you don't have an extends property that includes the import rules. Here's my eslint config:

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',
            },
        ],
    },
};

When I run the linter, I get the expected error you want:

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

I would try playing with your extends property. I have some stuff in there you may not need at all, and I dont have the jsx stuff for this particular project, but hopefully this will get you started.

Upvotes: 2

Related Questions