DEV Community

Gabriel Amorim
Gabriel Amorim

Posted on

AluraFlix - Configurando padrão do código

#node #typescript #eslint #prettier

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:

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
Enter fullscreen mode Exit fullscreen mode

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

$ yarn eslint --init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

O seu projeto usa TypeScript? Sim

? Does your project use TypeScript? ‣ No / Yes
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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": {
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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"
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

Read next

trekhleb profile image

An exploration of how X's home timeline API is designed

Oleksii Trekhleb -

riz007 profile image

6 Common Data Structures in Programming

Rizwanul Islam Rudra -

morewings profile image

Let's create Data Table. Part 4: Column pinning

Dima Vyshniakov -

joodi profile image

Learn Zustand Right Now in the Simplest Way!

Joodi -