ESlint e Prettier - Guia de instalação rápida

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 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 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 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 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/
• Começando com o ESlint: https://eslint.org/docs/latest/use/getting-started
• Opções do Prettier: https://prettier.io/docs/en/options.html
• Editor Config: https://editorconfig.org/
• Arquivos de configuração: https://gitlab.com/-/snippets/2491049

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

Obrigado por ler! Continue aprendendo!

Fernando JS Silva