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.
