Prettier 1.16: HTML-förbättringar och bättre CRLF-hantering

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Denna version förbättrar HTML-formatering och innehåller bättre CRLF-hantering, nya syntaxfunktioner samt åtgärdar flera buggar.

Höjdpunkter

HTML

Respektera omgivande radbrytningar (#5596 by @ikatyang)

Tidigare placerade Prettier alltid element på en enda rad om de inte överskred printWidth, men detta fungerar inte för element som används som if-else-block eller är avsedda att innehålla flera objekt. För att lösa detta respekterar vi nu omgivande radbrytningar för alla element eftersom det inte finns något tillförlitligt sätt att avgöra om de används på dessa sätt.

<!-- 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>

Allmänt

Bättre CRLF-hantering (#5494 by @ikatyang)

Du kanske har märkt några konstiga formateringsproblem som endast uppstod på Windows. Många av dessa problem orsakades av vår hantering av CR-LF-radslut. I denna version har vi löst dessa problem genom att normalisera radbrytningar både före och efter formatering.

JavaScript

Förbättra mönstret för React hooks (#5608 by @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]);
}

Byt namn på babylon-parser till babel (#5647 by @wuweiweiwu)

Babels parser, babylon, bytte namn till @babel/parser i Babel 7. Vi har även bytt namn på vår babylon-parser till babel för att minska förvirring.

Namnet babylon är nu föråldrat men fungerar fortfarande.

Om du behöver ändra din konfiguration på grund av detta, ta en stund att läsa [vår dokumentation om parser-alternativet], särskilt noteringen längst ner.

Flow

Lägg till babel-flow-parser (#5685 by @ikatyang)

Både babel- och flow-parsers stödjer Flow-syntax som standard, men det finns några gränsfall där Flow-syntax är tvetydig. Som standard tolkar Babels Flow-parser tvetydig kod som vanlig JS, medan den inbyggda Flow-parsern tolkar den som Flow-syntax. För att lösa detta har vi lagt till babel-flow-parseralternativet, som använder Babels parser men föredrar Flow-syntax när tvetydigheter uppstår.

// 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

Lägg till --check-flagga (#5629 by @kachkaev)

Att skicka --list-different till prettier-CLI-kommandot gör att Prettier avslutas med en felkod om en eller flera av filerna inte har formaterats med Prettier. Detta fungerar bra, men det ger ingen information i utdata förutom filerna som inte är korrekt formaterade. Detta är inte särskilt användarvänligt för nya bidragsgivare och användare i allmänhet, så vi har lagt till ett --check -alternativ som ger mer mänskligvänlig utdata.

# 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?


Andra ändringar

Allmänt

Åtgärda oväntad formatering orsakad av range format (#5632 by @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

Tillåt plugin-instanser i plugins-fältet för format-alternativ (#5763 by @Kingwl)

Tidigare tilläts plugin-instanser inte i plugins-fältet för format-alternativ, men de borde tillåtas. Vi har åtgärdat detta i Prettier 1.16.

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

Fristående version

Ta bort dynamiskt require()-anrop i fristående bundle (#5612 by @j-f1)

Tidigare fanns ett dynamiskt require()-anrop i standalone.js-filen som är designad för användning i webbläsare. Det användes på ett sätt där det inte faktiskt anropades, men det fick verktyg som webpack att ge en varning. Vi justerade byggskriptet för att ta bort detta require()-anrop i den fristående paketeringen i Prettier 1.16.

TypeScript

Hantera // korrekt i TSX (#5728 av @JamesHenry)

Tidigare kunde placering av // som ett barn till ett JSX-element i TypeScript leda till ett fel eftersom det tolkades som en kommentar. Prettier 1.16 åtgärdar detta 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>;

Ta bort onödiga parenteser runt typannotationer (#5724 av @flurmbo)

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

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

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

JavaScript

Behandla inte something.connect() som funktionell komposition (#5739 av @makepost)

En speciell formatering för connect()-anrop introducerades för att förbättra formateringen av Redux för flera versioner sedan, men det finns många andra användningsområden för funktioner som heter connect som inte bör formateras på det sättet. Eftersom de flesta av dessa fall involverade en connect-metod, behandlar vi inte längre foo.connect()-anrop som funktionell 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);

Lägg till stöd för privata metoder i klasser (#5637 av @existentialism)

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

// Output (Prettier 1.15)
// SyntaxError

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

Korrigera indrag för uttryck i rotmall (#5607 av @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
`;
}

Ta bort onödiga radbrytningar från HTML-mallliteraler (#5771 av @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

Känna igen /* HTML */-mallar korrekt (#5658 av @ikatyang)

Vi lade till stöd för formatering av HTML-mallliteraler med pseudotaggen /* HTML */ i Prettier 1.15, men på grund av en bugg fungerade det bara för JavaScript-kod. Vi har åtgärdat detta problem i Prettier 1.16.

CSS

Åtgärda trasig utdata för listor orsakad av kommentarer (#5710 av @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;

Hantera omvänt snedstreck korrekt (#5597 av @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

Hantera inline-HTML korrekt (#5704 av @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

Formatera skript med typen "application/ld+json" (#5642 av @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>

Behandla .mjml-filer som HTML (#5505 av @n1ru4l)

MJML är ett märkspråk som använder samma syntax som HTML. Vi lade till filändelsen .mjml i listan över ändelser som erkänns som HTML, så Prettier kommer att formatera den.

Smarta citattecken för attribut (#5590 av @ikatyang)

Tidigare skrevs citattecken runt HTML-attributvärden alltid ut som dubbla citattecken. För att förbättra läsbarheten skrivs de nu ut som den citattyp som resulterar i färre escape-tecken i strängen, precis som vi gör för andra strängar.

<!-- 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

Tagg-namn är skiftlägeskänsliga (#5606 av @ikatyang)

Tidigare gjorde vi om tagg-namn till gemener innan vi hämtade taggdefinitioner under tolkning, vilket fick komponenten <Input> att erkännas som en inbyggd <input>. Detta gav ett syntaxfel när </Input> påträffades eftersom <input> är ett tomtelement, och tomtelement kan inte ha avslutande element. Vi har åtgärdat detta problem i 1.16.

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

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

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

Vue/Angular

Lägg till parenteser för att undvika oväntade }} i interpolationer (#5657 av @ikatyang)

}} får inte användas i en interpolering eftersom det tolkas som interpolationens avslut. Prettier 1.15 kunde ibland generera kod som bröt mot denna regel. Prettier 1.16 lägger nu till parenteser för att förhindra att }} förekommer i interpoleringar.

<!-- 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>