Configurando Eslint + Prettier com React JS

02/09/2021 12:16

Hallef Lima

Hallef Lima

Brasil

Ignorance is the Blessed, but knowledge is power!

Configurando Eslint + Prettier com React JS
  • #React Native
  • #ReactJS
  • #Node.js

Olá pessoas!

Possivelmente se você está iniciando em desenvolvimento Front End com ReactJS e utiliza VS Code.

Em algum momento vamos precisar de uma ferramenta de lint para nós auxiliar identificando possíveis erros em nosso código.

Nesse breve artigo vou elucidar uma forma pratica e rápida de configurar o Eslint (lint utilizado no JavaScript) acoplado ao Prettier (Formatador de código).

Como dito anteriormente o Eslint tem a função de identificar possíveis erros e deixa-los viseis e utilizado juntamente com o Prettier e a junção perfeita pois o Prettier corrige o erro.

Requisitos!

  • IDE VSCode
  • Node js
  • Prettier (plugin do VSCode)
  • Eslint (plugin do VSCode)

Também existe a necessidade de instalar os mesmos plugins como pacotes no seu projeto e também os pacotes adicionais que funcionam como conectores entre o Eslint e Prettier.

yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier babel-eslint

Após a criação do seu projeto React e com o Node JS instalado e também os dois plugins citados e necessário iniciar o nosso Eslint via linha de comando no nosso projeto.

Passo 1

yarn run eslint --init

Passo 2

No questionário que ele irá solicitar escolha a opção as opções a seguir.

2.1 Define que o Eslint ira checar a sintaxe do JS e também procurar problemas.

Check syntax and find problems

2.2 Selecione React que e nosso foco atual e também o framework utilizado na ocasião.

React

2.3 Está nós perguntando se utilizamos TypeScript em nosso projeto, caso seja utilizado marque. Nesse caso marquei "não".

Does your project use TypeScript ? "No"

2.4 Nós pergunta onde vamos executar nosso código, e nesse caso será em no navegador pois e um projeto React.

Where does you code run ? "Browser"

2.5 E perguntando qual a extensão preferimos em nosso arquivo de configuração do Eslint e marquei Json.

What Format do you config file to be in ? "Json"

2.6 Por ultimo o cli do Eslint pergunta se queremos que a execução seja feita utilizando o NPM (gerenciador de pacotes do Node JS). Marquei sim

Would you like to install them now with npm "Yes"

Agora com nosso Eslint já iniciado em nosso projeto precisamos configurar o nosso arquivo de configuração gerado na pasta raiz do projeto.

Procure pelo arquivo na pasta raiz com nome

.eslintrc.json

O arquivo de configuração tem a função de definir parâmetros para checagem da sintaxe ou ate ignorar formas ou escrita da sintaxe de forma diferente. Com isso vamos alterar o arquivo para a seguinte estrutura.

{
    "env": {
      "browser": true,
      "es2021": true
    },
    "extends": ["plugin:prettier/recommended"],
    "parser": "babel-eslint",
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": ["error", { "endOfLine": "auto" }],
      "arrow-body-style": "off",
      "prefer-arrow-callback": "off"
    }
  }

Com isso temos todo Eslint configurado para que faça somente a checagem da sintaxe do código e procure problemas somente.

Agora vamos fazer a configuração nosso Prettier que anteriormente foi devidamente instalado.

Na pasta raiz do nosso projeto, vamos criar um arquivo com nome:

.prettierrc.json

Tal arquivo ficará a cargo de armazenar as configurações do Prettier e algumas regras para correção automática do nosso código.

Dentro do arquivo vamos criar a seguinte estrutura em formato de um objeto JSON.

}
  "singleQuote":true,
  "jsxSingleQuote": true,
  "trailingComma":"es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}
  

Pronto agora nosso código vai ser formatado com um simples CTRL + S para salvar.

Considerações!

Antes de executar todo o processo citado acima por favor verificar as configurações do seu VS Code e procurar a opção Format on Save deixar a mesma ativada para que o Prettier + Eslint consigam funcionar.

Obrigado por ler, e lembre se sempre.

Knowledge is power!

Faça parte da nossa comunidade!

Domine as tecnologias utilizadas pelas empresas mais inovadoras do mundo e encare seu novo desafio profissional, evoluindo em comunidade com os melhores experts.

2

Certificado

Artigo relacionado

Comentários

    Nenhum comentário