Was ist der Unterschied zwischen hübscher-eslint, eslint-plugin-hübscher und eslint-config-hübscher?

Ich möchte Prettier und ESLint zusammen verwenden, aber ich habe einige Konflikte erlebt, indem ich sie nacheinander verwendet habe. Ich sehe, dass es diese drei Pakete gibt, die es zu ermöglichen scheinen, sie zusammen zu verwenden:

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

Ich bin mir jedoch nicht sicher, welche ich verwenden soll, da diese Paketnamen alle eslintund enthalten prettier.

Welches soll ich verwenden?

ESLint enthält viele Regeln und diejenigen , die mit Prettier Formatierung bezogenen Macht Konflikt sind, wie zum Beispiel arrow-parens, space-before-function-parenusw. Daher sie zusammen verwendet , wird einige Probleme verursachen. Die folgenden Tools wurden erstellt, um ESLint und Prettier zusammen zu verwenden.

Ich habe einen Vergleich in einem Tabellenformat in einem Kern geschrieben, da der Stapelüberlauf die Tabellenformatierung nicht unterstützt. Probieren Sie es aus, wenn Sie mehr Organisation bevorzugen.

prettier-eslint: Läuft prettierund läuft dann eslint --fixauf dem Code. eslintVerfügt normalerweise über automatische Korrekturen für formatierungsbezogene Regeln und eslint --fixkann die von Prettier eingeführte widersprüchliche Formatierung beheben. Sie müssen den prettierBefehl nicht separat ausführen .

eslint-plugin-prettier: Dies ist ein ESLint-Plugin, dh es enthält die Implementierung zusätzlicher Regeln, nach denen ESLint sucht. Dieses Plugin verwendet Prettier unter der Haube und wirft Probleme auf, wenn Ihr Code von der erwarteten Ausgabe von Prettier abweicht. Diese Probleme können automatisch über behoben werden --fix. Mit diesem Plugin müssen Sie den prettierBefehl nicht separat ausführen , der Befehl wird als Teil des Plugins ausgeführt. Dieses Plugin deaktiviert formatierungsbezogene Regeln nicht und Sie müssen sie deaktivieren, wenn Konflikte für solche Regeln entweder manuell oder über angezeigt werden eslint-config-prettier.

eslint-config-prettier: Dies ist eine ESLint-Konfiguration und enthält Konfigurationen für Regeln (unabhängig davon, ob bestimmte Regeln aktiviert, deaktiviert oder spezielle Konfigurationen sind). Mit dieser Konfiguration können Sie Prettier mit anderen ESLint-Konfigurationen verwenden, z. B. eslint-config-airbnbindem Sie formatierungsbezogene Regeln deaktivieren , die möglicherweise mit Prettier in Konflikt stehen. Mit dieser Konfiguration müssen Sie nicht verwenden, prettier-eslintda ESLint sich nicht beschweren würde, nachdem Prettier Ihren Code formatiert hat. Sie müssen den prettierBefehl jedoch separat ausführen .

Hoffe das fasst die Unterschiede zusammen.

Update: Es wird empfohlen, dass Prettier Formatierungs- und ESLint-Probleme bei Problemen ohne Formatierung behandelt. Dies prettier-eslintist nicht die gleiche Richtung wie diese Vorgehensweise und wird daher prettier-eslintnicht mehr empfohlen. Sie können eslint-plugin-prettierund eslint-config-prettierzusammen verwenden.