1. O que são e quais suas diferenças?

1.1 Prettier:

É um formatador de código opinativo, com suporte a várias linguagens/frameworks, como:

• JavaScript
• Angular
• Vue
• TypeScript
• CSS/SCSS
• HTML, etc.

Ele remove a estilização original do código, padronizando-o e garantindo a consistência de estilo do arquivo.

Por exemplo, em uma função de teste na qual recebemos diversos atributos:

function funcaoTeste (id: number, nome: string, sobrenome: string, data: string, cidade: string, endereco: string, cep: string, cpf: string ) {  
	// ...
}

Ao utilizar o Prettier como formatador, temos o seguinte resultado:

function funcaoTeste(
	id: number,
	nome: string,
	sobrenome: string,
	data: string,
	cidade: string,
	endereco: string,
	cep: string,
	cpf: string,
) {
	// ...
}

Ou seja, ele reorganiza o código levando em consideração o tamanho da linha, para que fique mais legível e organizado, quebrando linhas sempre que necessário.

1.2 ESLint

É uma ferramenta para identificar e reportar problemas em códigos JavaScript e TypeScript, com o objetivo de manter a consistência e evitar bugs. Por padrão, ela fornece um conjunto de regras configuráveis que definem como o código deve ser escrito e verifica se ele está de acordo com essas regras.

Um exemplo: na imagem abaixo, há alguns erros gerados propositalmente para que o ESLint nos alertasse sobre eles.

Na respectiva ordem, de cima para baixo, estão os erros: