0

Configurando Eslint + Prettier com React JS

#React Native #ReactJS #Node.js
Hallef Lima
Hallef Lima

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!

0
12

Comentários (1)

Ignorance is the Blessed, but knowledge is power!

Brasil