React: garantindo qualidade de código e automações de deploy

Base de qualidade local - Apresentação

Apresentando o curso e o instrutor

Olá! Seja bem-vindo a este curso de Qualidade de Código: linting, testes e pipelines CI/CD. Meu nome é Pedro Celestino de Mello.

Audiodescrição: Pedro é um homem careca, com barba e usa uma boina.

Discutindo a importância da qualidade de código

Neste curso, vamos discutir sobre qualidade de código. Vamos entender o que podemos fazer, enquanto pessoas desenvolvedoras, para garantir a qualidade mínima do projeto.

O que queremos dizer com isso? Vamos configurar um linter para identificar possíveis erros no nosso código, seja por excesso ou falta de elementos. Além disso, aprenderemos a configurar um formatador para garantir que todos os arquivos do projeto sigam a mesma estrutura de indentação, uso de ponto e vírgula, entre outros aspectos.

Integrando ferramentas e automação

Também aprenderemos a realizar ações antes de efetuar um commit, para garantir que tudo esteja correto.

Nós também vamos ver como integrar tudo isso nas GitHub Actions, e vamos executar lint, Prettier, testes de unidade e testes end-to-end. Se o teste end-to-end falhar, faremos o upload da tela no momento da falha. Vamos aprender vários conceitos importantes para garantir a qualidade e a integridade do projeto ao longo de sua vida útil.

Focando na automação e boas práticas

Vamos utilizar um projeto já pronto, sem aumentar suas funcionalidades, mas focando em garantir a qualidade e assegurar que ele siga boas práticas, mesmo sem a necessidade de revisão humana constante. Vamos explorar como automatizar esses processos e entender diversas ferramentas para alcançar esse resultado. Embora o foco seja no React, desta vez não vamos nos aprofundar tanto no React em si, mas sim nas ferramentas de automação.

Concluindo e motivando os participantes

Esperamos que estejam tão animados quanto nós, e já estamos aguardando vocês no próximo vídeo. Prometemos que não vamos a lugar algum. Vamos garantir a qualidade dos nossos projetos.

Base de qualidade local - Conhecendo o ESlint

Introduzindo o projeto CodeConnect

Vamos garantir que nosso projeto esteja de acordo com todas as métricas de qualidade. Hoje, estamos com um projeto clonado, o CodeConnect, que já desenvolvemos em cursos anteriores. Deixaremos um link para baixar a versão exatamente igual à nossa, caso desejem. Ele possui algumas funcionalidades adicionais em relação a testes de unidade e testes end-to-end. O link estará disponível na seção de preparação de ambiente para download. Trata-se de um projeto React normal, com múltiplas páginas utilizando o React Router. Nesta aula, não focaremos no desenvolvimento de telas, mas sim em garantir a qualidade do código.

Explorando o uso do ESLint

Começaremos com uma ferramenta muito conhecida no universo JavaScript, chamada ESLint. A ideia do ESLint, conforme descrito no site eslint.org, é analisar estaticamente o código em busca de problemas conhecidos. Ele nos ajuda a identificar erros antes que o código vá para produção. O ESLint já possui suporte à maioria dos editores de texto, como o VS Code, que utilizaremos aqui, além de ferramentas para integração contínua (CI/CD) e pipelines.

Demonstrando a configuração do ESLint com Vite

Antes de entrarmos no CodeConnect, vamos mostrar algo interessante. Quando criamos um aplicativo usando o Vite, que está documentado em vite.dev/guide, ele já traz uma configuração do ESLint por padrão. Vamos demonstrar isso rapidamente. Entraremos na área de trabalho e executaremos o comando:

npx create-vite@latest novo-projeto --template react

Alteraremos o nome do projeto para "novo-projeto", apenas para verificar o que vem configurado por padrão. Após a execução, verificaremos se há alguma reclamação do sistema. Caso haja, ajustaremos conforme necessário. Em seguida, entraremos no "novo-projeto" e o abriremos no VSCode:

cd novo-projeto/
code .

Não é necessário que todos façam isso, é apenas uma demonstração para mostrar o que está configurado por padrão.

Analisando o arquivo eslint.config.js

Vamos aumentar um pouco o zoom para focar no arquivo eslint.config.js. Esse arquivo já possui várias definições por padrão. Ele especifica os globalIgnores, os arquivos que queremos observar, e o que estamos estendendo. Estamos estendendo as configurações padrão recomendadas do JavaScript, react-hooks, react-refresh, entre outras opções da linguagem. Também define qual é a versão do ECMAScript que estamos usando e o que temos de global, referindo-se a variáveis globais. As opções de parser e uma configuração específica para o JSX também estão presentes.

Aqui está um exemplo de como esse arquivo pode ser configurado:

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig({
  globalIgnores: ['dist'],

  files: ['**/*.{js,jsx}'],
  extends: [
    js.configs.recommended,
    reactHooks.configs['recommended-latest'],
    reactRefresh.configs.vite,
  ],
  languageOptions: {
    ecmaVersion: 2020,
    globals: globals.browser,
    parserOptions: {
      ecmaVersion: 'latest',
      ecmaFeatures: { jsx: true },
      sourceType: 'module',
    },
  },
  rules: {
    'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
  },
});

Concluindo a configuração do ESLint

Há uma regra que diz respeito a no-unused-vars, ou seja, não queremos declarar variáveis que não são utilizadas. O Vite já traz essa configuração para nós. Podemos até fechar ou deletar essa parte, pois não vamos modificá-la agora. Apenas queríamos mostrar que ela já vem por padrão.

Agora, podemos focar no nosso projeto, que possui uma configuração ESLint idêntica, pois também foi criado utilizando o Vite. Ele já traz todas as regras que podemos definir, com uma recomendação inicial do que precisamos seguir. Se quisermos personalizar isso, podemos acessar o site da documentação em eslint.org. No get started, seremos direcionados para a documentação, que explica tudo o que podemos fazer em termos de configuração, desde as extensões que queremos observar até os plugins e regras que vamos definir.

Preparando para os próximos passos

Para saber mais e se aprofundar no poder dessa ferramenta e sua capacidade de configuração, recomendo explorar a documentação. No vídeo, vamos focar em entender o que temos no projeto atualmente.

O que devemos lembrar dessa discussão é que, ao criar uma aplicação com o Vite, ele já nos fornece uma configuração padrão. Vamos trabalhar a partir dessa configuração para entender o que precisamos fazer. Com tudo isso configurado e discutido, estamos prontos para começar a trabalhar no terminal e rodar alguns testes.

Estou aguardando vocês no próximo vídeo. Até lá!

Base de qualidade local - Configurando o prettier

Explorando a ferramenta Prettier

Agora, seguindo nossa sequência, vamos explorar a ferramenta Prettier. Basicamente, o Prettier é uma ferramenta que torna nosso código mais organizado e elegante. A ideia principal do Prettier é definir um conjunto de regras relacionadas à indentação, como se será utilizado espaço ou tabulação, se serão quatro ou dois espaços, se devemos colocar ponto e vírgula, entre outras opções. Podemos definir várias regras diferentes.

A primeira ação que devemos realizar é instalar o Prettier. Já estamos na documentação em prettier.io/docs/install, e vamos copiar o comando para instalar o Prettier dentro do VSCode. Após abrir o terminal, realizamos a instalação com o seguinte comando:

npm install --save-dev --save-exact prettier

Configurando o Prettier

Com o Prettier instalado, o próximo passo é configurá-lo. Para isso, criamos um arquivo na raiz do projeto. A documentação relevante já está disponível, e o arquivo que devemos criar é o .prettierrc.

Vamos criar um novo arquivo na raiz do projeto chamado .prettierrc. Nele, salvaremos nossa configuração. Por exemplo, podemos definir que devemos usar ponto e vírgula, que a indentação será de quatro espaços, se queremos aspas simples, entre outras opções. Aqui está um exemplo de configuração básica:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Essa é uma configuração básica, mas podemos definir muitas outras opções. Não é necessário memorizar todas as regras, pois temos a documentação para consulta. Uma vez que o .prettierrc está configurado, temos uma configuração pronta para ser aplicada.

Executando o Prettier e criando scripts personalizados

Agora, precisamos executar o Prettier para verificar se tudo está correto. Podemos consultar a documentação para isso. Na seção de uso, encontramos o CLI. Existem duas formas de executar o Prettier. A primeira é utilizando o comando com a flag --write, que corrige automaticamente o que não estiver de acordo. A segunda opção é --check, que apenas valida se está correto, sem corrigir automaticamente, apenas apontando problemas.

Vamos abrir o package.json e criar dois scripts personalizados para executar o Prettier. O primeiro comando será chamado de format, relacionado ao formato do código, e o comando será:

"format": "prettier . --write",

O segundo comando será format:check, que apenas valida, utilizando:

"format:check": "prettier . --check",

Com tudo configurado, abrimos o terminal e executamos npm run format:check. O Prettier analisará todos os arquivos do projeto e indicará se há algo a corrigir. Por exemplo, ele pode encontrar problemas em 89 arquivos, o que significa que há muitas correções a serem feitas.

Processo de formatação e configuração do projeto

Para manter o projeto do curso bem organizado, vamos criar um commit. Primeiro, executamos o comando:

git add .

E, em seguida, fazemos o commit:

git commit -am 'video 1.4 - antes do format'

Estamos no vídeo 4 desta aula, e vamos adicionar um traço antes do format para manter a divisão clara. Inicialmente, configuramos o ambiente, e agora vamos solicitar ao Prettier que organize o código para nós.

Executamos o comando:

npm run format

O Prettier modificou praticamente tudo, exceto o .gitignore, organizando todos os arquivos com base na configuração padrão e mínima recomendada pelo próprio Prettier. Isso significa que não precisamos fazer ajustes manuais.

Por exemplo, ao observar um componente React, notamos que o Prettier remove quebras de linha desnecessárias e espaços em branco, além de adicionar uma linha ao final do arquivo. Ele aplica essas configurações em todos os arquivos. Após isso, podemos fazer outro commit com a mensagem:

git commit -am 'video 1.4 - arquivos formatados'

Integrando Prettier com ESLint

O Prettier padroniza o estilo do código, independentemente do estilo que definirmos. Utilizamos o arquivo .prettierrc para especificar todas as regras que desejamos seguir. Além disso, podemos criar um arquivo .prettierignore para listar os arquivos que queremos que o Prettier ignore, como arquivos .md, por exemplo:

*.md

Isso nos permite formatar o código, mas considerando uma lista de exclusão.

Outro ponto importante é evitar conflitos entre as regras do Prettier e do ESLint. Para isso, podemos integrar um plugin no nosso arquivo de configuração do ESLint. A documentação está disponível no GitHub, no repositório github.com/prettier/eslint-config-prettier. Instalamos essa dependência com o comando:

npm i -D eslint-config-prettier

Configuramos o plugin importando eslint-config-prettier. No arquivo de configuração do ESLint, aplicamos um spread das regras do Prettier dentro das regras para JS, JSX e Cypress:

import eslintConfigPrettier from 'eslint-config-prettier'
...eslintConfigPrettier.rules,

Isso garante que não haverá conflitos entre o Prettier e o ESLint, unificando as regras.

Verificando a configuração final

Podemos verificar se tudo está correto executando npm run lint no terminal, para garantir que não há erros, e npm run format:check para confirmar que tudo está conforme o esperado.

O ponto principal é que o Prettier é uma ferramenta que nos permite executar comandos para aplicar correções automáticas, evitando ajustes manuais, e validar se tudo está correto. O coração do Prettier são as regras que escolhemos seguir, garantindo que tanto a lintagem quanto a formatação do código estejam alinhadas com o nosso projeto.

Sobre o curso React: garantindo qualidade de código e automações de deploy

O curso React: garantindo qualidade de código e automações de deploy possui 100 minutos de vídeos, em um total de 35 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Base de qualidade local
• Testes e cobertura
• Rotina segura no Git
• Automação no GitHub
• Qualidade contínua e visibilidade