DEV Community

Eduardo Henrique Gris
Eduardo Henrique Gris

Posted on

2

Setup Eslint + Prettier para padronização de código em React

Introdução

Durante o processo de desenvolvimento, torna-se importante a definição de um padrão de projeto visando legibilidade, manutenção e aumento da qualidade de código. Para isso, esse artigo vai trazer duas libs que em conjunto permitem verificar o código na busca/solução de problemas e a formatação dele, dada as regras definidas.

Libs

  • prettier: é a lib responsável pela formatação de código
  • eslint: é a lib que vai analisar o código visando a busca e solução de problemas

Setup

Para adicionar o prettier:

yarn add prettier --dev

Para adicionar o eslint:

yarn add eslint@8.57.0 eslint-config-prettier --dev

  • eslint@8.57.0: vai adicionar a versão 8.57.0 (a mais recente abaixo da 9), dado a alguns problemas relacionados com o plugin de react a partir da versão 9, que estão sendo analisados
  • eslint-config-prettier: vai desativar as regras do eslint que conflitam com o prettier

Para adicionar os plugins do eslint:

yarn add eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks --dev

  • eslint-plugin-prettier: vai permitir rodar o prettier em conjunto com o eslint
  • eslint-plugin-react: vai trazer as regras de linting específicas para aplicações React
  • eslint-plugin-react-hooks: vai trazer as regras de linting para hooks em React

Para permitir executar o eslint para aplicação React que tem o Babel como compilador:

yarn add @babel/eslint-parser --dev

Após a instalação das libs, adicionar na raiz do projeto o arquivo .eslintrc.json para configurar a execução do eslint. Ele vai ser incrementado aos poucos a medida que vão sendo explicadas as configurações:

env

Traz variáveis globais predefinidas.

  • "browser": true: referentes ao browser
  • "node": true: referentes ao Node.js
  • "jest": true: referentes ao Jest


{
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
}


Enter fullscreen mode Exit fullscreen mode

Por exemplo, se tenho uma app que usa Jest para os testes e não defino a env "jest": true, ao executar o eslint vai ser levantados erros do tipo: describe, it, expect não estão definidos.
Quando coloco a env "jest": true, ao executar o eslint ele já saberá que são termos usados nos testes e não vai levantar erros por causa deles.

extends

Traz configurações adicionais para o eslint.

  • eslint:recommended: traz regras recomendadas do eslint
  • plugin:react/recommended: traz regras recomendadas para react (é possível usar devido a adição do plugin eslint-plugin-react)
  • plugin:react-hooks/recommended: traz regras recomendadas para hooks em React (é possível usar devido a adição do plugin eslint-plugin-react-hooks)
  • prettier: remove as regras do eslint que podem conflitar com o prettier (é possível usar devido a adição da lib eslint-config-prettier)


{
  //...
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
}


Enter fullscreen mode Exit fullscreen mode

parser

  • @babel/eslint-parser: permite executar o eslint para aplicações que usam o babel como compilador


{
  //...
  "parser": "@babel/eslint-parser",
}


Enter fullscreen mode Exit fullscreen mode

parserOptions

  • ecmaVersion: especifica a ECMAScript syntax usada (latest corresponde a mais recente versão suportada)
  • sourceType: especifica se a aplicação está usando ESM: module ou se está usando CommonJS: script
  • ecmaFeatures - "jsx": true: especifica se inclui syntax jsx


{
  //...
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
}


Enter fullscreen mode Exit fullscreen mode

plugins

Permite adicionar plugins para extender o eslint, que podem adicionar regras de validação, configurações, envs.

  • prettier: plugin do prettier
  • react: plugin do React
  • react-hooks: plugin de hooks em React


{
  //...
  "plugins": [
    "prettier",
    "react",
    "react-hooks"
  ],
}


Enter fullscreen mode Exit fullscreen mode

settings

  • react - "version": "detect": detecta automaticamente a versão do React da aplicação


{
  //...
  "settings": {
    "react": {
      "version": "detect"
    }
  },
}


Enter fullscreen mode Exit fullscreen mode

ignorePatterns

Arquivos que serão ignorados quando rodar o eslint.

  • *.stories.tsx: foi colocado no artigo somente como exemplo, nesse caso o eslint não iria olhar os arquivos que terminam com .stories.tsx


{
  //...
  "ignorePatterns": ["*.stories.tsx"],
}


Enter fullscreen mode Exit fullscreen mode

rules

Permite adicionar as regras do prettier para serem executadas em conjunto com o eslint:



{
  //...
  "rules": {
    "prettier/prettier": ["error"]
  }
}


Enter fullscreen mode Exit fullscreen mode
  • prettier/prettier: adiciona as regras do prettier quando for executado o eslint
  • error: define que caso alguma regra do prettier não seja satisfeita, retorne erro. Além de error, é possível passar warn que levantaria um warning se alguma regra não fosse satisfeita. Ou off para desativar as regras

Permite customizar as regras do eslint:



{
  //...
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": ["error"]
  }
}


Enter fullscreen mode Exit fullscreen mode

"react/jsx-uses-react": "off" e "react/react-in-jsx-scope": "off": desativa no eslint a regra que retorna erro se não é colocado o import React from 'react' nos arquivos. Bom para versões de React 17 para frente que não tem essa necessidade

Permite customizar as regras do prettier:



{
  //...
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true
      }
    ]
  }
}


Enter fullscreen mode Exit fullscreen mode

singleQuote: define como regra de formatação as strings terem aspas simples

Após finalizar a definição do arquivo de configuração, adicionar em package.json os scripts:



"scripts": {
  //...
  "lint": "eslint .",
  "lint-files": "eslint",
  "lint-fix": "eslint . --fix",
  "lint-fix-files": "eslint --fix",
},


Enter fullscreen mode Exit fullscreen mode

Por default seguindo essa configuração, o eslint vai olhar os arquivos .js. Para verificar outros tipos de arquivos é nos scripts acima adicionar depois de eslint --ext=js,{outro_tipo_de_arquivo}

  • eslint .: ao rodar yarn lint vai verificar em todos os arquivos se estão de acordo com as regras do eslint e prettier
  • eslint: ao rodar yarn lint-files {nome_do_arquivo ou nome_da_pasta} vai verificar o arquivo passado ou todos os arquivos da pasta passada, se estão de acordo com as regras do eslint e prettier
  • eslint . --fix: ao rodar yarn lint-fix vai formatar e corrigir o código seguindo as regras do eslint e prettier
  • eslint --fix: ao rodar yarn lint-fix-files {nome_do_arquivo ou nome_da_pasta} vai formatar e corrigir o código seguindo as regras do eslint e prettier, para o arquivo ou todos os arquivos da pasta passada

Sugestão: caso sempre é executado para uma pasta específica (por exemplo src), para facilitar pode trocar os . dos scripts para src.

Exemplo

Vamos partir do arquivo de configuração completo definido acima:



{
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "prettier",
    "react",
    "react-hooks"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "ignorePatterns": ["*.stories.tsx"],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true
      }
    ]
  }
}


Enter fullscreen mode Exit fullscreen mode

Arquivo de exemplo:



import Component from "./Component";

const Example = () =>   <p>Eslint article</p>;

export default Example;


Enter fullscreen mode Exit fullscreen mode

Ao executar yarn lint-files para esse arquivo:

Image description

Ele retorna 3 erros, 2 do prettier e 1 do eslint, informando que dois são corrigidos pelo --fix:

  • Primeiro erro: referente a regra do eslint que retorna erro para variável declarada mas não usada no código
  • Segundo erro: referente a regra customizada definida para usar aspas simples no prettier
  • Terceiro erro: referente a regra do prettier de espaçamento

Ao executar yarn lint-fix-files para esse arquivo:

Image description

Ele corrige dois dos erros que tinha levantado, e continua avisando do que não era auto corrigível. Ficando o arquivo dessa forma:



import Component from './Component';

const Example = () => <p>Eslint article</p>;

export default Example;


Enter fullscreen mode Exit fullscreen mode

Removendo o import que não é utilizado, não terá mais erros aparecendo na execução do eslint.

Conclusão

A ideia foi trazer as libs necessárias para configuração do eslint com o prettier, focando em como executar eles em conjunto e mostrar onde é possível customizar as regras referentes a ambos. Tentei trazer de forma geral o que representa os elementos do arquivo de config, dependendo da app pode ser que não seja necessário a adição de todos os elementos mostrados acima ou uma pequena alteração em um deles, segue a doc referente a versão 8.57.0 do eslint. No próximo artigo vou focar em trazer regras que são interessantes se customizar tanto para o prettier quanto ao eslint.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay