Front End

25 mai, 2018

Lynt – O linter para JS com zero configurações

Publicidade

Se eu fosse escrever um artigo sobre o ESLint — o linter mais famoso do mercado atualmente para JavaScript — provavelmente você ficaria entediado, afinal, dificilmente temos algum projeto atualmente que não o utilize. No entanto, a dica que tenho é uma ferramenta baseada no ESLint, mas que dispensa qualquer configuração para o seu funcionamento. Estou falando do Lynt.

Código organizado sem configurações

O Lynt é uma ferramenta de código aberto, disponível no GitHub por meio da licença MIT. Ela começou a ser desenvolvida recentemente e já conquistou suas primeiras 150 estrelas na plataforma. O projeto se baseia em duas filosofias:

  1. Zero configurações: Não importa se estamos usando o React, Flow ou TypeScript. Não precisamos nos preocupar em configurar grandes arquivos .rc ou gerenciar analisadores, regras específicas de ferramentas, etc. Ele simplesmente funciona.
  2. Sem regras de estilo: O Lynt não tem opinião formada quando se trata de estilo de código. Não importa se usamos ou não ponto-e-vírgula, tabulações ou espaços, vírgulas à direita, etc. Ele só lida com o lado da verificação de erros e deixa o estilo do código em ferramentas mais adequadas, como o mais prettier (que podemos tratar em um outro artigo).

Gostou da proposta do projeto? Vamos ver como utilizá-lo a seguir.

Como tudo funciona

Como já havia citado, o Lynt utiliza o ESLint e o TSLint para organizar os arquivos. Ele saberá qual linter usar, bem como quais regras / parsers / ignores, etc, serão aplicadas com base nas opções que você passar para ele. Veja um exemplo na imagem abaixo:

Neste exemplo, estamos utilizando o lint com as configurações para typescript

Para começar a usar a ferramenta, precisamos inicialmente do Node e npm instalados na máquina. Com eles em ordem, podemos utilizar o Lynt de duas formas:

Unicamente dentro de um projeto:

npm install lynt --save-dev

Ou então de modo global, apesar de não ser o jeito recomendado:

npm install lynt --global

Feito isso, basta inserir o comando dentro do package.json. Neste etapa, há várias possibilidades possíveis. Por exemplo, se eu quiser que o lint avalie todos os meus arquivos (o node_modules/ é excluído por padrão, ufa!), basta inserir:

{
 "scripts": {
   "lint": "lynt"
 }
}

Se quisermos avaliar somente os arquivos JavaScript dentro de um diretório específico, colocamos:

{
  "scripts": {
        "lint": "lynt src/**/*.js"
  }
}

Feito isso, basta executar npm run lint e a mágica acontece!

Configurações

Apesar de ser contra os princípios da ferramenta, ela nos dá a opção de inserir algumas configurações como, por exemplo, habilitar a verificação para arquivos React. Tudo isso é feito no próprio arquivo package.json, do mesmo jeito que fizemos anteriormente:

{
 "lynt": {
   "typescript": true,
   "react": true,
   "ignore": ["tests/**/*.*", "fixtures/**/*.*"]
 }
}

Através do CLI também conseguimos utilizar a ferramenta, como descreve a seguir:

Uso:
   $ lynt [files] <opcoes>

 Opções
   --typescript   Adiciona suporte ao TypeScript.
    --flow         Adiciona suporte ao FlowType.
   --react        Adiciona suporte ao React.
   --ignore       Caminhos e arquivos a serem ignorados.
   --fix          Correção automática
   --global       Adiciona suporte para uma determinada variável global.
   --env          Adiciona suporte a dado ambiente. 

 JavaScript Exemplos de uso
   $ lynt
   $ lynt --react
   $ lynt --react --flow --env jest
   $ lynt src
   $ lynt src --ignore out/**/*.* --ignore tests/**/*.*
   $ lynt src --global chrome --global atom

 TypeScript Exemplos de uso
   $ lynt --typescript
   $ lynt --typescript --react
   $ lynt --typescript --project .
   $ lynt src --typescript
   $ lynt src --typescript --ignore out/**/*.* --ignore tests/**/*.*

Com isso, você consegue executar os comandos de forma “manual” de acordo com as suas necessidades. Além disso, o Lynt também possui uma API que pode ser explorada para ser amarrada a outros serviços ou então expandida.

Conclusão

Dar o pontapé inicial em projetos com JavaScript está ficando cada vez mais fácil e isso se dá graças a ferramentas como o Lynt. Assim como o create-react-app (ainda não conhece? dá uma olhada nesse artigo) é para o React, o Lynt é para o ESLint/TSLint.

Ao invés de você perder tempo configurando uma série de coisas, a ferramenta te permite desenvolver o projeto de forma organizada até chegar a hora em que será necessário fazer outros tipos de alterações que o projeto não atende.