Prettier + Airbnb's ESLint config

12

Vor kurzem habe ich begonnen, Visual Studio Code für meinen Editor zu verwenden und den Prettier - JavaScript Formatierer gefunden. Ich denke, es ist ein großartiges Plugin, weil es mir hilft, meinen Code schön zu halten.

Ich habe Airbnb's ESLint config eingerichtet und finde das super hilfreich.

Hier ist der Haken. Die Airbnb ESLint Konfiguration, die ich gerade aktiviere, spielt mit Prettier nicht gut. Zum Beispiel ist Prettier für JavaScript-Strings so formatiert, dass sie doppelte Ticks und Airbnbs ESLint wie einzelne Ticks enthält. Wenn ich den Code mit Prettier formatiere, stimmt Airbnbs ESLint nicht überein.

Ich weiß, dass Kent Dodds einige Arbeit mit ESLint-Konfigurationen geleistet hat, unter anderem Beispiel hier.

Aber ich kann anscheinend keine Lösung finden, die es mir erlaubt, die Magie von Prettier zu benutzen, um meinen Code zu Airbnbs ESLint zu formatieren.

    
Jiovan Melendez 13.09.2017, 15:38
quelle

3 Antworten

15

Ich denke eslint-config-prettier wurde nur für diesen Zweck erstellt: Ссылка

Grundsätzlich schaltet alle Regeln aus, die mit Code-Styling zu tun haben weil prettier sich sowieso darum kümmern wird.

Also installierst du dieses Plugin zusammen mit einem anderen gewünschten eslint Plugin (wie eslint-config-airbnb ) und fügst es einfach in dein eslint config zum extends Feld ein. Zum Beispiel:

%Vor%     
timetowonder 01.10.2017 18:12
quelle
3

Hier sind ein paar Möglichkeiten, um es zu tun, in der Reihenfolge der Empfehlung. Ich würde den ersten Ansatz bevorzugen, da Sie sich nie mit anderen Regeln auseinandersetzen müssen, die in Zukunft Konflikte verursachen könnten.

i) Installieren Sie eslint-config-prettier und erweitern Sie es in .eslintrc . Dadurch werden einige Formatierungsregeln in ESLint deaktiviert, die möglicherweise einen Konflikt mit Prettier verursachen:

%Vor%

ii) Hinzufügen von "singleQuote": true zur .prettierrc config-Datei:

%Vor%

iii) Hinzufügen einer --single-quote Befehlszeilenoption beim Aufruf von Prettier:

%Vor%

iv) Deaktivieren Sie die quotes -Regel von ESLint in Ihrer .eslintrc config-Datei (und möglicherweise anderen, die Konflikte verursachen könnten):

%Vor%     
Yangshun Tay 25.10.2017 17:31
quelle
1

Sie haben also Ihre .eslintrc-Datei mit der Eigenschaft "extends": "airbnb" Fügen Sie eine weitere Eigenschaft, Regeln und die Regeln, die Sie dort schreiben, überschreiben die von airbnb geerbten

%Vor%

Nun, hier überschreibe ich nur zwei zufällige Regeln, Sie müssen nach der suchen, die Sie brauchen:)

Oder habe ich Ihre Frage missverstanden?

    
Fabio Lolli 13.09.2017 15:47
quelle