prettier eslint

hübscherer E-Glint

Formatiert Ihr JavaScript mit prettier gefolgt von eslint --fix

Das Problem

Die fix -Funktion von eslint ist ziemlich gut und kann einen Großteil Ihres Codes gemäß Ihrer Eslint-Konfiguration automatisch format/beheben. prettier ist ein leistungsstärkeres automatisches Formatierer. Eines der netten Dinge an Schönheit ist, wie ein Meinunger es ist. Leider ist es nicht genug übereinstimmend und/oder einige Meinungen unterscheiden sich von meinen eigenen. Nach hübscher Form den Code erhalte ich Linning -Fehler.

Diese Lösung

Dies format Ihren Code über prettier und übergibt dann das Ergebnis davon an eslint --fix . Auf diese Weise können Sie die Vorteile der überlegenen Formatierungsfunktionen von prettier Nutzen bringen, aber auch von den Konfigurationsfunktionen von eslint profitieren.

Für Dateien mit einer Erweiterung von .css , .less , .scss oder .json wird dies nur prettier ausgeführt, da eslint diese nicht verarbeiten kann.

Installation

Dieses Modul wird über NPM verteilt, das mit Knoten gebündelt ist und als eine der devDependencies Ihres Projekts installiert werden sollte:

 npm install --save-dev prettier-eslint

Verwendung

Beispiel

 const format = require ( 'prettier-eslint' ) ;

// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar' ;

const options = {
  text : sourceCode ,
  eslintConfig : {
    parserOptions : {
      ecmaVersion : 7
    } ,
    rules : {
      semi : [ 'error' , 'never' ]
    }
  } ,
  prettierOptions : {
    bracketSpacing : true
  } ,
  fallbackPrettierOptions : {
    singleQuote : false
  }
} ;

const formatted = await format ( options ) ;

// notice no semicolon in the formatted text
formatted ; // const { foo } = bar

Optionen

Text (Zeichenfolge)

Der Quellcode zum Format.

Filepath (? String)

Der Pfad der Formatierung der Datei kann zum Überschreiben eslintConfig verwendet werden (Eslint wird verwendet, um die entsprechende Konfiguration für die Datei zu finden).

Eslintconfig (? Objekt)

Die Konfiguration zum Formatieren mit Eslint. Kann mit filePath überschrieben werden.

schöneroptionen (? Objekt)

Die Optionen für die Formatierung mit prettier . Wenn es nicht zur Verfügung gestellt wird, versucht prettier-eslint die Optionen basierend auf dem eslintConfig (unabhängig davon, ob dies über filePath bereitgestellt oder abgeleitet wird). Sie können auch einige der Optionen bereitstellen und die verbleibenden Optionen über Ihre Eslint -Konfiguration abgeben. Dies ist nützlich für Optionen wie parser .

Hinweis: Diese Optionen überschreiben die Eslint -Konfiguration. Wenn Sie möchten, dass die Fallback -Optionen nur verwendet werden, wenn die Regel nicht aus Eslint abgeleitet werden kann, siehe "FallbackPrettieroptions" unten.

FallbackPrettieroptions (? Objekt)

Die Optionen für die Formatierung mit prettier wenn prettier-eslint nicht in der Lage ist, die Optionen basierend auf dem eslintConfig (unabhängig davon, ob dies über filePath bereitgestellt oder abgeleitet wird). Diese Optionen werden nur in dem Fall verwendet, dass die entsprechende Eslint -Regel nicht gefunden werden kann und die schönere Option nicht manuell in prettierOptions definiert wurde. Wenn der Fallback nicht angegeben ist, verwendet prettier-eslint nur den prettier in diesem Szenario.

loglevel (? Enum: ['Trace', 'Debug', 'Info', 'warn', 'Fehler', 'Silent'])

prettier-eslint macht einiges an Protokollierung, wenn Sie es möchten. Geben Sie dies über, um die Anzahl der Protokolle festzulegen, die Sie sehen möchten. Standard ist process.env.LOG_LEVEL || 'warn' .

EslintPath (? String)

Standardmäßig versucht prettier-eslint , das relevante eslint (und prettier ) Modul basierend auf dem filePath zu finden. Wenn es keine finden kann, wird die Version, die prettier-eslint vor Ort installiert ist, verwendet. Wenn Sie einen Pfad zum eslint Modul angeben möchten, den Sie prettier-eslint verwenden möchten, können Sie den vollständigen Pfad mit der eslintPath Option angeben.

hübscherer Pfad (? String)

Dies ist im Grunde dasselbe wie eslintPath , mit Ausnahme des prettier Moduls.

PrettierLast (? Boolean)

Standardmäßig wird prettier-eslint zuerst prettier , dann eslint --fix . Dies ist großartig, wenn Sie prettier verwenden möchten, aber einige der Stile überschreiben möchten, die Sie nicht gerne mit eslint --fix verwenden.

Ein alternativer Ansatz besteht darin, verschiedene Tools für unterschiedliche Bedenken zu verwenden. Wenn Sie prettierLast: true angeben, wird es eslint --fix ausgeführt -zuerst, dann prettier . Auf diese Weise können Sie eslint verwenden, um nach Fehler und/oder schlechten Praktiken zu suchen und prettier zu verwenden, um den Code -Stil durchzusetzen.

wirft

prettier-eslint verbreitet nur die Parsenfehler , wenn entweder prettier oder eslint ausfällt. Zusätzlich zur Verbreitung der Fehler wird auch eine bestimmte Nachricht protokolliert, die angibt, was sie zum Zeitpunkt des Fehlers getan hat.

HINWEIS: format zeigt keine Nachricht zu zerstöreren Regeln in prettier oder eslint .

Erfassen von Eslint -Nachrichten

 const { analyze } = require ( "prettier-eslint" ) ;

const text = 'var x = 0;' ;
const result = await analyze ( {
  text ,
  eslintConfig : {
    rules : { 'no-var' : 'error' }
  }
} )    
console . log ( result . messages ) ;

produziert auf der Konsole

 [{
  ruleId: 'no-var',
  severity: 2,
  message: 'Unexpected var, use let or const instead.',
  line: 1,
  column: 1,
  nodeType: 'VariableDeclaration',
  messageId: 'unexpectedVar',
  endLine: 1,
  endColumn: 11
}]

Die zusätzliche analyze ist mit format identisch, mit der Ausnahme, dass ein einfaches Objekt mit output von Eigenschaften zurückgibt, die das genaue Zeichenfolge geben, das das format zurückgibt, und messages , die das Array von Nachrichtenbeschreibungen (mit der oben gezeigten Struktur) geben, die durch die eslint -Analyse des Codes erstellt wurde. Sie können analyze anstelle des format verwenden, wenn Sie die Formatierung ausführen möchten, aber auch Fehler erfassen möchten, die eslint möglicherweise bemerkt.

Technische Details

Code ➡️ schöner ➡️ Eslint --Fix ➡️ Formatierter Code

Schlussfolgerungen über Eslintconfig

Die eslintConfig und prettierOptions können jeweils als Argument bereitgestellt werden. Wenn der eslintConfig nicht bereitgestellt wird, wird prettier-eslint nach dem fileName nach ihnen gesucht (wenn kein fileName angegeben ist, verwendet er process.cwd() ). Sobald prettier-eslint den eslintConfig gefunden hat, werden die prettierOptions aus dem eslintConfig abgeleitet. Wenn einige der prettierOptions bereits zur Verfügung gestellt wurden, schließt prettier-eslint nur die verbleibenden Optionen aus. Diese Schlussfolgerung geschieht in src/utils.js .

Eine wichtige Sache zu dieser Schlussfolgerung ist, dass sie Ihre spezifische ESLINT -Konfiguration möglicherweise nicht unterstützt. Daher möchten Sie src/utils.js überprüfen, um festzustellen, wie die Inferenz für jede Option durchgeführt wird (auf welche Regel (n) referenziert usw.) und eine Pull -Anfrage zu stellen, wenn Ihre Konfiguration unterstützt wird.

Standardeinstellungen Wenn Sie alle relevanten Eslint-Regeln deaktivieren haben (oder ESLINT vollständig über /* eslint-disable */ als schönere Optionen fallen auf die prettier Standardeinstellungen zurück:

 {
  printWidth : 80 ,
  tabWidth : 2 ,
  singleQuote : false ,
  trailingComma : 'none' ,
  bracketSpacing : true ,
  semi : true ,
  useTabs : false ,
  // prettier-eslint doesn't currently support
  // inferring these two (Pull Requests welcome):
  parser : 'babylon' ,
  bracketSameLine : false ,
} 

Fehlerbehebung

Debugging -Themen

Es gibt eine Menge Protokollierung mit prettier-eslint . Beim Debuggen können Sie eines der logLevel S verwenden, um eine bessere Vorstellung davon zu bekommen, was los ist. Wenn Sie prettier-eslint-cli verwenden, können Sie die --log-level trace verwenden. Wenn Sie das Atom-Plugin verwenden, können Sie die Entwickler-Tools öffnen und eingeben: process.env.LOG_LEVEL = 'trace' in der Konsole und dann das Format ausführen. Sie werden eine Reihe von Protokollen sehen, die Ihnen helfen sollen, festzustellen, ob das Problem prettier ist, eslint --fix , wie prettier-eslint Ihre prettier Optionen oder eine beliebige Anzahl anderer Dinge färbt. Sie werden gebeten, dies vor der Einreichung von Problemen zu tun. Bitte tun Sie dies?

Hinweis: Wenn Sie dies tun, wird empfohlen, dies nur in einer einzelnen Datei auszuführen, da es viele Protokolle gibt :)

Eslint-Disable-Line

Während Sie // eslint-disable-line verwenden, können Sie manchmal Linkerfehler erhalten, nachdem der Code von diesem Modul verarbeitet wurde. Das liegt daran, dass prettier dies ändert:

 // prettier-ignore
if ( x ) { // eslint-disable-line
}

dazu:

 if ( x ) {
  // eslint-disable-line
}

Und die eslint --fix ändert es nicht zurück. Sie können feststellen, dass // eslint-disable-line in eine neue Linie umgezogen ist. Um dieses Problem zu umgehen, können Sie wie folgt //eslint-disable-next-line anstelle von // eslint-disable-line verwenden:

 // eslint-disable-next-line
if ( x ) {
} 

Inspiration

• prettier
• eslint

Andere Lösungen

Keine, die mir bekannt ist. Fühlen Sie sich frei, PR einzureichen, wenn Sie andere Lösungen kennen.

Verwandt

• prettier-eslint-cli -Befehlszeilenschnittstelle
• prettier-atom - ATOM -Plugin (überprüfen Sie das Kontrollkästchen "Eslint Integration" in Einstellungen)
• vs-code-prettier-eslint -Visual Studio Code Plugin
• eslint-plugin-prettier -Eslint-Plugin. Während hübscherer ESLINT eslint --fix verwendet-fix, um die Ausgabe von prettier zu ändern, hält Eslint-Plugin-Prettier die prettier Ausgabe als IS und integriert es in den regulären Eslint-Workflow.
• prettier-eslint-webpack-plugin -Schöneres Eslint-Webpack-Plugin

Mitwirkende

Danke geht an diese Leute (Emoji -Schlüssel):

Kent C. Dodds ? Euen	Gyandeep Singh ?	Igor Pnev ?	Benjamin Tan ?	Eric McCormick Euen	Simon Lydell	Tom McKearney
Patrik ÅKerstrand	Lochlan Bunn	Daniël Terwiel ? ?	Robin Malfait ?	Michael McDermott	Adam Stankiewicz	Stephen John Sorensen
Brian di Palma ?	Rob weise	Patryk -Erbsen ? Euen	Thijs Koersselman ? Euen	Enrique Caballero ?	Łukasz moroz ? Euen	Simon Fridlund ? ? ? ? ? ? Euen ? ✅
Oliver Joseph Ash ?	Mark Palfreeman	Alex Taylor Euen	Xianming Zhong Euen	Lewis Liu	Hamza Hamidi ? ? ? ?	Rajiv Ranjan Singh
Igor ?	Rebecca Vest	Chris Bobbe ?	Jounqin ? ? ? ? ? ? ? Euen ?	Jonathan Rehm	Glen Whitney

Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!

LIZENZ

MIT