cra + eslint(airbnb) extensions, no-unresolved 오류 해결

terminal

yarn create react-app . --template typescript
yarn eslint --init
yarn add -D eslint-config-airbnb@latest

• cra + eslint(airbnb)
• 이렇게 리액트 프로젝트를 시작했을 때,

import/extensions
import/no-unresolved
react/jsx-filename-extension

• 이런 오류가 나온다
• 오류가 뜨지 않도록 eslintrc를 설정해주자

eslintrc

eslintrc.json

{
  // ...
  "rules": {
    "react/jsx-filename-extension": [
      "error",
      { "extensions": [".ts", ".tsx"] }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".tsx", ".js", ".jsx"]
      }
    }
  }
}

• 위처럼 설정해 주었다

참고

• https://github.com/chinsun9/react-ts-template/tree/cra5
• https://github.com/import-js/eslint-plugin-import/issues/1615
• https://stackoverflow.com/questions/55614983/jsx-not-allowed-in-files-with-extension-tsxeslintreact-jsx-filename-extensio