Faaala Dev!

Nesse guia você verá o passo a passo de como realizar a configuração do ESLint, Prettier e EditorConfig da mesma forma como é usado nas aulas.

Mesmo que em alguma aula você identifique que possui alguma configuração que a instrutora Daniele Leão não possui, fica tranquilo(a). Isso é porque ela foi adicionando ao longo das aulas mas eu já to te passando tudinho aqui com antecedência, beleza?

Mesmo assim, sempre que ela adicionar uma nova configuração, dá uma conferida só pra ter certeza de que você já possui ela 😉.

Introdução

Uma ferramenta que nos auxilia no momento de padronizarmos o nosso projeto, e talvez seja a mais importante, é o Eslint. Com ele conseguimos automatizar os padrões de códigos do nosso projeto, e podemos utiliza-lo para projetos em NodeJS, ReactJS e React Native.

Por exemplo, no Javascript o uso do ponto e vírgula ao final de uma linha é facultativo, ou seja, diferente de algumas linguagens, a falta dele não interfere para que o código seja compilado. Outra utilização que também é opcional é o uso de aspas duplas ou aspas simples.

Já quando estamos criando um objeto, o uso da vírgula no último item do objeto também é opcional, como podemos ver no exemplo abaixo.

const aluno = {
  nome: "Mariana",
  idade: 20,
};
const aluno = {
  nome: "Daniel",
  idade: 21
};

No primeiro objeto utilizamos vírgula após o valor dentro do atributo idade, já no segundo não utilizamos, o que não interfere na execução do código.

O Eslint integra, não somente para o VSCode, mas também com qualquer outro tipo de editor, o que mais uma vez ajuda na padronização do código, caso um outro desenvolvedor esteja desenvolvendo no mesmo projeto, mas não queira usar o VSCode.

O Prettier é mais uma ferramenta que vamos utilizar para ajudar na padronização de código, ele consiste em várias configurações que são feitas para que o código seja formatado para seguir um padrão.

Alguns exemplos de formatações que ele faz é a quebra de linha quando ela tem mais de 80 caracteres, adicionar ; no final das linhas dentre outras funcionalidades muito úteis para um projeto.

Instalação

Antes de iniciar de fato a configuração do Eslint em nosso projeto, precisamos instalar a extensão do Eslint no VSCode. É ela quem irá nos auxiliar para que nossas configurações sejam entendidas dentro do nosso código.

ESLint - Visual Studio Marketplace

Uma outra configuração que é geral e precisamos fazer para o VSCode formatar o código sempre que salvarmos algum arquivo é adicionar uma opção chamada codeActionsOnSave nas configurações, assim como mostrado abaixo: