Ola, meu nome é Gabriel Amorim e estou escrevendo esse artigo para acompanhar a segunda edição do Alura Challenges. No último artigo publicado, eu havia falado que iria tratar sobre padrão de código no projeto e hoje esse será o assunto.

Para isso utilizaremos 3 ferramentas: eslint, prettier e editorconfig. Caso você utilize o VSCode como editor de texto, recomendo instalar as seguintes extensões:

• EditorConfig for VS Code
• ESLint
• Prettier ESLint

Porque utilizar ferramentas de padronização de código?

• Força que todos os desenvolvedores do projeto utilizem o mesmo padrão, facilitando a leitura do código e ajuda na aplicação de boas práticas.
• Informa problemas no código e muitas vezes os resolvem automaticamente.

Existem inúmeras outras vantagens, mas em minha visão essas duas acima são as mais importantes.

Sem muitas delongas, vamos ao código!

Instalando e configurando as ferramentas

Começamos na raiz do projeto, instalando o eslint:

$ yarn add eslint

Logo após, precisamos iniciá-lo no projeto com o comando:

$ yarn eslint --init

Agora serão feitas várias perguntas sobre o padrão que desejado, e aqui vão as minhas respostas, sobre o que eu utilizo no meu dia a dia:

Como você gostaria de usar o ESLint? Aqui eu escolho a opção para checar a sintaxe, encontrar problemas e forçar estilo do código.

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

Que tipo de módulos o seu projeto utiliza? Basicamente ele pergunta qual a sintaxe de importação e exportação de módulos. Eu gosto de utilizar import/export.

? What type of modules does your project use? … 
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

Aqui ele pergunta qual framework o projeto faz uso e como não utilizamos nem Reack nem Vue.js, escolhemos a opção "None of these"(Nenhum desses).

? Which framework does your project use? … 
  React
  Vue.js
▸ None of these

O seu projeto usa TypeScript? Sim

? Does your project use TypeScript? ‣ No / Yes

Onde o seu código irá rodar? Como se trata de uma api, nosso código irá rodar em Node. Atentem-se ao detalhe que aqui o que faz a escolha é apertar a tecla space(espaço).

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

Como você gostaria de definir o estilo para o seu projeto? Aqui vamos escolher "Usar um guia de estilo popular".

? How would you like to define a style for your project? … 
▸ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

Qual guia de estilo você quer seguir? Escolhemos "Airbnb: https://github.com/airbnb/javascript".

? Which style guide do you want to follow? … 
▸ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

Em qual formato (extensão) você quer que o arquivo de configuração esteja? Escolhemos "JSON".

? What format do you want your config file to be in? … 
  JavaScript
  YAML
▸ JSON

Por fim, somos perguntados se queremos instalar os plugins com o npm, escolheremos a opção "Yes", e caso você esteja utilizando yarn como eu, espere a instalação terminar, apague o arquivo package-lock.json e rode o comando yarn.

? Would you like to install them now with npm? ‣ No / Yes

Com isso será gerado um arquivo .eslintrc.json com o seguinte conteúdo:

{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

Após configurado o eslint, vamos para a instalação do prettier e seus plugins do eslint (lembrando que estão em dependências de desenvolvimento pois elas não são necessárias para rodar o código):

$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Crie um arquivo chamado .prettierrc.json, com o seguinte conteúdo:

{
    "singleQuote": true,
    "trailingComma": "all",
    "arrowParens": "avoid",
    "endOfLine": "auto",
    "useTabs": false,
    "tabWidth": 4,
    "semi": true,
    "printWidth": 85
}

Para explicar o que cada um aqui significa:

• singleQuote: Utilização de aspas simples (true).
• trailingComma: Sempre utilizar vírgula ao final da linha (all).
• arrowParens: Evitar parênteses em argumentos de função de seta (arrow functions).
• endOfLine: Inserir uma linha em branco ao final do arquivo.
• useTabs: Não identar as linhas com tabs em vez de espaços (ou seja, utilizamos espaços para identação).
• tabWidth: Número de espaços por nível de identação.
• semi: Utilizar ponto e vírgula ao final das declarações.
• printWidth: Tamanho da linha para ocorrer a quebra de linha.

Para que essas configurações sejam utilizadas, precisamos utilizar algumas opções no .eslintrc.json:

{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
}

Com isso falta apenas configurar o editorconfig. Caso você tenha instalado a extensão no VSCode é possível clicar com o botão direito do mouse na raiz do projeto e selecionar a opção "Generate .editorconfig". Mas é possível criar esse arquivo manualmente, basta criá-lo com o nome .editorconfig. Ele será gerado com essas configurações:

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

Vamos mudar apenas algumas configurações e deixá-lo assim:

root = true

[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Com isso terminamos a configuração do estilo de código, novas configurações podem precisar de serem adicionadas ao longo do desenvolvimento da aplicação então recomendo dar uma lida na documentação do eslint que pode ajudar bastante. Muito obrigado pela leitura até aqui, nos vemos no próximo artigo!