ESLint, Prettier e editorConfig

Retomando a série sobre como configurar um projeto Node.js (veja a parte 01: Configurando estrutura inicial de uma aplicação Node.js), vamos agora garantir que todos os integrantes do time escreva no mesmo padrão de código configurando o ESLint, Prettier e editorConfig.

Mesmo se você estiver em um projeto pessoal, trabalhando sozinho, configurar um estilo padrão para o seu código vai ajudar bastante a manter as coisas organizadas. Há diversos estilos no mercado (você pode criar o seu, inclusive), mas eu gosto de usar o padrão Airbnb JavaScript Style Guide. É com base nesse guia de estilo que nosso código será formatado.

Como instalar ESLint e configurá-lo em um projeto Node

Primeiro instalamos o ESlint (modo desenvolvimento). Acesse o terminal e digite: yarn add eslint -D. Logo após a instalação, vamos iniciar o processo de configuração. No terminal: yarn eslint --init.

Agora, basta seguir as instruções abaixo:

1. Escolha To check syntax, find problems, and enforce code style.

2. Escolha Javascript modules (import/export). Lembrando que configuramos o sucrase no primeiro artigo da série.

3. Escolha None of these (estamos num projeto Node e ele não está listado).

4. Digite N, pois não estamos usando TypeScript.

5. Desmarque a opção Browser e selecione Node (use a barra de espaço do teclado para marcar/desmarcar).

6. Escolha Use a popular style guide.

7. Selecione Airbnb.

8. Por fim, selecione Javascript.

Após concluir a configuração, como estamos usando yarn ao invés de npm, basta excluir o arquivo package-lock.json e depois rodar yarn no terminal. Isso faz com que o yarn mapeie as novas dependências. (NÃO exclua o package.json).

Feito isso, foi gerado um arquivo .eslintrc.js na raíz do projeto. É nesse arquivo que vamos fazer as principais configurações (regras, plugins...).

Configurando plugin ESLint no VS Code

Para continuarmos e vermos o ESLint funcionando, instale o plugin do ESLint (Dirk Baeumer) no VS Code. Após instalar, vai perceber se abrir o arquivo src/app.js que ele começa a marcar alguns "erros" no código. No padrão airbnb é preciso um ; no final da instrução, por isso ele está dando o erro de linting (análise de código em busca de potenciais erros).

Agora, vamos fazer um ajuste nas configurações do VS Code para ele poder fazer as correções de forma automática para nós assim que salvarmos o arquivo. Use a tecla de atalho ctrl + p e digite >json. Selecione a opção como mostrado na imagem abaixo:

Adicione:

// ...

"eslint.autoFixOnSave": true,

"eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],

// ...

Após salvar o arquivo, se colocarmos algum código fora do padrão airbnb, ele irá corrigir automaticamente quando salvarmos (pelo menos a maioria das correções). Seja um ; no final da instrução, uma linha em branco faltando no final do arquivo ou um import usando aspas duplas...

Calma que ainda falta mais alguns ajustes a serem feitos.

Próximo passo é escrever algumas regras no arquivo .eslintrc.js:

module.exports = {
  // ...

  rules: {
    'class-methods-use-this': 'off', // desativa uma regra que diz que todo método de uma classe precisa usar a palavra this
    'no-param-reassign': 'off', // desativa uma regra que diz que não é permitido receber parâmetro e fazer alterações nele
    camelcase: 'off', // desativa uma regra que diz que toda variável precisa ser escrita no formato camelCase
    'no-unused-vars': ['error', { argsIgnorePattern: 'next' }], // não reclamar caso a variável utilizada seja next que é usada pelos middlewares do express
  },
};

Já deixei comentado cada regra para que saiba o porquê de estarmos desativando elas (regras essas que são impostas pelo padrão de estilo airbnb).

Nada impede de desabilitarmos algumas regras e, esse tipo de decisão, cabe o líder da equipe decidir.

Instalação e configuração do Prettier

Próximo passo é instalar o prettier e os plugins adicionais do ESlint: yarn add prettier eslint-config-prettier eslint-plugin-prettier -D (deixar o código mais bonito, quebra de linha quando necessário...).

Após instalado, ainda dentro do arquivo .eslintrc.js, em extends, adicionar "prettier" como segundo parâmetro do array. Depois, declarar uma propriedade chamada plugins passando o plugin do prettier que acabamos de instalar: plugins: ['prettier'], e dentro das rules, acrescentar: "prettier/prettier": "error".

Confuso? Veja como ficou o arquivo:

module.exports = {
  env: {
    es6: true,
    node: true,
  },
  extends: ['airbnb-base', 'prettier'],
  plugins: ['prettier'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': 'error',
    'class-methods-use-this': 'off',
    'no-param-reassign': 'off',
    camelcase: 'off',
    'no-unused-vars': ['error', { argsIgnorePattern: 'next' }],
  },
};

Para que ao salvar o código seja aplicado as regras de estilo airbnb, vamos adicionar mais um arquivo na raíz do projeto chamado .prettierrc (para evitar o conflito entre o extends do "airbnb-base" e do "prettier"). Dentro do arquivo:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Dica: ao invés de acessar arquivo por arquivo e sair salvando para aplicar a style guide airbnb, basta ir ao terminal e digitar:

yarn eslint --fix src --ext .js

Essa instrução diz que todos os arquivos com extensão .js que estão no diretório src eu quero fazer o fix do eslint. Se você seguiu o passo a passo até aqui, não vai receber mensagem de erro. Agora, ao acessar os arquivos, vai perceber que foi aplicado a estilização.

Instalando e configurando editorConfig

Para finalizar essa segunda parte (veja a primeira parte aqui), e se algum integrante da equipe estiver usando um editor diferente do nosso? Vamos instalar um plugin chamado editorConfig no VS Code. Após instalado, na raíz do projeto (fora do diretório src), clicar com o botão direito do mouse, clicar em Generate .editorconfig.

Abra o arquivo gerado .editorconfig e acrescente end_of_line = lf e altere de false para true as últimas 2 regras. Veja como ficou o resultado final:

Pronto! A partir de agora seu projeto está configurado com ESLint, Prettier e editorConfig. Organização, padronização, legibilidade e separação de responsabilidades nunca é demais em projetos de desenvolvimento.

Nos vemos em breve. Abraço!