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

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?

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.

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.