Configuração simples para usar o eslint + import absoluto no create-react-app v3 seguindo as configurações da rocketseat

.eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
    "browser": true,
    "jest": true
  },
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "react/jsx-filename-extension": [
      "error",
      { "extensions": [".js", ".jsx"] }
    ],
    "import/prefer-default-export": "off"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src"]
      }
    }
  }
}

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Caso siga a config da aula 2 do frontend do bônus omnistack SaaS (Babel plugin root import) e esteja usando o create-react-app versão 3, vai receber um erro informando mais ou menos que não é mais suportado desde a versão 2 e sugerindo usar o customize-cra (algo mais ou menos assim...).

Para corrigir, basta configurar os 2 arquivos como acima. O arquivo jsconfig.json também deve ser criado na raiz do seu projeto, assim como o .eslintrc. Essa configuração foi baseada na documentação em si do CRA (https://facebook.github.io/create-react-app/docs/importing-a-component#absolute-imports).

Não é necessário instalar nenhum pacote. Pode substituir toda a configuração da aula pela config acima.

A diferença é que vocÊ não mais vai usar o ~. Ex.:
Ao invés de importar assim

import Test from '~/components/Test';

Vai importar assim:

import Test from 'components/Test';

Simples assim 😉 .