Qual é a diferença entre mais bonito-eslint, eslint-plugin-mais bonito e eslint-config-mais bonito?

102

Quero usar o Prettier e o ESLint juntos, mas experimentei alguns conflitos apenas por usá-los um após o outro. Vejo que existem três pacotes que parecem permitir que sejam usados ​​em conjunto:

  • prettier-eslint
  • eslint-plugin-prettier
  • eslint-config-prettier

No entanto, não tenho certeza de qual usar, pois todos esses nomes de pacote contêm eslinte prettier.

Qual devo usar?

Yangshun Tay
fonte

Respostas:

220

ESLint contém muitas regras e aqueles que são formatação relacionadas com o conflito força com mais bonito, como arrow-parens, space-before-function-paren, etc. Por isso usá-los juntos vai causar alguns problemas. As seguintes ferramentas foram criadas para usar o ESLint e o Prettier juntos.

Eu escrevi uma comparação em formato tabular em uma essência, uma vez que Stack Overflow não suporta formatação de tabela. Verifique se você prefere mais organização.

insira a descrição da imagem aqui

prettier-eslint: É executado prettiere executado eslint --fixno código. eslintgeralmente tem correções automáticas para regras relacionadas à formatação e eslint --fixserá capaz de corrigir a formatação conflitante introduzida por Prettier. Você não precisará executar o prettiercomando separadamente.

eslint-plugin-prettier: Este é um plugin ESLint, o que significa que contém a implementação de regras adicionais que o ESLint verificará. Este plug-in usa o Prettier sob o capô e levantará problemas quando o seu código for diferente da saída esperada do Prettier. Esses problemas podem ser corrigidos automaticamente via --fix. Com este plugin, você não precisa executar o prettiercomando separadamente, o comando está sendo executado como parte do plugin. Este plug-in não desativa as regras relacionadas à formatação, e você precisará desativá-las se encontrar conflitos para essas regras manualmente ou via eslint-config-prettier.

eslint-config-prettier: Esta é uma configuração ESLint e contém configurações para regras (se certas regras estão ativadas, desativadas ou configurações especiais). Esta configuração permite que você use o Prettier com outras configurações ESLint, eslint-config-airbnbpor exemplo, desligando as regras relacionadas à formatação que podem entrar em conflito com o Prettier. Com esta configuração, você não precisa usar, prettier-eslintpois o ESLint não reclamaria depois que o Prettier formatar seu código. No entanto, você precisará executar o prettiercomando separadamente.

Espero que isso resuma as diferenças.

Atualizar: É a prática recomendada deixar o Prettier lidar com a formatação e ESLint para problemas de não formatação, prettier-eslintnão é na mesma direção que essa prática, portanto, prettier-eslintnão é mais recomendado. Você pode usar eslint-plugin-prettiere eslint-config-prettierjuntos.

Yangshun Tay
fonte
Eu tenho um arquivo eslintrc no qual tenho regras personalizadas. ou seja, no-extra-semi, no entanto, a execução de eslint --fix com mais bonito requer ponto e vírgula, eu preciso de um arquivo de regras separado para mais bonito?
jasan
2
Apenas um comentário sobre a diferença geral entre plug-ins e configs eslint, porque eu senti que era o que faltava para mim: plug-ins definem novas regras eslint e configurações definidas se ou não (e como) as regras devem ser aplicadas.
laugri
2
Com eslint-config-prettier, por que precisamos correr mais bonita? Não eslint --fixformataria o código da mesma forma que faria mais bonito?
Mateo Hrastnik
14
É 2019 e esta ainda é a melhor explicação que encontro, muito melhor do que a oficial. Você pode acrescentar que o eslint mais bonito não é mais recomendado. E os 2 últimos podem trabalhar juntos agora.
Fate Riddle de
1
@YangshunTay Estou apenas curioso, quem está recomendando essa prática?
theblang