Com o desenvolvimento de softwares complexos se torna necessário a padronização da escrita dos seus códigos e da sua equipe. Dar manutenção em um projeto onde cada arquivo mantém um padrão de escrita diferente, declarações de variáveis que não estão sendo utilizadas, má indentação, entre outros diversos problemas que podem dificultar a leitura, tudo isso não é fácil e pode causar muita dor de cabeça. É por isso que atualmente existem ferramentas que irão te ajudar a contornar esses problemas, tornando o seu código legível e de fácil entendimento por toda a equipe.

Aqui falaremos sobre duas ferramentas que funcionando em conjunto dão ótimos resultados, são elas ESLint e Prettier.

ESLint

Pensando nesses problemas citados foi criado o ESLint, uma ferramenta de code styling. Com ele podemos criar um guia de estilo que irá conter as regras que nosso código deverá seguir.

O ESLint trabalha verificando o seu código, identificando padrões, buscando por erros e corrigindo para obter um código mais consistente. Uma das grandes vantagens é a possibilidade de alertar problemas antes mesmo da execução do código, alertando principalmente aqueles problemas de falta de atenção, como tentar utilizar uma variável com o nome errado ou fora de escopo.

Além do mais, o ESLint é totalmente configurável, caso você não concorde com alguma regra imposta por ele você poderá facilmente desligá-la.

Prettier

Prettier, é um formatador de código opinativo. Ele suporta muitas linguagens e se integra com a maioria dos editores de código. Com o Prettier também podemos definir algumas configurações para o nosso código, como, tamanho das tabs, utilização/não utilização de ponto e vírgula, espaçamentos entre blocos de código e mais.

ESLint vs Prettier

Para alguns desenvolvedores depois de lerem sobre o ESLint e Prettier podem ficar em dúvida sobre as diferenças de cada um, pois a princípio ambos são formatadores de código e seguem um guia de estilo predefinido.

Para entender a real diferença entre eles, precisamos aprender sobre dois tipo de regras:

Regras de qualidade de código: inclui validar variáveis não utilizadas, validar constantes sendo retribuídas, validar o correto uso de async/await, entre outras validações.

Regras de formatação: inclui máximo de caracteres por linha, não misturar tab e espaçamentos, utilizar/não utilizar ponto e vírgula, largura dos espaçamentos, etc…

O ESLint atua principalmente nas regras de qualidade de código, deixando as regras de formatação serem realizadas pelo Prettier.

Instalação

Antes mesmo de começarmos a instalação do ESLint e do Prettier, precisamos nos certificar se o Node.js está instalado globalmente na nossa máquina, utilize o comando abaixo no seu terminal e o retorno deverá ser a versão do Node.js instalada globalmente:

node -v

Caso não retorne a versão instalada, você deverá realizar o download do Node.js, clique aqui para ir para o site oficial.

Atenção! É altamente recomendável que você instale a última versão LTS (Long Term Support) do Node.js, essa versão não contém funcionalidades de experimentação e possui um suporte de longo prazo para futuras correções de problemas. Lembrando também que a versão mínima para utilização do ESLint é a ^10.12.0.

Para você que utiliza o NPM, em alguns comandos será necessário a utilização do NPX, execute o comando abaixo para instalar em sua máquina:

npm install -g npx

Após a instalação do Node e do NPX podemos dar continuidade com as instalações das bibliotecas, execute os comandos para instalar o ESLint e Prettier no seu projeto:

npm install eslint --save-dev
npm install prettier --save-dev

ou

yarn add eslint --dev
yarn add prettier --dev

Atenção! Essas dependências deverão ser instaladas utilizando a flag — save-dev pois elas serão utilizadas apenas em ambiente de desenvolvimento.

Configuração

Para configurar o ESLint é necessário executar o comando abaixo:

npx eslint --init

ou

yarn run eslint --init

Atenção! Para configurar o ESLint você deverá possuir um arquivo package.json em seu projeto. Caso contrário, certifique-se de executar o npm init ou yarn init antes.

Após executar o comando acima, algumas perguntas serão realizadas, você deverá respondê-las de acordo com o seu projeto.

Após o final das perguntas será gerado um arquivo .eslintrc.{js,yml,json} no seu diretório raiz, esse arquivo irá conter o nosso guia de estilo. A configuração de exemplo abaixo não contém suporte a nenhum framework, sendo apenas uma configuração básica.

.eslintrc.js

module.exports = {
  // Definindo em quais ambientes a validação irá ocorrer
  env: {
    browser: true,
    es2021: true,
    node: true
  },

// Padrões básicos definidos pela comunidade, estou utilizando o standard (padrão do ESLint)
  extends: ['standard'],

// ESLint por padrão não valida códigos com sintaxes experimentais       do ECMAScript, tornando-se necessário a utilização de um parser
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },

// Regras que serão aplicadas com prioridade em comparação com as     regras do extends
  rules: {}
}

Atenção! O meu arquivo de configuração está no formato .js, atente-se ao seu tipo de arquivo e configure de acordo com a sintaxe da extensão.

No meu exemplo, eu utilizei o padrão do ESLint, o Standard, nele contém diversas regras aplicadas, porém você pode utilizar outros padrões já definidos pela comunidade, como, a do Airbnb ou até mesmo escrever as suas próprias regras no objeto rules. Veja essa referência para ver as regras disponíveis.

Para configurar o Prettier não existe um comando para utilizarmos, então vamos ter que configurar manualmente, vamos lá:

No diretório raiz crie um arquivo .prettierrc.json e vamos colocar algumas configurações:

.prettierrc.json

{
  // Remove os pontos e vírgulas no final de uma instrução
  "semi": false,

// Utiliza apenas aspas simples
  "singleQuote": true,

// Indentação padrão será por 2 tabs
  "tabWidth": 2,

// Remove a vírgula no final de um objeto
  "trailingComma": "none"
}

Essas configurações são as que eu costumo utilizar em meus projetos, fique livre para configurar de acordo com as suas necessidades, utilize essa referência para saber as suas possibilidades de configuração do Prettier.

Utilização

Para utilizar o ESLint, execute o comando:

Para formatar arquivos

npx eslint index.js

ou

yarn eslint index.js

Para formatar diretórios

npx eslint --ext .js .

ou

yarn eslint --ext .js .

Atenção! Se desejar aplicar uma correção automática, execute os comandos acima com parâmetro — fix.

Para utilizar o Prettier, execute o comando:

npx prettier --write .

ou

yarn prettier --write .

Agora com tudo funcionando você pode perceber que não é muito legal executar esses comandos toda hora que precisar corrigir um arquivo, certo?

Aí que entra o VSCode! Com ele podemos configurar para que sempre que salvarmos o nosso arquivo o ESLint e Prettier serão executados e aplicará as regras automaticamente.

Para configurarmos o VSCode devemos instalar dois plugins, o do ESLint e o do Prettier. Após instalados, devemos abrir o settings.json do VSCode.

Mac: Preferências > Configurações > Abrir configuração (JSON)
Windows e Linux: Arquivo > Preferências > Configurações > Abrir configuração (JSON)

No arquivo adicione essas configurações juntamente com as configurações atuais:

{
    // ... suas configurações
    
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },

    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Pronto! Agora sempre que você salvar uma alteração em um arquivo as regras do ESLint e Prettier predefinidas serão aplicadas automaticamente.

Conclusão

O ESLint e o Prettier são ferramentas totalmente adaptáveis, fique a vontade para configurar de acordo com a sua necessidade e time de desenvolvimento. Obrigado e até a próxima!

Padronizando o seu código com o ESLint, Prettier e VSCode was originally published in OW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.