Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Configuração simples para usar o eslint + import absoluto no create-react-app v3 seguindo as configurações da rocketseat
{
"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"]
}
}
}
}
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
@lcnogueira

This comment has been minimized.

Copy link
Owner Author

lcnogueira commented Jun 12, 2019

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 😉 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.