Configuração de ESLint para trabalhar com Javascript/Typescript.
1- Instale o pacote no seu projeto como dependência de desenvolvimento.
npm i -D eslint @yagrrusso/eslint-config
2- Crie um arquivo .eslintrc.json
na raiz do seu projeto e extenda algum preset ESLint da biblioteca.
{
// .eslintrc.json
"extends": ["@yagrrusso/eslint-config/[react|node]"]
}
3- Instale a extensão do ESLint no seu VSCode.
4- Configure o ESLint no seu VSCode no arquivo de configurações do usuário settings.json
.
{
// settings.json
"editor.tabSize": 2,
"eslint.format.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
Caso esteja em um monorepo, adicione as seguintes instruções no seu arquivo .eslintrc.json
.
{
// .eslintrc.json
"settings": {
"import/resolver": {
"typescript": {
"project": ["DIRETÓRIO_DO_PACOTE"]
}
}
}
}
Importe um dos presets da lista abaixo para o seu projeto.
Bibliotecas utilizadas nas configurações para React:
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint-config-prettier
- eslint-config-standard
- eslint-import-resolver-typescript
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-prettier
- eslint-plugin-promise
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-unused-imports
- eslint-plugin-react-refresh
Bibliotecas utilizadas nas configurações para Node:
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint-config-prettier
- eslint-config-standard
- eslint-import-resolver-typescript
- eslint-plugin-import
- eslint-plugin-prettier
- eslint-plugin-promise
- eslint-plugin-unused-imports