Ferramentas Javascript em ação

Reda Salmi

Programador React

Descubra algumas ferramentas de recuperação JavaScript para elevar o nível do seu jogo de programação. Saiba mais sobre o ESLint, o Prettier e o Husky!

É fantástico ver onde Javascript é hoje em dia e o quanto evoluiu desdeES2015, os dias de var e $(.submitBtn) estão muito longe nós. Como o javascript continua
evoluindo, as ferramentas (formatador, linter, bundler) em torno dele continuam a melhorar, vamos ver neste artigo como ESLint (linter), Mais bonita (formatador) e Husky (Git hooks) podem melhorar a experiência do programador e ter um grande impacto na sua aplicação. Para o propósito deste artigo, vamos usar um React mas lembre-se de que estas ferramentas podem ser utilizadas com qualquer aplicação Javascript/Node. Vamos começar por gerar um React projeto utilizando vite com estes passos:

npm create vite@latest
Nome do projeto: js-tools
Selecionar uma estrutura: react
Selecionar uma variante: react
cd js-tools
npm install

ESLint para qualidade de código

ESLint é uma ferramenta que o ajuda a encontrar e resolver problemas no seu JavaScript código. Para o adicionar ao nosso
app vamos seguir estes passos:

cd js-tools
npm init @eslint/config
# precisaremos de responder a estas perguntas para inicializar a configuração
Como você gostaria de usar o ESLint? Para verificar a sintaxe e encontrar problemas
Que tipo de módulos o seu projeto utiliza? JavaScript módulos (importação/exportação)
Que estrutura utiliza o seu projeto? React
O seu projeto utiliza TypeScript? Não
Onde é que o seu código é executado? Navegador
Em que formato pretende que o seu ficheiro de configuração esteja? Javascript
Gostaria de os instalar agora? Sim
Que gestor de pacotes pretende utilizar? npm
# vamos instalar plugins adicionais
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Isto irá criar um .eslintrc.cjs que contém o nosso ficheiro ESLint na raiz da nossa aplicação, vamos
atualizar o ficheiro de configuração com os nossos plugins instalados e adicionar um regra:

erro constante = 2;

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  regras: {
    'no-unused-vars': error,
  },
  configurações: {
    react: {
      versão: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Estamos a utilizar as definições recomendadas para cada plugin e fizemos a sem variáveis não utilizadas lançar um erro, um passo adicional é adicionar um fiapos comando para o nosso package.json como se segue:

{
  ...,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "pré-visualização": "vite preview",
        "lint": "eslint --ext js,jsx ."
    },
  ...
}

Agora que o nosso Configuração do ESLint está pronto, vamos atualizar a nossa aplicação para fazer alguns testes e ver
como funciona. A primeira coisa a fazer é atualizar o App.jsx dentro do ficheiro src este componente contém uma imagem, um leitor de vídeo básico e um botão que alterna o leitor de vídeo
estados de reprodução/pausa quando clicado:

importar { useEffect, useRef, useState } de 'react';

exportar função predefinida () {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const heading = 'Olá ESLint + Prettier + Husky';

  useEffect(() =&gt; {
    se (!isPlaying) {
      videoRef.current.play();
    } else {
      videoRef.current.pause();
    }
  }, []);

  const togglePlay = () =&gt; setIsPlaying(!isPlaying);

  retornar (
    <div>
      <button type="button" onclick="{togglePlay}">
        {isPlaying ? 'Pausa' : 'Reproduzir'}
      </button>

      <div>
        <video
          loop
 playsinline
 ref="{videoRef}"          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        />
      </div>

      <div>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
      </div>
    </div>
  );
}

importar { useEffect, useRef, useState } de 'react';

exportar função predefinida () {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Olá ESLint + Prettier + Husky';

useEffect(() =&gt; {
se (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, []);

const togglePlay = () =&gt; setIsPlaying(!isPlaying);

retornar (

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
  </div>
</div>
);
}

Vamos tentar ver o que é que a execução do fiapos O comando informará sobre o nosso App.jsx código:

Temos 4 erros, óptimos ou não tão óptimos, devo dizer, acabámos de detetar vários tipos de erros, alguns relacionados com o React, outros com o a11y e um devido à regra que adicionámos para proibir variáveis não utilizadas. O que é ótimo no ESLint é que ele detecta os erros por nós e dá-nos uma indicação da solução e todas as regras estão muito bem documentadas. Portanto, para corrigir o nosso código, precisamos de:

- Dar um nome ao nosso componente

- Utilizar a variável `heading` ou simplesmente eliminá-la se for inútil

- Adicionar uma etiqueta `track` para legendas no leitor de vídeo

- Adicionar um atributo `alt` com um texto significativo ao elemento de imagem

Depois de aplicar essas correções executando o comando `lint`, não recebemos nenhum erro, nosso código corrigido é o seguinte:

  importar { useEffect, useRef, useState } de 'react';

exportar função predefinida App() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Olá ESLint + Prettier + Husky';

useEffect(() =&gt; {
se (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

const togglePlay = () =&gt; setIsPlaying(!isPlaying);

retornar (

{heading}

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    >
      <track kind="captions" src="flower-en.vtt" srclang="en" />
    </video>
  </div>

  <div>
    <img
      alt="Fatia de toranja em cima de uma pilha de outras fatias"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

É um pouco aborrecido ter de utilizar o botão fiapos antes de cada commit e podemos esquecer-nos de o fazer, pelo que a criação de um git hook pode ser útil para automatizar esta tarefa e resolver este problema e é disso que vamos falar no Husky secção.

Mais bonito para a formatação do código

Mais bonita é um formatador de código opinativo que suporta muitas linguagens e se integra com muitos editores de código. Vamos adicionar o prettier à nossa aplicação:

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

Precisamos de criar dois ficheiros na raiz da nossa aplicação, um .prettierignore para ignorar ficheiros ou pastas que não queremos formatar:

node_modules/
dist/
public/

E um .prettierrc.json que conterá nossa configuração mais bonita:

{
"arrowParens": "sempre",
"bracketSameLine": falso,
"bracketSpacing": verdadeiro,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": falso,
"jsxSingleQuote": falso,
"printWidth": 80,
"proseWrap": "always",
"quoteProps": "as-needed",
"requirePragma": falso,
"semi": true,
"singleQuote": verdadeiro,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": true
}

A configuração do Prettier é personalizável, pode brincar com o parque de diversões do Prettier para encontrar as definições que mais lhe convêm. Um passo adicional para fazer o prettier funcionar bem com ESLint é instalar um plugin ESLint adicional:

npm i --save-dev eslint-config-prettier

Também precisamos de atualizar o ficheiro .eslintrc.cjs acrescentando mais bonito para o estende-se precisamos de ter a certeza de que o colocamos na matriz último para se sobrepor a outras configurações:

erro constante = 2;

module.exports = {
...,
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
'plugin:jsx-a11y/recommended',
'prettier',
],
...

Executar o prettier é fácil e direto, uma maneira é executar o comando npx prettier --write . que irá formatar todo o código da sua aplicação, uma segunda forma é usá-lo a partir do seu editor, isto irá obter o máximo do Prettier, quer através de um atalho de teclado ou automaticamente sempre que guardar um ficheiro. Quando uma linha se torna tão longa durante a codificação que não cabe no ecrã, basta premir uma tecla e ver a linha ser magicamente dividida em várias linhas! Ou quando cola algum código e a indentação fica toda baralhada, deixe que o Prettier a corrija por si sem sair do seu editor.

Mas ainda assim, e se um dos programadores utilizar um editor que não suporta o prettier e se esquecer de utilizar o mais bonito existe uma forma de resolver este problema e é esse o tema do Husky secção abaixo.

Husky para ganchos Git

Husky ajuda-o a configurar os hooks do git para fazer lint das suas mensagens de commit, executar testes, fazer lint do código, etc... quando faz commit ou push. Vamos usá-lo juntamente com o lint-staged para automatizar o linting e a formatação do código antes de fazer o commit do código.

npx husky-init && npm install
npm i --save-dev lint-staged

Isto irá criar um .husky com uma pasta pré-compromisso ficheiro. O próximo passo é atualizar o ficheiro package.json ficheiro para configurar lint-escalonado e diga-lhe para formatar qualquer ficheiro alterado no commit atual:

{
...,
"scripts": {
"dev": "vite",
"build": "vite build",
"pré-visualização": "vite preview",
"lint": "eslint --ext js,jsx .",
"prepare": "husky install"
},
"lint-staged": {
"**/*.+(js|jsx|json|css)": "prettier --write --ignore-unknown"
},
...
}

O último passo é atualizar o pré-compromisso para configurar nosso gancho para executar o fiapos em todas as aplicações e formatar os ficheiros alterados com o comando lint-escalonado comando:

!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm run lint
npx lint-staged
```

Vamos fazer algumas refacções na nossa aplicação para ver como tudo isto funciona, vamos criar um componente VideoPlayer.jsx e usá-lo em App.jsx:

```javascript
import { useEffect, useRef } from 'react';

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

useEffect(() => {
se (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

retornar (

);
}

import { useState } from 'react';
importar VideoPlayer de './VideoPlayer';

exportar função predefinida App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Olá ESLint + Prettier + Husky';

const togglePlay = () =&gt; setIsPlaying(!isPlaying);

return (
 
{heading}
 <div>
    <videoplayer
      isplaying="{isPlaying}"      tracksrc="flower-en.vtt"
      videosrc="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img
      alt="Fatia de toranja em cima de uma pilha de outras fatias"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Agora que estamos satisfeitos com o nosso código, vamos confirmar as nossas alterações e ver como corre.

Erros novamente, desta vez é gritante por causa da falta de validação de props e como você pode ver o nosso commit não foi bem sucedido. Vamos corrigir isso, primeiro instalando PropTypes npm i prop-types e atualizar o Leitor de vídeo componente:

import { useEffect, useRef } from 'react';
importar PropTypes de 'prop-types';

exportar função predefinida VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

useEffect(() => {
se (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

retornar (

);
}

VideoPlayer.propTypes = {
isPlaying: PropTypes.bool.isRequired,
videoSrc: PropTypes.string.isRequired,
trackSrc: PropTypes.string.isRequired,
};

Depois de corrigir esses erros, nosso commit foi bem-sucedido após a execução dos comandos de linting e formatação de código. Como pode ver, com o Husky, basicamente automatizámos o linting e a formatação com este hook pré-commit, o que evitará qualquer código indesejado na nossa base de código e resolverá problemas como incompatibilidades de editores e o esquecimento de executar esses comandos.

Resumo

ESLint, Mais bonita e Husky são excelentes ferramentas que nos ajudam a manter o nosso código. Em conjunto, proporcionam-nos uma óptima experiência de desenvolvimento e facilitam a manutenção do nosso código.

Falámos sobre linting e formatação neste artigo, mas as ferramentas disponíveis e as possibilidades são muito mais vastas. Pode configurar alguns testes para serem executados num gancho de pré-compilação ou, se utilizar Typescript, adicionar um comando de verificação de tipos com Husky para ignorar qualquer código não tipado na sua aplicação.