ESlint e Prettier - Guia de instalação rápida
Tags: react, typescript, javascript, webdev
Published: 2023-02-04 17:53:14

## O Como - Instalação Rápida do ESLint

1.  Abra um terminal node na mesma pasta do seu arquivo package.json
2.  Verifique se você está usando a versão 14 ou superior do node
3.  Execute: npm install --global yarn
4.  Execute: yarn add eslint -D
5.  Execute: yarn eslint --init
    1.  Escolha as opções:
    2.  Para verificar sintaxe, encontrar problemas e forçar o estilo de código
    3.  Módulos JavaScript (import/export)
    4.  React
    5.  Não
    6.  Navegador
    7.  Use um guia de estilo popular
    8.  Airbnb
    9.  JSON
    10.  Sim
    11.  Yarn
6.  Copie [este código](https://gitlab.com/-/snippets/2491049/raw/main/eslintrc.json) para o conteúdo do seu arquivo .elsintrcjson
7.  Execute: yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
8.  Crie o arquivo .prettierrc.json na mesma pasta do seu arquivo package.json
9.  Copie [este código](https://gitlab.com/-/snippets/2491049/raw/main/prettier.json) para o conteúdo do seu arquivo prettierrc.json
10.  Crie a pasta .vscode
11.  Crie um arquivo settings.json dentro da pasta .vscode
12.  Copie [este código](https://gitlab.com/-/snippets/2491049/raw/main/settings.json) para o conteúdo do seu arquivo settings.json
13.  Adicione o plugin editorconfig ao seu editor de código
14.  Crie um arquivo .editorconfig
15.  Copie [este código](https://gitlab.com/-/snippets/2491049/raw/main/.editorconfig) para o conteúdo do seu arquivo settings.json
16.  Feito! Happy Coding! Com estilo ^~

> "Curiosidade: a sigla "rc" no nome dos arquivos significa Rule Configuration (Configuração de Regras)."

## O quê - Bibliotecas para mostrar erros

**ESLint**: O ESLint é um popular lint de JavaScript que verifica o código para sintaxe, problemas e força o estilo de código. Ele pode ajudar a pegar erros antes de eles serem executados e manter a consistência no seu código.

**Prettier**: O Prettier é um formatador de código que automaticamente formata o código em um estilo consistente, eliminando a necessidade de desenvolvedores formatarem manualmente o código. Isso pode ajudar a manter a legibilidade do código e reduzir o tempo gasto na formatação manual de código.

**EditorConfig**: O EditorConfig é um formato de arquivo que ajuda os desenvolvedores a manter estilos de codificação consistentes entre editores de texto e IDEs diferentes. Ele fornece uma configuração comum para indentação, fins de linha e outros estilos de codificação, reduzindo a necessidade de ajustes manuais entre diferentes ambientes de desenvolvimento.

## O Por quê - Mantenha um padrão, codifique melhor

Usar ESLint, Prettier e EditorConfig juntos ajuda a manter código consistente e livre de erros.

-   Defina padrões de código
-   Promova um código limpo
-   Formate automaticamente
-   Mesmo estilo de código em todos os seus projetos

> "O Prettier e o ESLint são ferramentas de formatação e verificação de código opinativas. Isso significa que eles usam padrões estabelecidos e estão constantemente sendo melhorados por especialistas para garantir que seu código seja escrito da melhor maneira possível."

## Links úteis

-   Link para download do Node: [https://nodejs.org/en/download/](https://nodejs.org/en/download/)
-   Começando com o ESlint: [https://eslint.org/docs/latest/use/getting-started](https://eslint.org/docs/latest/use/getting-started)
-   Opções do Prettier: [https://prettier.io/docs/en/options.html](https://prettier.io/docs/en/options.html)
-   Editor Config: [https://editorconfig.org/](https://editorconfig.org/)
-   Arquivos de configuração: [https://gitlab.com/-/snippets/2491049](https://gitlab.com/-/snippets/2491049)

```
Ajudou você? Curta e se inscreva para mais ^~
```

Obrigado por ler! Continue aprendendo!

Fernando JS Silva