O Como - Instalação Rápida do ESLint
- Abra um terminal node na mesma pasta do seu arquivo package.json
- Verifique se você está usando a versão 14 ou superior do node
- Execute: npm install --global yarn
- Execute: yarn add eslint -D
- Execute: yarn eslint --init
- Escolha as opções:
- Para verificar sintaxe, encontrar problemas e forçar o estilo de código
- Módulos JavaScript (import/export)
- React
- Não
- Navegador
- Use um guia de estilo popular
- Airbnb
- JSON
- Sim
- Yarn
- Copie este código para o conteúdo do seu arquivo .elsintrcjson
- Execute: yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
- Crie o arquivo .prettierrc.json na mesma pasta do seu arquivo package.json
- Copie este código para o conteúdo do seu arquivo prettierrc.json
- Crie a pasta .vscode
- Crie um arquivo settings.json dentro da pasta .vscode
- Copie este código para o conteúdo do seu arquivo settings.json
- Adicione o plugin editorconfig ao seu editor de código
- Crie um arquivo .editorconfig
- Copie este código para o conteúdo do seu arquivo settings.json
- 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
Top comments (0)