Prettier 1.8: Markdown-Unterstützung

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Dieses Release fügt Markdown-Unterstützung hinzu, bietet eine neue --insert-pragma-Flag, behebt mehrere Formatierungsprobleme, unterstützt neue experimentelle Operatoren und verbessert die Editor-Integration.

Höhepunkte

Markdown-Unterstützung

Markdown-Unterstützung (#2943) von @ikatyang

Ihr könnt Prettier jetzt für Markdown-Dateien verwenden! 🎉

Die Implementierung hält sich eng an die CommonMark-Spezifikation und nutzt das hervorragende Paket remark-parse.

Zeilenumbruch

Ein Kernfeature von Prettier ist die automatische Zeilenumbrüche bei festgelegter Zeilenlänge. Dies gilt auch für Markdown: Ihr könnt saubere Markdown-Dateien mit 80 Zeichen Breite pflegen, ohne manuell Zeilenumbrüche anzupassen, wenn ihr Wörter hinzufügt oder löscht.

Eingabe:

Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valourous visitation of a bygone vexation stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition! The only verdict is vengeance; a vendetta held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it's my very good honour to meet you and you may call me V.

Ausgabe:

Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim
and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity,
is a vestige of the vox populi, now vacant, vanished. However, this valourous
visitation of a bygone vexation stands vivified and has vowed to vanquish these
venal and virulent vermin vanguarding vice and vouchsafing the violently vicious
and voracious violation of volition! The only verdict is vengeance; a vendetta
held as a votive, not in vain, for the value and veracity of such shall one day
vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage
veers most verbose, so let me simply add that it's my very good honour to meet
you and you may call me V.

Hinweis: Wir erwägen eine Option dafür - Diskussion unter #3183. Update: In 1.8.2 wurde die Option --no-prose-wrap hinzugefügt.

Hinweis für CJK-Nutzer: Falls euer Markdown-Renderer keine CJK-Zeilentrennung unterstützt, benötigt ihr Plugins wie markdown-it-perfect-newline-for-cjk oder hexo-filter-fix-cjk-spacing, um zusätzliche Leerzeichen zu entfernen.

// Source
一二三
四五六
七八九

// Rendered content with unsupported renderer
一二三 四五六 七八九

// Rendered content with supported renderer or via plugin
一二三四五六七八九

Code-Formatierung

Dank Prettiers generischem "Multiparser" werden Codeblöcke in Markdown formatiert! Die Sprachkennung im Codeblock bestimmt die Formatierung - somit funktioniert dies für alle von Prettier unterstützten Sprachen (inklusive Markdown selbst).

Eingabe:

```js
reallyUgly    (
javascript
  )
```

```css
.h1 {     color : red }
```

Ausgabe:

```js
reallyUgly(javascript);
```

```css
.h1 {
  color: red;
}
```

Hinweis: Um Codeblöcke von der Formatierung auszuschließen, könnt ihr wie in anderen Sprachen einen Ignorier-Kommentar verwenden:

<!-- prettier-ignore -->
```js
ugly   ( code ) ;
```

Listen

Nach dem Umordnen von Listenelementen korrigiert Prettier automatisch alle Nummerierungen!

Hinweis: Durch Verwendung von 1. für alle Listenelemente könnt ihr dies deaktivieren, um sauberere Diffs zu erhalten.

Tabellen

Tabellen werden automatisch an ihren Inhalt angepasst - ohne Automatisierung praktisch nicht wartbar.

Markdown-in-JS

Mit md oder markdown getaggten Template-Literals könnt ihr Markdown-Code in JavaScript formatieren.

const markdown = md`
  # heading

  1. list item
`;

CLI

Option zum Einfügen von @format in den ersten Docblock hinzugefügt, falls nicht vorhanden (#2865) von @samouri

In Version 1.7 haben wir die Option --require-pragma eingeführt, die erfordert, dass Dateien ein /** @format */-Pragma enthalten, um formatiert zu werden. Um dieses Pragma zu einer großen Anzahl von Dateien hinzuzufügen, können Sie jetzt das Flag --insert-pragma verwenden.

prettier --write "folder/**/*.js" --insert-pragma

Option --loglevel hinzugefügt (#2992) von @ikatyang

Diese praktische Funktion ermöglicht es Ihnen, die Protokollierung von Prettier zu aktivieren oder zu deaktivieren. Wir haben die Protokollierung seit Version 1.7 außerdem deutlich optimiert.

$ prettier --loglevel=debug blarg
$ ./bin/prettier.js --loglevel=debug blarg
[debug] normalized argv: {"_":["blarg"],"bracket-spacing":false,"color":true,"debug-check":false,"debug-print-doc":false,"flow-parser":false,"insert-pragma":false,"jsx-bracket-same-line":false,"list-different":false,"require-pragma":false,"semi":false,"single-quote":false,"stdin":false,"use-tabs":false,"version":false,"with-node-modules":false,"write":false,"loglevel":"debug","ignore-path":".prettierignore","config-precedence":"cli-override"}
[error] No matching files. Patterns tried: blarg !**/node_modules/** !./node_modules/**

JavaScript

Einrückung für JSDoc-Kommentare korrigiert (#2470) von @maxdeviant

Dies war ein länger bekanntes Problem mit Prettier. Wenn Code formatiert wurde, der zu einer Änderung der Einrückungsebene führte, waren die JSDoc-Kommentare nicht mehr korrekt ausgerichtet. Wir freuen uns, mitteilen zu können, dass dies nun behoben ist!

// Before
function theFunction2(action$, store) {
  /*
     * comments
     */
  return true;
}

// After
function theFunction2(action$, store) {
  /*
   * comments
   */
  return true;
}

Pipeline- und Nullish-Coalescing-Operatoren unterstützt (#3036) von @azz

Wir haben Unterstützung für zwei neue experimentelle Operatoren in Prettier hinzugefügt: den Pipeline-Operator und den Nullish-Coalescing-Operator.

Der Pipeline-Operator ist derzeit ein Proposal der Stufe 1.

Dieses Proposal führt einen neuen Operator |> ein, ähnlich wie in F#, OCaml, Elixir, Elm, Julia, Hack und LiveScript sowie UNIX-Pipes. Es bietet eine abwärtskompatible Methode, um verkettete Funktionsaufrufe auf lesbare, funktionale Weise zu optimieren und stellt eine praktische Alternative zur Erweiterung eingebauter Prototypen dar.

// Before
let result = exclaim(capitalize(doubleSay("hello")));

// After
let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;

Der Nullish-Coalescing-Operator ist ein weiteres Proposal der Stufe 1.

Beim optionalen Zugriff auf Eigenschaften in verschachtelten Strukturen in Verbindung mit dem Optional-Chaining-Operator ist es oft wünschenswert, einen Standardwert anzugeben, wenn das Ergebnis dieses Eigenschaftszugriffs null oder undefined ist.

Dieser Operator ähnelt ||, mit dem Unterschied, dass die rechte Seite nur ausgewertet wird, wenn die linke Seite undefined oder null ist, nicht jedoch bei "", 0, NaN usw.

const foo = object.foo ?? "default";

Verbesserte Zeilenumbrüche für Template-Literal-Ausdrücke (#3124) von @duailibe

Dies war ein weiteres bekanntes Problem mit Prettier: Beim Ausgeben von Template-Literals mit Ausdrücken, die die Druckbreite überschritten, wurden die Ausdrücke an unpassenden Stellen umgebrochen. Wenn Prettier nun einen Zeilenumbruch einfügen muss, erfolgt dieser direkt zwischen ${ und }.

// Before
const description = `The value of the ${cssName} css of the ${this
  ._name} element`;

const foo = `mdl-textfield mdl-js-textfield ${className} ${content.length > 0
  ? "is-dirty"
  : ""} combo-box__input`;

// After
const description = `The value of the \${cssName} css of the \${
  this._name
} element`;

const foo = `mdl-textfield mdl-js-textfield ${className} ${
  content.length > 0 ? 'is-dirty' : ''
} combo-box__input`

JSX

Nachfolgende } für Arrow-Function-Attribute nicht inline setzen (#3110) von @duailibe

Um näher am Airbnb-Styleguide zu sein, und da dies nie absichtlich so ausgegeben wurde, haben wir die } in JSX in eine neue Zeile verschoben. Dies ist diff-freundlicher und erleichtert das Verschieben von Code durch Zeilenverschiebungen in Ihrem Editor.

// Before
<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)}
/>;

// After
<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
/>;

Weitere Änderungen

JavaScript

Verbesserte Fabrik-Funktionserkennung bei mehreren Elementen (#3112) von @vjeux

Es gab einen Fehler in der Heuristik von Prettier zur Erkennung von Fabrik-Funktionen. Diese funktioniert nun korrekt bei längeren Member-Ausdrücken.

// Before
window.FooClient
  .setVars({
    locale: getFooLocale({ page }),
    authorizationToken: data.token
  })
  .initVerify("foo_container");

// After
window.FooClient.setVars({
  locale: getFooLocale({ page }),
  authorizationToken: data.token
}).initVerify("foo_container");

Korrekte Kommentarplatzierung zwischen Funktionsname und öffnender Klammer (#2979) von @azz

Die korrekte Platzierung von Kommentaren ist eine endlose Herausforderung 😉. Dieser Fix stellt sicher, dass Kommentare neben Funktionsnamen korrekt neu formatiert werden.

// Before
function f(/* comment*/ promise) {}

// After
function f /* comment*/(promise) {}

Unterstützung sequenzieller CallExpressions in Member-Ketten (#2990) von @chrisvoll

Member-Ketten gehören zu den komplexesten Teilen von Prettier. Dieser PR behebt ein Problem, bei dem wiederholte Aufrufe dazu führten, dass die nächste Methode nicht in eine neue Zeile umgebrochen wurde.

// Before
wrapper
  .find("SomewhatLongNodeName")
  .prop("longPropFunctionName")().then(function() {
  doSomething();
});

// After
wrapper
  .find("SomewhatLongNodeName")
  .prop("longPropFunctionName")()
  .then(function() {
    doSomething();
  });

Berücksichtigung leerer Zeilen in langen Methodenaufrufketten (#3035) von @jackyho112

Früher entfernte Prettier alle Zeilenumbrüche innerhalb einer Member-Kette. Jetzt behalten wir bis zu einen Umbruch bei, wenn dieser im Quellcode vorhanden war. Dies ist nützlich für fluente APIs, die über mehrere Zeilen strukturiert werden sollen.

angular
  .module("AngularAppModule")

  // Constants.
  .constant("API_URL", "http://localhost:8080/api")

  // App configuration.
  .config(appConfig)
  .run(appRun);

Behebung: Erstes Argument bleibt bei Zeilenumbrüchen zurück (#3079) von @mutdmour

Dies behebt ein Problem, bei dem aufgrund unseres speziellen Inline-Verhaltens für Objekte die Einrückung für Funktionsaufrufe fehlte.

// Before
db.collection("indexOptionDefault").createIndex({ a: 1 },
{
  indexOptionDefaults: true
},
function(err) {
  // code
});

// After
db.collection("indexOptionDefault").createIndex(
  { a: 1 },
  {
    indexOptionDefaults: true
  },
  function(err) {
    // code
  }
);

Klammerumbruch für binäre Ausdrücke in Member-Expressions (#2958) von @duailibe

Ähnlich gab es einen weiteren Sonderfall, bei dem logischen Ausdrücken die Einrückung fehlte. Auch dies wurde behoben.

// Before
const someLongVariable = (idx(
  this.props,
  props => props.someLongPropertyName
) || []
).map(edge => edge.node);

// After
const someLongVariable = (
  idx(this.props, props => props.someLongPropertyName) || []
).map(edge => edge.node);

Verhindern von MemberExpression-Umbruch innerhalb von NewExpression (#3075) von @duailibe

Es gibt viele Möglichkeiten, Zeilenumbrüche zu setzen - manche sehen deutlich unschöner aus als andere. Der Umbruch an dieser Stelle sah besonders seltsam aus und wurde korrigiert!

// Before
function functionName() {
  if (true) {
    this._aVeryLongVariableNameToForceLineBreak = new this
      .Promise((resolve, reject) => {
        // do something
      });
  }
}

// After
function functionName() {
  if (true) {
    this._aVeryLongVariableNameToForceLineBreak = new this.Promise(
      (resolve, reject) => {
        // do something
      }
    );
  }
}

Korrektur von Array-Zugriffen in Methodenketten (#3137) von @duailibe

In Methodenketten gruppieren wir Elemente und brechen Zeilen um - Array-Zugriffe sollten nun am Ende einer Gruppe statt am Anfang platziert werden.

// Before
find('.org-lclp-edit-copy-url-banner__link')
  [0].getAttribute('href')
  .indexOf(this.landingPageLink)

// After
find('.org-lclp-edit-copy-url-banner__link')[0]
  .getAttribute('href')
  .indexOf(this.landingPageLink)

Flow und TypeScript

Korrekte Einrückung von Schnittmengen-Objekttypen (#3074) von @duailibe

Dies war ein kleiner Ausrichtungsfehler bei Schnittmengentypen, der nun behoben wurde.

// Before
type intersectionTest = {
  propA: X
} & {
  propB: X
} & {
    propC: X
  } & {
    propD: X
  };

// After
type Props = {
  propA: X
} & {
  propB: X
} & {
  propC: X
} & {
  propD: X
};

Beibehalten von Klammern bei TSAsExpression in ConditionalExpression (#3053) von @azz

Wir hatten einen Fall übersehen, bei dem Klammern bei TypeScripts as-Assertions erhalten bleiben müssen. Dies wurde korrigiert.

// Before
aValue as boolean ? 0 : -1;

// After
(aValue as boolean) ? 0 : -1;

JSX

Reduzierung mehrerer JSX-Leerzeichen (#2973) von @karl

Dies behebt das Problem, bei dem die JSX-Formatierung gelegentlich zweimal ausgeführt werden musste, um stabil zu werden. Dies trat auf, wenn mehrere JSX-Leerzeichenelemente oder JSX-Leerzeichen gefolgt von einem Leerzeichen vorhanden waren.

// Before
<div>
    {" "} <Badge src={notificationIconPng} />
</div>;

// After
<div>
  {" "}
  <Badge src={notificationIconPng} />
</div>

JSX-Klammer nicht in derselben Zeile ausgeben, wenn sie nachfolgende Kommentare hat (#3088) von @azz

Dies war ein Problem mit der Option --jsx-bracket-same-line. Es stellt sich heraus, dass man die Klammer nicht immer in derselben Zeile platzieren kann...

// Input
<div
  // comment
>
  {foo}
</div>

// Before
<div>
// comment
  {foo}
</div>;

// After
<div
// comment
>
  {foo}
</div>;

CSS

Zeilenumbrüche in Grid-Deklarationen erhalten (#3133) von @duailibe

Prettier behält jetzt bei der Formatierung der grid- und grid-template-*-Regeln die im Quellcode enthaltenen Zeilenumbrüche bei, da diese wichtig sind, um sie in separaten Zeilen zu belassen. Gleichzeitig wendet es die Formatierung wie bei anderen Regeln an (z.B. Zahlen und Anführungszeichen).

/* Original Input */
div {
  grid:
    [wide-start] 'header header header' 200.000px
    [wide-end] "footer footer footer" .50fr
    / auto 50.000px auto;
}

/* Before */
div {
  grid: [wide-start] "header header header" 200px [wide-end]
    "footer footer footer" 0.5fr / auto 50px auto;
}

/* After */
div {
  grid:
    [wide-start] "header header header" 200px
    [wide-end] "footer footer footer" 0.5fr
    / auto 50px auto;
}

SCSS

SCSS-Maps wie CSS-Regeln formatieren (#3070) von @asmockler

Es zeigt sich, dass SCSS-Maps deutlich ansehnlicher sind, wenn sie über mehrere Zeilen formatiert werden.

// Before
$map: (color: [#111111](https://github.com/prettier/prettier/pull/111111), text-shadow: 1px 1px 0 salmon)

// After
$map: (
  color: [#111111](https://github.com/prettier/prettier/pull/111111),
  text-shadow: 1px 1px 0 salmon
);

CSS-in-JS

Korrektur der Formatierung von styled(Foo).attrs(...)`` (#3073) von @existentialism

Prettier formatiert jetzt das CSS in styled-components-Code, der wie folgt aussieht:

styled(Component).attrs({})`
  color: red;
`;

GraphQL

Verhindern der Formatierung von GraphQL-Template-Literalen mit Ausdrücken (#2975) von @duailibe

Prettier unterstützt nicht die Formatierung von JavaScript-Ausdrücken in GraphQL. Siehe #2640 zur Nachverfolgung. Es gab einen Fehler, bei dem die Formatierung eines Ausdrucks zu ungültigem Code führte. Daher haben wir die Formatierung von GraphQL komplett deaktiviert, solange es JavaScript-Ausdrücke enthält, bis wir dies vollständig unterstützen.

// Before
(invalid code)

// After
graphql(schema, `{ query test { id }} ${fragment}`)

CLI

Keine ANSI-Codes verwenden, wenn stdout kein TTY ist (#2903) von @Narigo

Bisher war das Weiterleiten der Ausgabe von --list-different an andere Tools problematisch, da wir ANSI-Farbcodes verwenden, um anzuzeigen, ob eine Datei geändert wurde. Dieser Pull Request deaktiviert die Farbausgabe, wenn die Prettier-Ausgabe an einen anderen Prozess weitergeleitet wird.

Konfiguration

Relative Pfade mit der CLI verwenden (#2969) von @ahmedelgabri

Dies behebt einen Fehler, bei dem das Übergeben eines Pfads, der mit ./ beginnt, an die CLI nicht mit den in .prettierignore verwendeten Mustern übereinstimmte.

## .prettierignore
path/to/*.js

Nach dieser Korrektur werden beim Ausführen keine Dateien geschrieben:

$ prettier --write ./path/to/*.js

Dateipfade relativ zur Konfigurationsdatei auflösen (#3037) von @azz

Dies behebt ein Problem, bei dem .prettierrc-Überschreibungen unter bestimmten Bedingungen bei absoluten Pfaden mit der resolveConfig-API nicht berücksichtigt wurden.

Kernfunktionalität

Respektierung von CJK-Zeichenbreite und kombinierten Zeichen (#3003, #3015) von @ikatyang

Chinesische, japanische und koreanische Schriftzeichen werden nun als zwei Zeichen breit betrachtet.

// Before (exceeds print width when CJK characters are 2x monospace chars)
const x = ["中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文"];

// After
const x = [
  "中文",
   // ...
  "中文"
];

##3015 stellt zusätzlich sicher, dass kombinierte Zeichen (z.B. Á) als ein Zeichen gezählt werden.

Editor-Unterstützung

Implementierung von getSupportInfo() und Verwendung zur Inferenz (#3033) von @azz

Wir haben der API eine neue Funktion hinzugefügt (prettier.getSupportInfo([version])) und dem CLI den Parameter --support-info. Damit kann Prettier abgefragt werden, welche Sprachen die aktuelle oder eine ältere Version unterstützt. Es liefert auch nützliche Informationen wie CodeMirror-IDs, tmScopes etc., die die Automatisierung von Lookup-Tabellen in Editor-Integrationen erleichtern.

Intern nutzen wir diese Informationen, um festzulegen, welche Dateiendungen welche Parser auslösen, und unterstützen gängige Dateien ohne Endung wie .prettierrc, Jakefile etc.

## prettier knows that this file is JSON now.
$ prettier --write .prettierrc

Aufteilung von Quellelementen relativ zu ihrer Sprache (#3069) von @CiGit

Dies behebt ein Problem in Editoren mit Bereichsformatierung, bei dem das Formatieren eines Objekts zu einem Absturz von Prettier führte.

---

Danke! ❤️

Danke an alle, die zu dieser Version beigetragen haben, sowie an diejenigen, die Issues gemeldet haben! Prettier ist zu einer äußerst stabilen Software geworden, der viele Menschen ihren Code anvertrauen. Wir nehmen dieses Vertrauen ernst und beheben seltene Probleme, die Code beschädigen, mit höchster Priorität. Wir können diese Probleme nur beheben, wenn wir davon wissen – habt also keine Scheu, ein Issue zu erstellen!