Onde começa o trabalho de um formatter e onde começa o trabalho de um linter?

Recentemente me peguei fazendo essa pergunta do título...

O que consolidei foi: linters são responsáveis por garantir a qualidade do código, enquanto formatters lidam com regras de estilo. Estaria essa afirmação correta?

Vou compartilhar abaixo um pouco da minha perspectiva:

O que é o Formatter?

Quando falamos de "regras de estilo" de um formatter, estamos falando sobre como o código vai se apresentar. Por exemplo, você pode configurar seu formatter (no nosso caso, o Prettier) para utilizar aspas simples (') ao invés de aspas duplas ("), ou até para não usar ponto e vírgula (;) ao final de cada linha. Até mesmo a quantidade de espaços para indentação pode ser configurada.

Por exemplo, se você configurar o Prettier para usar aspas simples, o seguinte código:

console.log("Hello world from Verse!")

assim que o comando de formatação for executado, seja através da CLI ou por uma action do seu editor, o trecho será transformado automaticamente em:

console.log('Hello world from Verse!')

Ou seja, o formatter recebe um código e o formata de acordo com as regras que você configurou. Ele "cospe" um código formatado.

Em outras palavras, o formatter faz o trabalho sem questionar, apenas executa. E é por isso que ele tende a ser mais rápido, pois segue um conjunto de regras e as aplica diretamente.

O que é o Linter?

Agora, do outro lado, temos o linter, que se preocupa com a qualidade do código. O linter é um pouco mais "esperto", porque não apenas aplica regras, mas também faz uma análise do código para garantir que ele esteja seguindo boas práticas e padrões de qualidade que foram determinados.

Por exemplo, podemos configurar o ESLint para nos alertar quando um código está utilizando uma tag <img> sem a propriedade alt:

<img src="salinas.jpg" />

O ESLint pode gerar um erro ou aviso, indicando que a tag <img> deveria ter um texto alternativo:

<img src="salinas.jpg" alt="um cara bonito!" />

O linter é bem flexível, permitindo adicionar regras customizadas e até instalar plugins que adicionam mais verificações.

Estou aberto a outras visões e contribuições. Meu objetivo é compartihar conhecimento e aprender com vocês!

Além disso criei uma PR aplicando essa abordagem no projeto, em que venho trabalhando.

Aqui está o link caso alguém também tenha interesse:

• Link da PR separando as responsabilidades: https://github.com/eoSalinas/verse/pull/38