Dando uma cara nova para um projeto Javascript legado

Saiba como corrigir o padrão e formatação de toda a sua codebase com apenas um comando e dê adeus a projetos de JavaScript legado que você não aguenta mais indentar e ajeitar.

Introdução

Sabe aquele projeto javascript legado que você não aguenta mais ter que ajeitar a formatação porque está tudo meio torto e não tem nenhum linter para validar o padrão do código?

Nesse artigo, vamos aprender como dar uma bela ajeitada em todos os arquivos do seu projeto, tudo isso automaticamente e de uma vez só!

Contexto

Vamos supor que você tem uma aplicação React de alguns anos atrás e, naquela época, ninguém se preocupava com padrões de código, formatação, entre outros itens.

Nesse caso, vamos precisar de basicamente duas coisas: configurar o Prettier, para dar aquela ajeitada na formatação; e o ESLint, para padronizar o código e automatizar todas as correções.

ESLint e Prettier

Vamos começar instalando o ESLint. Basicamente, vamos rodar o comando abaixo e seguir a instalação de acordo com o seu projeto:

npx eslint --init

Agora, vamos instalar o Prettier:

yarn add --dev --exact prettier

Agora, é hora de instalar alguns plugins para conectar o prettier ao eslint:

yarn add eslint-plugin-prettier eslint-config-prettier --dev

O detalhe que realmente vai impactar, para que tudo funcione como pretendemos, é o arquivo de configuração do ESLint. Para isso, vou colocar um exemplo abaixo com os comentários sobre as partes relevantes:

{
    "env": {
        "browser": true,
        "es6": true,
        "jest": true, // adicione essa linha caso haja testes no seu projeto
        "node": true // adicione essa linha casp haja variáveis ambiente
    },
		// adicione essas settings para o eslint detectar a versão do react
    "settings": {
      "react": {
        "version": "detect"
      }
    },
    "extends": [
        "eslint:recommended",
        "plugin:prettier/recommended", // adicione essa linha para o plugin do prettier
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2020, // ajuste para suportar a versões atuais do ecmascript
        "sourceType": "module"
    },
    "plugins": ["react", "react-hooks"],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "react/prop-types": "off",
      "react/react-in-jsx-scope": "off",
      "no-irregular-whitespace": "off"
    }
}

Lembre-se de configurar também o prettier de acordo com suas preferencias:

{
  "trailingComma": "none",
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto"
}

Refatorando todos os nossos arquivos de uma vez

Agora vamos para a parte em que a mágica acontece. Se o plugin do Prettier e as configurações do ESLint estiverem corretas, vamos executar o seguinte comando abaixo e ele irá corrigir todos os arquivos do nosso projeto (no exemplo abaixo, toda nossa codebase estaria na pasta “src’) de uma única vez:

yarn eslint src --fix

Considerações finais

Dependendo da situação, pode ser que o seu ESLint fique em uma versão mais antiga por causa da versão dos seu react-scripts.

Então, fique atento, porque vários erros que podem acontecer nas verificações do ESLint podem ser devido a atualizações necessárias do seu react-scripts.

Por exemplo, no projeto onde eu apliquei esse passo a passo, tive que atualizar o pacote do react-scripts para a versão “4.0.1”, o ESLint instalou uma versão mais antiga e tive que atualizar para a versão “^7.30.0”, e tive que também alterar a versão do meu Jest para a “26.6.0”.

Então, após realizar os passos acima, certifique-se de que seus testes, sua aplicação, e tudo mais o que for necessário, esteja rodando adequadamente.

Conclusão

Espero que esse artigo tenha te ajudado. Ao menos para mim, isso poupou um grande trabalho de alterar código por código de um projeto inteirinho, e ainda deixou tudo naquele padrão lindo e organizado que só o Prettier com o ESLint deixam em nosso código.

Se você tem alguma dúvida ou sugestão, não deixe de comentar aqui embaixo. Até a próxima!