javascript - react - prettier line width

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

Question

Quiero usar Prettier y ESLint juntos, pero experimenté algunos conflictos simplemente al usarlos uno tras otro. Veo que hay estos tres paquetes que parecen permitir que se usen en conjunto:

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

Sin embargo, no estoy seguro de qué usar, ya que todos estos nombres de paquete contienen eslint y prettier .

¿Cuál debería usar?

Answer 1

ESLint contiene muchas reglas y aquellas relacionadas con el formato pueden entrar en conflicto con Prettier, como arrow-parens , space-before-function-paren , etc. Por lo tanto, usarlas juntas causará algunos problemas. Las siguientes herramientas se han creado para usar ESLint y Prettier juntas.

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

prettier-eslint : ejecuta prettier luego ejecuta eslint --fix en el código. eslint generalmente tiene arreglos automáticos para formatear reglas relacionadas, y eslint --fix podrá arreglar el formateo conflictivo introducido por Prettier. No necesitará ejecutar el comando prettier separado.

eslint-plugin-prettier : es un complemento de ESLint, lo que significa que contiene la implementación de reglas adicionales que ESLint verificará. Este complemento utiliza Prettier debajo del capó y generará problemas cuando su código difiera de la salida esperada de Prettier. Esos problemas se pueden solucionar automáticamente a través de --fix . Con este complemento, no necesita ejecutar el comando prettier 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 mediante eslint-config-prettier .

eslint-config-prettier : 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-airbnb al desactivar las reglas relacionadas con el formato que pueden entrar en conflicto con Prettier. Con esta configuración, no necesita usar prettier-eslint ya que ESLint no se quejaría después de que Prettier formatee su código. Sin embargo, deberá ejecutar el comando prettier separado.

Espero que esto resume las diferencias.

Actualización: prettier-eslint ya no se recomienda y puedes usar eslint-plugin-prettier y eslint-config-prettier juntos.