¿Cuál es la diferencia entre prettier-eslint, eslint-plugin-prettier y eslint-config-prettier?


93

Quiero usar Prettier y ESLint juntos, pero experimenté algunos conflictos simplemente usándolos uno tras otro. Veo que existen estos tres paquetes que parecen permitir su uso en conjunto:

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

Sin embargo, no estoy seguro de cuál usar ya que todos estos nombres de paquetes contienen eslinty prettier.

¿Cuál debo usar?

Respuestas:


208

ESLint contiene muchas reglas y los que son conflictos poder formatear relacionada con la más bonita, tales como arrow-parens, space-before-function-paren, etc. Por tanto, poner juntos va a causar algunos problemas. Las siguientes herramientas se han creado para usar ESLint y Prettier juntos.

Escribí una comparación en un formato tabular en una esencia, ya que Stack Overflow no admite el formato de tabla. Compruébalo si prefieres más organización.

ingrese la descripción de la imagen aquí

prettier-eslint: Se ejecuta y prettierluego se ejecuta eslint --fixen el código. eslintgeneralmente tiene correcciones automáticas para las reglas relacionadas con el formato, y eslint --fixpodrá corregir el formato conflictivo introducido por Prettier. No necesitará ejecutar el prettiercomando por separado.

eslint-plugin-prettier: Este es un complemento de ESLint, lo que significa que contiene la implementación de reglas adicionales que ESLint comprobará. Este complemento usa Prettier bajo el capó y generará problemas cuando su código difiera del resultado esperado de Prettier. Estos problemas se pueden solucionar automáticamente a través de --fix. Con este complemento, no es necesario ejecutar el prettiercomando por separado, el comando se ejecuta como parte del complemento. Este complemento no desactiva las reglas relacionadas con el formato, y deberá desactivarlas si ve conflictos para dichas reglas, ya sea manualmente o vía eslint-config-prettier.

eslint-config-prettier: Esta es una configuración de ESLint y contiene configuraciones para reglas (si ciertas reglas están activadas, desactivadas o configuraciones especiales). Esta configuración le permite usar Prettier con otras configuraciones de ESLint, como eslint-config-airbnbal desactivar las reglas relacionadas con el formato que podrían entrar en conflicto con Prettier. Con esta configuración, no es necesario utilizarla, prettier-eslintya que ESLint no se quejaría después de que Prettier formatee su código. Sin embargo, deberá ejecutar el prettiercomando por separado.

Espero que esto resuma las diferencias.

Actualización: es la práctica recomendada dejar que Prettier maneje el formato y ESLint para problemas que no sean de formato, prettier-eslintno está en la misma dirección que esa práctica, por prettier-eslintlo tanto, ya no se recomienda. Puedes usar eslint-plugin-prettiery eslint-config-prettierjuntos.


Tengo un archivo eslintrc en el que tengo reglas personalizadas. es decir, no-extra-semi, sin embargo, ejecutar eslint --fix con más bonito requiere punto y coma, ¿necesito un archivo de reglas separado para más bonito?
jasan

2
Solo un comentario sobre la diferencia general entre los complementos y las configuraciones de eslint, porque sentí que era lo que me faltaba: los complementos definen nuevas reglas de eslint y las configuraciones se establecen si o no (y cómo) se deben aplicar las reglas.
laugri

1
Con eslint-config-prettier, ¿por qué tenemos que correr más bonitos? ¿No eslint --fixformatearía el código de la misma manera que lo haría más bonito?
Mateo Hrastnik

@MateoHrastnik ESLint no maneja todos los posibles problemas de formato. Consulte este hilo - github.com/prettier/prettier-eslint/issues/101
Yangshun Tay

10
Es 2019, y esta sigue siendo la mejor explicación que encuentro, mucho mejor que la oficial. Puede agregar que ya no se recomienda más bonito-eslint. Y los 2 últimos pueden trabajar juntos ahora.
Fate Riddle
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.