DEV Community: Gabriel Amorim

AluraFlix - Configurando padrão do código

Gabriel Amorim — Tue, 03 Aug 2021 18:04:36 +0000

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

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!

AluraFlix - Estruturando o projeto

Gabriel Amorim — Wed, 28 Jul 2021 22:31:27 +0000

Olá, meu nome é Gabriel Amorim e estou escrevendo esse artigo para acompanhar a segunda edição do Alura Challenges. Dessa vez a edição está sendo voltada para o back-end. Trata-se da construção de uma API para a consulta de vídeos. Irei postar os artigos conforme a realização dos desafios, e o post de hoje é voltado para a criação e estruturação inicial do projeto.

O desafio deixou livre as escolhas referentes a linguagem e tecnologias. Portanto decidi utilizar Node.js e TypeScript.

Sem muitas delongas, vamos ao código!

Iniciando o projeto

Vamos começar criando a pasta do projeto pelo terminal:

$ mkdir alura-flix

Entre na pasta criada:

$ cd alura-flix

Inicie o projeto com o comando:

$ yarn init -y

Isso criará o arquivo package.json que é o ponto de partida de qualquer projeto em NodeJS. Ele é responsável por descrever o seu projeto, informar as engines (versão do node e do npm), url do repositório, versão do projeto, dependências de produção e de desenvolvimento dentre outras coisas.

Para saber mais sobre o package.json acesse: https://gabrieluizramos.com.br/entendendo-o-package-json

O próximo passo é instalar o express:

$ yarn add express

Express.js é um micro-framework para aplicações web para Node.js, lançado como software livre e de código aberto sob a Licença MIT. É feito para otimizar a construção de aplicações web e API's. É um dos mais populares frameworks para servidores em Node.js.

Criar pasta na raiz chamada "src" que irá conter os arquivos do projeto.

Criar o arquivo server.ts que irá definir a porta que será escutada. O básico é:

import express from 'express';

const app = express();

app.listen(3333, () => console.log("Server is running"));

Qualquer arquivo pode ser executado pelo terminal utilizado o comando:

$ node nome_do_arquivo.js

Porém como o node não entende a sintaxe de import é necessário haver um tradutor para converter typescript em javascript, para isso é necessário instalar o typescript:

$ yarn add typescript -D

E agora inicializamos o typescript dentro da aplicação:

$ yarn tsc --init

Será criado um arquivo tsconfig.json e nele será possível configurar o typescript de acordo com a sua necessidade.

Agora é necessário instalar o ts-node-dev que irá traduzir o typescript para javascript:

$ yarn add ts-node-dev -D

Agora adicionamos um script no package.json:

"scripts": {
    "dev": "ts-node-dev src/server.ts"
},

Isso faz com que ao rodar o comando $ yarn dev o ts-node-dev execute o nosso arquivo server.ts já o traduzindo para javascript.

Caso haja alguma aplicação rodando em node é só utilizar o comando:

$ pkill node

No script em que falei anteriormente, é possível passar algumas configurações como o --transpile-only para não fazer a checagem de tipagem já que o próprio VSCode vai acusar o erro. O --respawn serve para que o ts-node-dev fique observando alterações do código, para fazer o recarregamento automático da aplicação. A próxima flag é o --ignore-watch node_modules fazendo com que a pasta node_modules seja ignorada. Ao final o script ficará assim:

"scripts": {
    "dev": "ts-node-dev --transpile-only --respawn --ignore-watch node_modules src/server.ts"
},

Com isso temos a estrutura inicial do nosso projeto. Nos próximos posts mostrarei como configurar o eslint e o prettier para manter um estilo de código, como configurar o typeorm e mongodb na nossa aplicação. Te vejo em breve! Obrigado pela leitura até aqui.