Você sabia que🙀 ESLint pode encontrar e corrigir problemas em seu código JavaScript e melhorar a formatação.
ESLint é um linter, uma ferramenta de análise estática, para as linguagens Javascript e Typescript, sendo o mais popular do mundo, ele foi criado por Nicholas C. Zakas.
Ele padroniza uma única forma de como escrever o código👌
Elimina ou agrega ';' que podiam ser facultativos ou não.
Quebra o código para ser mais legível.
Utiliza só um padrão para aspas simples ou duplas como você desejar.
Importações, variáveis e funções que tenho e não uso também elimina.
Agora tenho um código melhor formatado e mais limpo 🚀
Para implementar en teu código é muito fácil.
Instalar a extensão ESlint no Visual Studio Code
Passo 1:
Clique no icone de extensão
Passo 2:
Digite ESlint e pressioar ENTER no teclado
Passo 3:
Clique no icone de ESlint
Passo 4:
Clique em Instalar
Instalar a dependência em teu projeto - React
Passo 1:
Clique em Terminal
Passo 2:
Clique em Novo Terminal
Passo 3:
Digite no terminal este comando:
npm i eslint -D
pressioar ENTER no teclado
Para iniciar a instalação como dependência de desenvolvimento.
Passo 4:
Digite no terminal
npx eslint src --ext .ts,.tsx
pressioar ENTER no teclado (para encontrar os erros).
Aguarde, logo apresenta-se os erros.
Passo 5:
Digite no terminal
npx eslint src --ext .ts,.tsx --fix
pressioar ENTER no teclado (para corrigir ou fixar os erros).
Passo 6:
Execute novamente, para ver se todos os erros saíram do código
npx eslint src --ext .ts,.tsx
Agora um código formatado e mais limpo 😉 com já tinha falado.
Dica: Em caso dos erros permanecerem, abre o arquivo com erro, clica em qualquer lugar do código e pressiona (ctrl +s) para guardar, automaticamente ESLint faz a mudança.
👀
Para evitar escrever sempre o comando npm eslint src --ext .ts,.tsx, podes agregar-o como um script e rodar o script, será muito mais fácil (ademais de evitar erro ao escrever, poupa tempo).
Te ensino como -->
Criar um script no projeto
Passo 1:
Clique no arquivo package.json
Passo 2:
Vamos até definição dos scripts
Passo 3:
Define um nome para teu novo script, eu vou usar lint.
Ecreve "lint" em aspas duplas, coloca dois pontos : e em aspas duplas coloca o código "eslint src --ext .ts,.tsx" sem o npm
Assim:
"lint": "eslint src --ext .ts,.tsx"
Lembrar separar teu novo script do anterior com virgula "," para evitar erro no código.
Passo 4:
Ctrl +S para guardar.
Passo 5:
Agora executa o script no terminal, em lugar de todo o código anterior.
Digite só:
npm run lint
ou
npm run lint --fix
By DevRel <
Qualquer duvida ou pergunta pode deixar aqui :)
Documentação https://eslint.org/
