Prettier 1.16: HTML-Verbesserungen und bessere CRLF-Handhabung

20. Januar 2019 · 10 Min. Lesezeit

Inoffizielle Beta-Übersetzung

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

Dieses Release verbessert die HTML-Formatierung und bietet eine bessere Handhabung von CRLF, neue Syntaxfunktionen sowie mehrere Fehlerbehebungen.

Höhepunkte

HTML

Berücksichtigung umgebender Zeilenumbrüche (#5596 von @ikatyang)

Bisher platzierte Prettier Elemente stets in einer einzelnen Zeile, wenn sie die printWidth nicht überschritten. Dies funktioniert jedoch nicht bei Elementen, die als if-else-Blöcke verwendet werden oder mehrere Items enthalten sollen. Um dieses Problem zu lösen, berücksichtigen wir nun bei allen Elementen umgebende Zeilenumbrüche, da es keine zuverlässige Methode gibt, diese Verwendungsweisen zu erkennen.

<!-- Input -->
<div class="list">
  <div class="item">Jan</div>
</div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)">
  {{ i }}
</a>
<span v-else>
  <slot name="ellipsis">&hellip;</slot>
</span>

<!-- Output (Prettier 1.15) -->
<div class="list"><div class="item">Jan</div></div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)"> {{ i }} </a>
<span v-else> <slot name="ellipsis">&hellip;</slot> </span>

<!-- Output (Prettier 1.16) -->
<div class="list">
  <div class="item">Jan</div>
</div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)">
  {{ i }}
</a>
<span v-else>
  <slot name="ellipsis">&hellip;</slot>
</span>

Allgemein

Bessere CRLF-Handhabung (#5494 von @ikatyang)

Vielleicht sind Ihnen merkwürdige Formatierungsprobleme aufgefallen, die nur unter Windows auftraten. Viele dieser Probleme wurden durch unsere Behandlung von CR-LF-Zeilentrennern verursacht. In diesem Release konnten wir diese Probleme lösen, indem wir Zeilenumbrüche sowohl vor als auch nach der Formatierung normalisieren.

JavaScript

Verbesserung des Musters für React Hooks (#5608 von @j-f1)

// Input
function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value])
}

// Output (Prettier 1.15)
function helloWorld() {
  useEffect(
    () => {
      // do something
    },
    [props.value]
  );
}

// Output (Prettier 1.16)
function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value]);
}

Umbenennung des `babylon`-Parsers in `babel` (#5647 von @wuweiweiwu)

Babels Parser babylon wurde in Babel 7 in @babel/parser umbenannt. Wir haben unseren babylon-Parser ebenfalls in babel umbenannt, um Verwirrung zu vermeiden.

Der babylon-Parser-Name ist nun veraltet, funktioniert aber weiterhin.

Falls Sie aufgrund dieser Änderung Ihre Konfiguration anpassen müssen, lesen Sie bitte unsere Dokumentation zur parser-Option, insbesondere den Hinweis am Ende.

Flow

Hinzufügen des `babel-flow`-Parsers (#5685 von @ikatyang)

Sowohl die babel- als auch flow-Parser unterstützen standardmäßig Flow-Syntax, aber es gibt einige Randfälle, bei denen die Flow-Syntax mehrdeutig ist. Standardmäßig parst Babels Flow-Parser mehrdeutigen Code als regulären JS-Code, während der native Flow-Parser ihn als Flow-Syntax interpretiert. Um dieses Problem zu lösen, haben wir die babel-flow-Parser-Option hinzugefügt, die Babels Parser verwendet, aber bei Mehrdeutigkeiten die Flow-Syntax priorisiert.

// Input
const Theme = React.createContext<"light" | "dark">("light");

// Output (Prettier 1.15, --parser babylon)
const Theme = (React.createContext < "light") | ("dark" > "light");

// Output (Prettier 1.16, --parser babel-flow)
const Theme = React.createContext<"light" | "dark">("light");

CLI

Hinzufügen einer `--check`-Flag (#5629 von @kachkaev)

Die Übergabe von --list-different an den prettier-CLI-Befehl führt dazu, dass Prettier mit einem Fehlercode beendet wird, wenn eine oder mehrere Dateien nicht mit Prettier formatiert wurden. Dies funktioniert gut, zeigt aber außer den nicht korrekt formatierten Dateien keine weiteren Informationen an. Für neue Mitwirkende und Nutzer ist dies nicht besonders benutzerfreundlich, daher haben wir eine --check-Option hinzugefügt, die menschenfreundlichere Ausgaben generiert.

# Prettier 1.15

$ prettier *.js --list-different

unformatted.js

# Prettier 1.16 $ prettier *.js --check Checking formatting... unformatted.js Code style issues found in the above file(s). Forgot to run Prettier?

Weitere Änderungen

Allgemein

Behebung unerwarteter Formatierungen durch Bereichsformatierung (#5632 von @lhchavez)

// Input
something("something", () => {
  const something = {
    something: [
      {
        long1: "longlonglonglonglonglonglonglonglonglonglonglong",
        long2: "longlonglonglonglonglonglonglonglonglonglonglong",
      }
    ]
  };
});

// Output (Prettier 1.15, --range-start 100 --range-end 120)
something("something", () => {
  const something = { something: [{ long1: "longlonglonglonglonglonglonglonglonglonglonglong", long2: "longlonglonglonglonglonglonglonglonglonglonglong" }] };
});

// Output (Prettier 1.16, --range-start 100 --range-end 120)
something("something", () => {
  const something = {
    something: [
      {
        long1: "longlonglonglonglonglonglonglonglonglonglonglong",
        long2: "longlonglonglonglonglonglonglonglonglonglonglong",
      }
    ]
  };
});

API

Erlauben von Plugin-Instanzen im `plugins`-Feld der Formatierungsoptionen (#5763 von @Kingwl)

Bisher waren Plugin-Instanzen in gewisser Weise im plugins-Feld der Formatierungsoptionen nicht erlaubt, obwohl sie es sein sollten. Wir haben dieses Problem in Prettier 1.16 behoben.

const prettier = require("prettier");
const fooPlugin = require("./path/to/foo-plugin");
const formatted = prettier.format("foo-code", {
  plugins: [fooPlugin],
  parser: "foo-parser",
});
// Prettier 1.15: Error
// Prettier 1.16: No error

Standalone

Entfernung des dynamischen `require()`-Aufrufs im Standalone-Bundle (#5612 von @j-f1)

Bisher war ein dynamischer require()-Aufruf in der standalone.js-Datei enthalten, die für die Verwendung in Browsern vorgesehen ist. Er wurde so verwendet, dass er eigentlich nie aufgerufen wurde, aber Tools wie webpack dennoch eine Warnung auslösten. Wir haben das Build-Skript angepasst, um diesen require()-Aufruf im Standalone-Bundle in Prettier 1.16 zu entfernen.

TypeScript

Korrekte Behandlung von `//` in TSX (#5728 von @JamesHenry)

Bisher führte die Verwendung von // als Child eines JSX-Elements in TypeScript zu einem Fehler, da es als Kommentar interpretiert wurde. Prettier 1.16 behebt dieses Problem.

// Input
const link = <a href="example.com">http://example.com</a>

// Output (Prettier 1.15)
// Error: Comment location overlaps with node location

// Output (Prettier 1.16)
const link = <a href="example.com">http://example.com</a>;

Entfernung redundanter Klammern um Typ-Annotationen (#5724 von @flurmbo)

// Input
class Foo {
  bar: (() => boolean);
}

// Output (Prettier 1.15)
class Foo {
  bar: (() => boolean);
}

// Output (Prettier 1.16)
class Foo {
  bar: () => boolean;
}

JavaScript

`something.connect()` nicht als funktionale Komposition behandeln (#5739 von @makepost)

Ein spezielles Format für connect()-Aufrufe wurde vor einigen Versionen eingeführt, um die Formatierung von Redux zu verbessern. Es gibt jedoch viele andere Anwendungsfälle für Funktionen namens connect, die nicht so formatiert werden sollten. Da die meisten dieser Fälle eine connect-Methode betrafen, behandeln wir foo.connect()-Aufrufe nicht mehr als funktionale Komposition.

// Input
app.connect("activate", async () => {
  await data.load();
  win.show_all();
});
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

// Output (Prettier 1.15)
app.connect(
  "activate",
  async () => {
    await data.load();
    win.show_all();
  }
);
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

// Output (Prettier 1.16)
app.connect("activate", async () => {
  await data.load();
  win.show_all();
});
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

Unterstützung für private Klassenmethoden hinzugefügt (#5637 von @existentialism)

// Input
class Hello {
  #world() {}
}

// Output (Prettier 1.15)
// SyntaxError

// Output (Prettier 1.16)
class Hello {
  #world() {}
}

Korrekte Einrückung für Ausdrücke im Root-Template (#5607 von @ikatyang)

// Input
if (a) {
  return `
hello
${foo({
  bar,
  baz
})}
world
`;
}

// Output (Prettier 1.15)
if (a) {
  return `
hello
${foo({
    bar,
    baz
  })}
world
`;
}

// Output (Prettier 1.16)
if (a) {
  return `
hello
${foo({
  bar,
  baz
})}
world
`;
}

Entfernung unnötiger Zeilenumbrüche in HTML-Template-Literals (#5771 von @ikatyang)

// Input
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(bar => html`
       <p>${bar}</p>
    `)}
  `;
}

// Output (Prettier 1.15)
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${
      bars.map(
        bar => html`
          <p>${bar}</p>
        `
      )
    }
  `;
}

// Output (Prettier 1.16)
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(
      bar => html`
        <p>${bar}</p>
      `
    )}
  `;
}

TypeScript/Flow

Korrekte Erkennung von `/* HTML */`-Templates (#5658 von @ikatyang)

Wir haben Unterstützung für die Formatierung von HTML-Template-Literals mit dem /* HTML */-Pseudo-Tag in Prettier 1.15 hinzugefügt, aber aufgrund eines Fehlers funktionierte es nur für JavaScript-Code. Dieses Problem wurde in Prettier 1.16 behoben.

CSS

Behebung fehlerhafter Ausgaben für Listen durch Kommentare (#5710 von @jsnajdr)

// Input
$my-list2:
  a // a
  b
  c;

// Output (Prettier 1.15)
$my-list2: a// a
  bc;

// Output (Prettier 1.16)
$my-list2: a // a
  b c;

Korrekte Behandlung von Backslashes (#5597 von @sh7dm)

// Input
.figcaption {
    .margin-top-1\/2;
    .large\:none;
}

// Output (Prettier 1.15)
.figcaption {
  .margin-top-1\ / 2;
  .large\: none;
}

// Output (Prettier 1.16)
.figcaption {
  .margin-top-1\/2;
  .large\: none;
}

MDX

Korrekte Behandlung von Inline-HTML (#5704 von @ikatyang)

<!-- Input -->
| Column 1 | Column 2 |
|---|---|
| Text | <Hello>Text</Hello> |

<!-- Output (Prettier 1.15) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16) -->
| Column 1 | Column 2            |
| -------- | ------------------- |
| Text     | <Hello>Text</Hello> |

HTML

Formatierung von Scripts mit Typ "application/ld+json" (#5642 von @ikatyang)

<!-- Input -->
<script type="application/ld+json">
  {   "json":true  }
</script>

<!-- Output (Prettier 1.15) -->
<script type="application/ld+json">
  {   "json":true  }
</script>

<!-- Output (Prettier 1.16) -->
<script type="application/ld+json">
  { "json": true }
</script>

Behandlung von `.mjml`-Dateien als HTML (#5505 von @n1ru4l)

MJML ist eine Markup-Sprache, die dieselbe Syntax wie HTML verwendet. Wir haben die Dateiendung .mjml zur Liste der Erweiterungen hinzugefügt, die als HTML erkannt werden, sodass Prettier sie formatiert.

Intelligente Anführungszeichen für Attribute (#5590 von @ikatyang)

Bisher wurden Anführungszeichen um HTML-Attributwerte immer als doppelte Anführungszeichen ausgegeben. Zur Verbesserung der Lesbarkeit werden sie nun als der Anführungszeichentyp ausgegeben, der weniger Escape-Zeichen im String erfordert, wie wir es auch für andere Strings tun.

<!-- Input -->
<div x='123"456'></div>
<div x="123'456"></div>

<!-- Output (Prettier 1.15) -->
<div x="123&quot;456"></div>
<div x="123'456"></div>

<!-- Output (Prettier 1.16) -->
<div x='123"456'></div>
<div x="123'456"></div>

Vue

Tag-Namen sind case-sensitiv (#5606 von @ikatyang)

Bisher wurden Tagnamen vor dem Abfragen der Tag-Definition beim Parsen kleingeschrieben, wodurch die <Input>-Komponente als natives <input> erkannt wurde. Dies verursachte einen Syntaxfehler bei </Input>, da <input> ein void-Element ist und solche Elemente keinen schließenden Tag haben können. Dieses Problem wurde in Version 1.16 behoben.

<!-- Input -->
<template>
  <Input></Input>
</template>

<!-- Output (Prettier 1.15) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16) -->
<template>
  <Input></Input>
</template>

Vue/Angular

Klammern hinzufügen, um unerwartetes `}}` in Interpolationen zu vermeiden (#5657 von @ikatyang)

}} darf in Interpolationen nicht verwendet werden, da es als Ende der Interpolation interpretiert wird. Prettier 1.15 gab manchmal Code aus, der diese Regel verletzte. Prettier 1.16 fügt nun Klammern hinzu, um das Auftreten von }} in Interpolationen zu verhindern.

<!-- Input -->
<p>{{ foo({ bar: {} }) }}</p>

<!-- First Output (Prettier 1.15, --no-bracket-spacing) -->
<p>{{ foo({bar: {}}) }}</p>

<!-- Second Output (Prettier 1.15, --no-bracket-spacing) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16, --no-bracket-spacing) -->
<p>{{ foo({bar: ({})}) }}</p>

Höhepunkte​

HTML​

Berücksichtigung umgebender Zeilenumbrüche (#5596 von @ikatyang)​

Allgemein​

Bessere CRLF-Handhabung (#5494 von @ikatyang)​

JavaScript​

Verbesserung des Musters für React Hooks (#5608 von @j-f1)​

Umbenennung des babylon-Parsers in babel (#5647 von @wuweiweiwu)​

Flow​

Hinzufügen des babel-flow-Parsers (#5685 von @ikatyang)​

CLI​

Hinzufügen einer --check-Flag (#5629 von @kachkaev)​

Weitere Änderungen​

Allgemein​

Behebung unerwarteter Formatierungen durch Bereichsformatierung (#5632 von @lhchavez)​

API​

Erlauben von Plugin-Instanzen im plugins-Feld der Formatierungsoptionen (#5763 von @Kingwl)​

Standalone​

Entfernung des dynamischen require()-Aufrufs im Standalone-Bundle (#5612 von @j-f1)​

TypeScript​

Korrekte Behandlung von // in TSX (#5728 von @JamesHenry)​

Entfernung redundanter Klammern um Typ-Annotationen (#5724 von @flurmbo)​

JavaScript​

something.connect() nicht als funktionale Komposition behandeln (#5739 von @makepost)​

Unterstützung für private Klassenmethoden hinzugefügt (#5637 von @existentialism)​

Korrekte Einrückung für Ausdrücke im Root-Template (#5607 von @ikatyang)​

Entfernung unnötiger Zeilenumbrüche in HTML-Template-Literals (#5771 von @ikatyang)​

TypeScript/Flow​

Korrekte Erkennung von /* HTML */-Templates (#5658 von @ikatyang)​

CSS​

Behebung fehlerhafter Ausgaben für Listen durch Kommentare (#5710 von @jsnajdr)​

Korrekte Behandlung von Backslashes (#5597 von @sh7dm)​

MDX​

Korrekte Behandlung von Inline-HTML (#5704 von @ikatyang)​

HTML​

Formatierung von Scripts mit Typ "application/ld+json" (#5642 von @ikatyang)​

Behandlung von .mjml-Dateien als HTML (#5505 von @n1ru4l)​

Intelligente Anführungszeichen für Attribute (#5590 von @ikatyang)​

Vue​

Tag-Namen sind case-sensitiv (#5606 von @ikatyang)​

Vue/Angular​

Klammern hinzufügen, um unerwartetes }} in Interpolationen zu vermeiden (#5657 von @ikatyang)​

Höhepunkte

HTML

Berücksichtigung umgebender Zeilenumbrüche (#5596 von @ikatyang)

Allgemein

Bessere CRLF-Handhabung (#5494 von @ikatyang)

JavaScript

Verbesserung des Musters für React Hooks (#5608 von @j-f1)

Umbenennung des `babylon`-Parsers in `babel` (#5647 von @wuweiweiwu)

Flow

Hinzufügen des `babel-flow`-Parsers (#5685 von @ikatyang)

CLI

Hinzufügen einer `--check`-Flag (#5629 von @kachkaev)

Weitere Änderungen

Allgemein

Behebung unerwarteter Formatierungen durch Bereichsformatierung (#5632 von @lhchavez)

API

Erlauben von Plugin-Instanzen im `plugins`-Feld der Formatierungsoptionen (#5763 von @Kingwl)

Standalone

Entfernung des dynamischen `require()`-Aufrufs im Standalone-Bundle (#5612 von @j-f1)

TypeScript

Korrekte Behandlung von `//` in TSX (#5728 von @JamesHenry)

Entfernung redundanter Klammern um Typ-Annotationen (#5724 von @flurmbo)

JavaScript

`something.connect()` nicht als funktionale Komposition behandeln (#5739 von @makepost)

Unterstützung für private Klassenmethoden hinzugefügt (#5637 von @existentialism)

Korrekte Einrückung für Ausdrücke im Root-Template (#5607 von @ikatyang)

Entfernung unnötiger Zeilenumbrüche in HTML-Template-Literals (#5771 von @ikatyang)

TypeScript/Flow

Korrekte Erkennung von `/* HTML */`-Templates (#5658 von @ikatyang)

CSS

Behebung fehlerhafter Ausgaben für Listen durch Kommentare (#5710 von @jsnajdr)

Korrekte Behandlung von Backslashes (#5597 von @sh7dm)

MDX

Korrekte Behandlung von Inline-HTML (#5704 von @ikatyang)

HTML

Formatierung von Scripts mit Typ "application/ld+json" (#5642 von @ikatyang)

Behandlung von `.mjml`-Dateien als HTML (#5505 von @n1ru4l)

Intelligente Anführungszeichen für Attribute (#5590 von @ikatyang)

Vue

Tag-Namen sind case-sensitiv (#5606 von @ikatyang)

Vue/Angular

Klammern hinzufügen, um unerwartetes `}}` in Interpolationen zu vermeiden (#5657 von @ikatyang)