Absolute path imports for react apps


jsconfig.json


{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "checkJs": true,
    "module": "esnext",
    "target": "esnext",
    "baseUrl": "./src",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"],
  "include": ["./src/**/*.js"]
}


Actually ~/* is not working for now in the box. Need to make eject or install additional packages like craco.

https://stackoverflow.com/questions/63067555/how-to-make-an-import-shortcut-alias-in-create-react-app


Resolve src/ for Eslint


$ yarn add -D babel-eslint


.eslintrc

{
  "parser": "babel-eslint",
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}