Quando o assunto se trata de padronizar tudo e obter o melhor desempenho de um projeto. O segredo é usar o máximo possível de ferramentas que irão corrigir erros comuns do programador e ajudar que a equipe não perca com código sujo e desnecessário.
Conforme o tempo passa e o código é escrito a possibilidade de surgir algum código que mais atrapalhe do que ajude é grande, por isso ferramentas são criadas para auxiliarem nesse trabalho.
Nas aplicações Web é possível obter isso através de 3 ferramentas:
- Eslint
- Prettier
- Babel
Mas quem são eles?
Eslint
ESLint é uma ferramenta para identificar e relatar padrões encontrados no código ECMAScript/JavaScript, com o objetivo de tornar o código mais consistente e evitar bugs.
Prettier
Prettier é uma ferramenta de formatação de código que padroniza a identação e torna o código com apenas uma personalidade, sem variações de estilos de escrita. Dessa forma ele impede, com exceção da sintaxe de código, que o código esteja sem padrões.
Babel
Babel é um leque de ferramentas responsável por construir e garantir que o código Javascript rode em qualquer navegador existente.
Eles parecem iguais? Pois não são, cada um tem um objetivo em específico com a mesma finalidade que é a padronização de código!
Começando na prática
Para inicializar você precisa ter primeiro o webpack ou ter criado uma aplicação com React para que consiga realizar a configuração.
Se você utilizou npx create react app
provavelmente terá que instalar o eslint:
yarn add eslint -D
E logo após:
yarn eslint --init
Caso a sua aplicação tenha sido criada com npx create react app
você terá um arquivo chamado .eslintrc.js
que contém as configurações do seu Eslint
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
},
};
Após isso temos que instalar novas dependências dentro da aplicação que irão tornar possível a configuração das 3 ferramentas ao mesmo tempo:
yarn add prettier eslint-config-prettier eslint-plugin-prettier babel-eslint -D
Adicione na chave extends
os valores do .eslintrc.js
:
extends: [
'airbnb',
'prettier',
'prettier/react',
],
Adicione uma nova chave parser
que irá representar o analisador sintático customizado a partir do qual nosso código será analisado.
parser: 'babel-eslint',
Adicione também o prettier na chave plugins
:
plugins: [
'react',
'prettier',
],
Configurando as regras para que todos os erros do prettier sejam mostrados pelo Eslint:
rules: {
'prettier/prettier': 'error',
},
As regras são um tópico que poderia tomar um artigo inteiro de como funcionam, pela documentação essa chave pode aceitar vários parâmetros, um exemplo seria aceitar o código jsx
em arquivos js
que ficaria dessa forma:
"react/jsx-filename-extension": ["warn", { extensions: [".js", ".jsx"] }],
Uma dica é aproveitar o VSCode e usar ao seu favor os erros que irão aparecer, dessa forma a cada necessidade basta modificar essa chave evitando os erros ou acrescentando novas regras.
Crie um arquivo chamado .prettierrc
que será responsável pela configuração do prettier:
{
"singleQuote": true,
"trailingComma": "es5"
}
Pronto! Se você for verificar o código, automaticamente o ESLint e o Prettier estão corrigindo o código para você e as regras que definimos serão modificadas automaticamente.
Ficou alguma dúvida? Manda a ver ai nos comentários.