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-eslinteslint-plugin-prettier eslint-config-prettierNo entanto, não tenho certeza de qual usar, pois todos esses nomes de pacote contêm eslinte prettier.
Qual devo usar?
Respostas:
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.
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.
eslint-config-prettier, por que precisamos correr mais bonita? Não eslint --fixformataria o código da mesma forma que faria mais bonito?