AluraFlix - Configurando padrão do código
Tags: node, typescript, eslint, prettier
Published: 2021-08-03 18:04:36

Ola, meu nome é Gabriel Amorim e estou escrevendo esse artigo para acompanhar a segunda edição do Alura Challenges. No  [último artigo](https://dev.to/gabrielamorim1/aluraflix-estruturando-o-projeto-i6c) 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](https://code.visualstudio.com/) como editor de texto, recomendo instalar as seguintes extensões:
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier ESLint
](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-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:
```bash
$ yarn add eslint
```

Logo após, precisamos iniciá-lo no projeto com o comando:
```bash
$ 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.
```bash
? 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.
```bash
? 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).
```bash
? Which framework does your project use? … 
  React
  Vue.js
▸ None of these
```

O seu projeto usa TypeScript? Sim
```bash
? 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). 
```bash
? 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".
```bash
? 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".
```bash
? 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".
```bash
? 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`.
```bash
? Would you like to install them now with npm? ‣ No / Yes
```

Com isso será gerado um arquivo `.eslintrc.json` com o seguinte conteúdo:
```JSON
{
    "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):
```bash
$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
```

Crie um arquivo chamado `.prettierrc.json`, com o seguinte conteúdo:
```JSON
{
    "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`:
```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](https://eslint.org/) que pode ajudar bastante. Muito obrigado pela leitura até aqui, nos vemos no próximo artigo!