Skip to content
Search

Eslint-import-resolver-typescript

lastmod 2025-02-14created 2023-03-077 edits

Automatic sorting of TypeScript import order

Usage

How to use it in create-react-app

create-react-app uses eslint-config-react-app internally.

eslint-config-react-app <- this one applies @typescript-eslint/parser behind the scenes, so you don't need to configure that.

You only need to add the eslint settings: 

{
  // ....................
  "eslintConfig": {
    // ....................
    "settings": {
      "import/resolver": {
        "typescript": {
          "directory": "./src"
        }
      }
    },
    "rules": {
      "import/order": [
        "error",
        {
          "groups": ["builtin", "external", "parent", "sibling", "index"],
          "alphabetize": {
            "order": "asc",
            "caseInsensitive": true
          },
          "newlines-between": "never"
        }
      ]
    }
  },
}

Troubleshooting

Resolve error: typescript with invalid interface loaded as resolver 

/home/your/Project/steelanalysissystem-inspection-webui/src/routes/router.tsx
  1:1  error  Resolve error: typescript with invalid interface loaded as resolver  import/order

/home/your/Project/steelanalysissystem-inspection-webui/src/stores/store.ts
  1:1  error  Resolve error: typescript with invalid interface loaded as resolver  import/order

"TypeScript with invalid interface loaded as resolver" ... no idea what that means. Searched around and just confirmed the fix for now.

Add the eslint settings: 

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  }
}

See also

Favorite site

author Zer0 sitemap