EsLint no Visual Studio Code - Tutorial Rápido!

 Para que serve?

O EsLint é uma ferramenta que nos ajuda a automatizar a padronização do nosso código. Com ele criamos regras, encontramos códigos fora do padrão e conseguimos corrigir tudo de forma rápida.

Por que usar? 

É importante seguir o mesmo padrão de código durante o projeto, muitas vezes não trabalhamos sozinhos, o que acaba variando ainda mais os estilos de código. O EsLint acaba com esse problema, pois todos vão manter o mesmo padrão e regras.

Instalando 

Acesse a pasta raiz do seu projeto, ou crie um novo projeto usando o comando

    npm init -y

Agora que temos o arquivo "pakage.json" na pasta raiz do nosso projeto.

Podemos fazer a instalação do EsLint como desenvolvimento, desta forma quando nosso projeto for para produção os arquivos do EsLint não precisam ir com ele.

    npm eslint --save-dev

Configurando

Para iniciar a configuração do EsLint precisamos estar na pasta raiz do projeto. Vamos usar um dos comandos abaixo, os dois são a mesma coisa.

    npx eslint --init
   

ou

    .\node modules\.bin\eslint --init

Caso aconteça algum erro, tente novamente usando o terminal do sistema, não o terminal do Visual Studio Code. Antes de usar o comando certifique-se de estar na pasta do projeto. Para iniciar a configuração teremos que responder algumas perguntas, você é livre para escolher as opções que mais lhe agradam. Neste tutorial vou apenas explicar as opções, mas também é possível ver as opções que escolhi.

1 – Precisamos escolher o que o EsLInt vai checar

Checar sintaxe?,

Checar sintaxe e procurar problemas? ou

Checar sintaxe, procurar problemas e forcar estilo que vamos escolher?

A última opção nos ajuda de forma mais completa.

2 – Como vamos importar/exportar nossos módulos?

Escolha JavaScript caso seu projeto use:

    const modulo = require("modulo");

    module.exports = modulo; 

Escolha CommonJS caso seu projeto use:

    import modulo from "modulo";

    export default modulo;

3 – Vamos usar algum FrameWork em nosso projeto?

Caso não esteja usando "React" ou "Vue" escolha: "None of these". 

Caso escolha um dos frameworks, serão instalados alguns módulos.

4 – Vamos usar TypeScript?

Se escolher usar "TypeScript", serão instalados alguns módulos.

5 – Onde vamos executar nosso código?

Podemos escolher as duas opções, marcando com a "barra de espaço" e depois apertando "Enter".

6 – Qual vai ser o estilo do nosso projeto?

Temos duas opções:

• Usar um estilo popular

Podemos escolher o estilo de alguns sites famosos: Airbnb, Standart, Google, XO. 

Ao escolher um dos estilos, serão instalados alguns módulos.

• Usar nosso próprio estilo

Esta opção dá liberdade para escolher vários detalhes por meio de algumas perguntas, conforme vou mostrar abaixo. 

Qual a extensão do arquivo de configuração?

O mais comum e escolher "JSON", esta opção gera o arquivo "eslintrc.json".

Qual tipo de indentação?

Indentação é afastar o texto da margem, geralmente usamos a tecla "TAB" para fazer isso, mais também podemos usar a "barra de Espaço".

Basta escolher se usaremos "Tabs" ou "Spaces". Em caso de dúvida entre no Visual Studio Code, selecione um arquivo e olhe a "barra de status". Veja qual tipo de indentação está sendo usada.

Qual tipo de aspas vamos usar?

Escolha Double: Dupla ou Single: Simples.

Qual o tipo de quebra de linha?

Unix: Padrão LF 

Windows: Padrão CRLF 

Em caso de dúvida entre no Visual Studio Code, selecione um arquivo e olhe a barra de status. Veja qual tipo de quebra de linha está sendo usada.

Vamos usar ponto e vírgula no fim de cada linha?

Por fim terminamos nossa configuração. Podemos notar o arquivo de configuração na pasta do nosso projeto. O "eslintrc.json", isso indica que deu tudo certo.

Instalando a Extensão do EsLint

Precisamos instalar a extensão do EsLint para o Visual Studio Code. Na barra lateral esquerda aperte no ícone de extensões e busque por Eslint. Instale a extensão.

Aproveite também para dar uma olhada na documentação desta extensão. La temos várias opções de configuração para usar no Visual Studio. 

Vou escolher uma configuração que corrige o código ao salvar. Dessa forma fica tudo bem prático. Segue abaixo a configuração:

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }, 

Copie o código acima.

Vamos abrir as configurações do Visual Studio: 

MAC – command + shift + p 

Windows – ctrl + shift + p 

No campo de pesquisa procuramos por: "Open User Settings (JSON)"

Ao entrar no arquivo "settings.json" devemos colar a linha que copiamos acima. Conforme o exemplo abaixo:

Salve e feche o arquivo JSON. 

Eslint Funcionando!

Os erros mostrados com o sublinhado vermelho confirmam o funcionamento do EsLint.

Para corrigir basta "salvar" o arquivo. Qualquer dúvida entre em contato.

Ver o vídeo no início do artigo também pode ajudar e dar mais detalhes sobre a instalação.

Interessante

Desabilitando

Por exemplo, achei interessante o código abaixo que serve para o EsLint não agir em um arquivo específico. Basta colar o código na primeira linha.

    /* eslint-disable */
    

Relatório de erros

O EsLint também emite um relatório de erros. Digite no terminal:

    npx eslint index.js

Altere o nome do arquivo "index.js" de acordo com o nome do arquivo a ser inspecionado.

Caso tenha algum erro, será mostrado um relatório.

Existem vários outros códigos e opções interessantes.

Consulte a documentação do EsLint para ver mais detalhes.