Skip to content

Eslint-import-resolver-typescript

Typescript import 순서 자동 정렬

Usage

create-react-app에서 사용하는 방법

create-react-app은 내부적으로 eslint-config-react-app을 사용한다.

eslint-config-react-app <- 이녀석이 뒤에서 @typescript-eslint/parser을 적용하고 있으므로 관련 설정은 안해도 된다.

eslint 설정만 추가하면 된다: 

{
  // ....................
  "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" ... 가 무슨 뜻 인지 모르것다. 검색해서 일단 해결 방법만 확인함.

eslint 설정을 추가: 

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

See also

Favorite site