Hoppa till huvudinnehållet

Prettier 1.15: Stöd för HTML, Vue, Angular och MDX

· 30 min att läsa
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 release lägger till stöd för HTML, Vue, Angular och MDX. Den respekterar även dekoratorposition, lägger till ett alternativ för JSX-enkelfnuttar, tillåter parser-härledning via shebang, lägger till stöd för flera nya syntaxfunktioner och har några formateringsjusteringar.

Höjdpunkter

HTML/Vue/Angular

Stöd för HTML, Vue och Angular (#5259 av @ikatyang, #4753 av @evilebottnawi, #2083 av @azz)

Prettier kan nu formatera HTML-, Vue- och Angular-filer! 🎉

Vi använder angular-html-parser, en HTML-parser extraherad från Angular, för att tolka dessa HTML- och HTML-mallfiler så den bör vara mycket kompatibel med HTML-specifikationen tack vare Angular-teamet.

Några höjdpunkter:

Blankteckenkänslig formatering

Som du kanske märker i dagligt HTML-arbete ger inte följande två fall samma resultat:

htmloutput
with spaces1<b> 2 </b>31 2 3
without spaces1<b>2</b>3123

Detta händer eftersom blanktecken är betydelsebärande i inline-element.

Av denna anledning kan vi inte säkert formatera

<a href="https://prettier.io/">Prettier is an opinionated code formatter.</a>

till

<a href="https://prettier.io/">
Prettier is an opinionated code formatter.
</a>

eftersom det kan ändra det visade resultatet i webbläsaren.

Istället för att bryta din kod eller inte göra något, introducerar vi blankteckenkänslig formatering, som:

  • följer standardvärdet för CSS display för varje element för att avgöra om blanktecknet inuti är betydelsebärande,

  • och radbryter taggarna på ett sätt som undviker att lägga till eller ta bort betydelsebärande blanktecken.

Exempel:

<!-- <span> is an inline element, <div> is a block element -->

<!-- input -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<div class="voluptatem architecto at">Architecto rerum architecto incidunt sint.</div>

<!-- output -->
<span class="dolorum atque aspernatur"
>Est molestiae sunt facilis qui rem.</span
>
<div class="voluptatem architecto at">
Architecto rerum architecto incidunt sint.
</div>

Vi tillåter även magiska kommentarer (t.ex. <!-- display: block -->) för att tala om för Prettier hur element ska formateras eftersom CSS-display kan ändras:

<!-- input -->
<!-- display: block -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>

<!-- output -->
<!-- display: block -->
<span class="dolorum atque aspernatur">
Est molestiae sunt facilis qui rem.
</span>

Det finns även ett alternativ för global känslighet för blanktecken ifall du vill ha maximal säkerhet eller helt enkelt inte bryr dig om det blanktecknet:

--html-whitespace-sensitivity (standardvärde css)

  • css - Respekterar standardvärdet för CSS display.

  • strict - Allt blanktecken anses vara betydelsebärande.

  • ignore - Allt blanktecken anses vara obetydligt.

Automatisk parser-härledning

Prettier använder filnamn för att härleda vilken parser som ska användas. Här är standardmönstren för HTML, Vue och Angular:

  • *.html: --parser html

  • *.component.html: --parser angular

  • *.vue: --parser vue

Se till att ditt filnamn matchar rätt parser (särskilt för Angular-användare); om det inte gör det måste du manuellt ange vilken parser som ska användas via fältet overrides.

Observera att ramverksspecifik formatering inte aktiveras i --parser html.

HTML-malliteral i JavaScript

Denna release lägger även till stöd för html-malltaggen (eller en "tagg"-kommentar som innehåller HTML):

  • html`code`

  • /* HTML */ `code`

// input
const foo = html`<div class="voluptatem architecto at">Architecto rerum ${interpolation} architecto incidunt sint.</div>`;

// output
const foo = html`
<div class="voluptatem architecto at">
Architecto rerum ${interpolation} architecto incidunt sint.
</div>
`;
Vue-formatering

Följande Vue-specifika syntaxstrukturer stöds:

  • interpolation

    • {{ something }}
  • attribut

    • v-something
    • :something
    • @something
    • v-for
    • slot-scope
Angular-formatering

Följande Angular-specifika syntaxstrukturer stöds:

  • interpolation

    • {{ something }}
  • attribut

    • (something)
    • [something]
    • [(something)]
    • *something
  • infogad mall

    • @Component({ template: `<div>Hello World</div>` })

MDX

Stöd för MDX (#4975 av @ikatyang)

MDX är ett markdown-tillägg som låter dig använda JSX för att bygga dokumentation. Du kan nu använda Prettier för att formatera det, och vi formaterar både Markdown- och JS-delarna åt dig!

<!-- Input -->

import {
colors } from
'./theme'
import Palette from './components/palette'

# Colors

<Palette colors={
colors}
/>

<!-- Output -->

import { colors } from "./theme";
import Palette from "./components/palette";

# Colors

<Palette colors={colors} />

JavaScript

Förenkla else-gren för nästlade ternära uttryck (#5039 av @suchipi, #5272 av @duailibe, #5333 av @ikatyang)

Tidigare indenterades nästlade ternära uttryck alltid, vilket ledde till ökande indentering för djupt nästlade uttryck. För att lösa detta har vi förenklat else-grenen i ett sätt som liknar hur if..else if..else-block formateras.

// Input
const example1 =
someValue === 'a' ? 'hello world, branch a'
: someValue === 'b' ? 'hello world, branch a && b'
: someValue === 'c' ? 'hello world, branch a && b && c'
: someValue === 'd' ? 'hello world, branch a && b && c && d'
: null;

const example2 =
someValue === 'a'
? someValue === 'b'
? someValue === 'c'
? 'hello world, branch a && b && c'
: 'hello world, branch a && b && !c'
: 'hello world, branch a && !b'
: null;

// Output (Prettier 1.14)
const example1 =
someValue === "a"
? "hello world, branch a"
: someValue === "b"
? "hello world, branch a && b"
: someValue === "c"
? "hello world, branch a && b && c"
: someValue === "d"
? "hello world, branch a && b && c && d"
: null;

const example2 =
someValue === "a"
? someValue === "b"
? someValue === "c"
? "hello world, branch a && b && c"
: "hello world, branch a && b && !c"
: "hello world, branch a && !b"
: null;

// Output (Prettier 1.15)
const example1 =
someValue === "a"
? "hello world, branch a"
: someValue === "b"
? "hello world, branch a && b"
: someValue === "c"
? "hello world, branch a && b && c"
: someValue === "d"
? "hello world, branch a && b && c && d"
: null;

const example2 =
someValue === "a"
? someValue === "b"
? someValue === "c"
? "hello world, branch a && b && c"
: "hello world, branch a && b && !c"
: "hello world, branch a && !b"
: null;

Behåll dekoratorer infogade om de var infogade i källkoden (#5188 av @duailibe)

Innan Prettier 1.14 placerade vi alltid dekoratorer på samma rad som det de dekorerade.

Vi fick feedback från vissa användare att detta inte var idealiskt, så i Prettier 1.14 placerades dekoratorer alltid på en separat rad.

Men vi fick även feedback från andra användare att denna formatering inte var optimal i alla fall.

Vi strävar efter konsekvent formatering när det är möjligt, så vi försökte hitta en heuristik för när dekoratorer ska vara infogade eller på separata rader.

Efter lång diskussion i #4924 kom vi fram till att det inte finns något tillförlitligt sätt att avgöra detta, så i Prettier 1.15 respekterar vi användarens ursprungliga stil. Om de hade radbrytning mellan dekoratorn och det den dekorerar behåller vi det; annars inte.

// Input
class Hello {
@decorator inline = 'value';

@decorator
ownLine = 'value';

@decorator({
hello: 'world'
}) multiLine = 'value';
}

// Output (Prettier 1.14)
class Hello {
@decorator
inline = "value";

@decorator
ownLine = "value";

@decorator({
hello: "world"
})
multiLine = "value";
}

// Output (Prettier 1.15)
class Hello {
@decorator inline = "value";

@decorator
ownLine = "value";

@decorator({
hello: "world"
})
multiLine = "value";
}

Respektera ursprunglig dekoratorordning (#5207 av @duailibe)

Dekoratorer är fortfarande inte del av den officiella ECMA-standarden, och var dekoratorer på exporterade klasser ska placeras är en fråga som ännu inte är avgjord. För att hjälpa förslagsförfattare att få feedback har Babel 7 lagt till stöd för dekoratorer både före och efter de exporterade klasserna. Prettier 1.15 lägger till stöd för dem och respekterar var du placerar dekoratorerna. (När specifikationen standardiseras kommer vi ändra detta för att bli konsekventa och inte respektera användarinput.)

// decorator before export
@decorator export class Bar {}

// decorator after export
export @decorator class Foo {}

Förbättrad objektbrytningsheuristik (#5205 av @j-f1)

Tidigare bröt Prettier automatiskt upp objekt på flera rader om de inte fick plats inom breddgränsen, och behöll radbrytningar om de fanns i källkoden. Detta gjorde det svårt att "fälla ihop" objekt manuellt. Eftersom Prettier vill eliminera manuell formatering har vi ändrat beteendet till att endast kontrollera radbrytning mellan { och första nyckeln:

// Input
const data = { foo: 'bar',
baz: 'quux'
}
/* You’d get this format by deleting the newline after the `{` */

// Output (Prettier 1.14)
const data = {
foo: 'bar',
baz: 'quux'
}

// Output (Prettier 1.15)
const data = { foo: 'bar', baz: 'quux' }

JSX

Alternativ för enkla citattecken i JSX (#4798 av @smirea)

Efter stor efterfrågan från communityn tillkommer i Prettier 1.15 ett alternativ för att använda enkla citattecken i JSX: --jsx-single-quote (eller jsxSingleQuote i konfigurationen/API:t).

// with --jsx-single-quote
<div class='hello'>world</div>

// without --jsx-single-quote
<div class="hello">world</div>

Hantera JSX-text korrekt (#5006 av @yuliaHope)

Prettier 1.14 introducerade av misstag några mycket olyckliga radbrytningar i JSX. Dessa fall har nu åtgärdats.

// Input
<div>
Sales tax estimated using a rate of {salesTax * 100}%.
</div>;
<BasicText light>(avg. {value}/5)</BasicText>;
<Link to={orgURL(this.props.org.name)}>
Go to {this.props.org.name}'s profile
</Link>;

// Output (Prettier 1.14)
<div>
Sales tax estimated using a rate of {salesTax * 100}
%.
</div>;
<BasicText light>
(avg. {value}
/5)
</BasicText>;
<Link to={orgURL(this.props.org.name)}>
Go to {this.props.org.name}
's profile
</Link>;

// Output (Prettier 1.15)
<div>Sales tax estimated using a rate of {salesTax * 100}%.</div>;
<BasicText light>(avg. {value}/5)</BasicText>;
<Link to={orgURL(this.props.org.name)}>
Go to {this.props.org.name}'s profile
</Link>;

Flow

Stöd för inexact (#5304 av @jbrown215, #5356 av @existentialism)

Flow-teamet planerar att behandla alla objekttyper som exakta som standard i framtiden, så de introducerade en ny syntax för att indikera om en objekttyp är inexakt. Denna syntax stöds nu i Prettier 1.15.

type T = {
a: number,
...
}

Bryt inte Flow-typecast-kommentarer (#5280, #5290 av @swac)

Tidigare kunde parenteser som omger Flow-typecast-kommentarer ibland tas bort, vilket bröt Flows kommentarssyntax. Detta problem har åtgärdats i Prettier 1.15.

// Input
(obj /*: Class */).property

// Output (Prettier 1.14)
obj /*: Class */.property;

// Output (Prettier 1.15)
(obj /*: Class */).property;

Markdown

Bevara matematiksyntax (#5050, #5220 av @ikatyang)

Tidigare förstördes vissa av remark-maths syntaxstrukturer eftersom vi behandlade dem som vanlig text. De bevaras nu i Prettier 1.15 så du kan använda matematiksyntax säkert.

$inline-math$

$$
block-math
$$

Andra ändringar

API/CLI

Härled parser via shebang vid saknad filändelse (#5149 av @haggholm)

Tidigare använde vi filnamn och filändelse för att härleda vilken parser som skulle användas, men ofta saknar CLI-skript filändelse så användaren var tvungen att ange parsern manuellt. I Prettier 1.15 kommer vi, när vi formaterar en fil utan filändelse, titta på filens första rad. Om det finns en shebang kommer vi använda den för att härleda vilken parser som ska användas.

# Input
$ cat bin/example
#!/usr/bin/env node
  require ( "../src/cli" ) . run ( )

$ prettier bin/example

# Output (Prettier 1.14)
[error] No parser could be inferred for file: bin/example

# Output (Prettier 1.15)
#!/usr/bin/env node
require("../src/cli").run();

Ny trim-kommando för att rensa blanktecken på aktuell rad (#4772 av @warrenseine)

Tidigare fanns det i plugin-API:t inget sätt att ta bort aktuell rads indrag. Det gick att använda vissa lösningar för att uppnå samma mål, men det fanns ingen tillförlitlig lösning, så vi introducerade en ny trim-kommando för att rensa blanktecken på ett tillförlitligt sätt.

Färgstarka valideringsmeddelanden (#5020, #5057 av @ikatyang)

Tidigare fanns det ingen färgmarkering för valideringsfel, vilket gjorde det svårt att se vilket alternativ som fått ett ogiltigt värde och vilka giltiga värden som fanns. I Prettier 1.15 bör du direkt kunna förstå vad som händer.

# Input
$ prettier filename.js --trailing-comma wow

# Output (Prettier 1.14)
[error] Invalid ``--trailing-comma`` value. Expected "all", "es5" or "none", but received `"wow"`.

# Output (Prettier 1.15)
[error] Invalid --trailing-comma value. Expected "all", "es5" or "none", but received "wow".

Möjliggör för printer att förbearbeta AST:en (#5041 av @ikatyang)

Ibland behöver vi transformera AST:en för att göra den enklare att skriva ut. Tidigare gjordes detta i parsern, men detta exponerade också interna detaljer för externa användare som kanske försökte bygga en anpassad parser. I Prettier 1.15 kan du nu använda printer.preprocess för att förbearbeta AST:en utan att exponera några interna detaljer i API:t.

interface Printer {
preprocess(ast: AST, options: object): AST;
}

Bättre felmeddelande för konfigurationsformat som inte stöds (#4969 av @ikatyang)

Tidigare kunde inläsning av en konfigurationsfil i ett format som inte stöds ge ett felmeddelande som såg ut som en bugg i Prettier, så vi förbättrade meddelandet i Prettier 1.15.

# Input
$ prettier filename.js --config .prettierrc.wow

# Output (Prettier 1.14)
[error] Invalid configuration file: Cannot read property 'sync' of undefined

# Output (Prettier 1.15)
[error] Invalid configuration file: No sync loader specified for extension ".wow"

Lägg till alternativ för att styra radslut (#5327 av @kachkaev)

Tidigare respekterade Prettier alltid dina ursprungliga radslut, vilket oftast fungerar bra. Men när flera personer samarbetar i ett projekt från olika operativsystem, kan det lätt bli blandade radslut i centrala git-lagringsplatsen vilket orsakar stora diffar. Prettier 1.15 lägger till alternativet --end-of-line <auto|lf|crlf|cr> för att hantera dessa problem med radslut.

JavaScript

Behandla enstjärniga kommentarer som JSDoc (#5206 av @j-f1, #5330 av @lydell)

Prettier kommer nu korrekt indrag JSDoc-liknande kommentarer med endast en * på första raden (/* vs /**) när kommentarens indrag ändras:

// Input
if (true) {
/*
* Oh no
*/
}

// Output (Prettier 1.14)
if (true) {
/*
* Oh no
*/
}

// Output (Prettier 1.15)
if (true) {
/*
* Oh no
*/
}

Korrigera parenteser för blandade exponentierings-/modulo-uttryck (#5243 av @bakkot)

Tidigare togs parenteser för blandade exponentierings-/modulo-uttryck felaktigt bort, men vi har fixat detta i Prettier 1.15.

// Input
const val = (n % 10) ** 2

// Output (Prettier 1.14)
const val = n % 10 ** 2;

// Output (Prettier 1.15)
const val = (n % 10) ** 2;

Skriva ut kommentarer korrekt i try..finally (#5252 av @aquibm)

I tidigare versioner skrevs vissa kommentarer i ett try-finally-block ut i fel ordning. Prettier skriver nu ut dem korrekt.

// Input
// comment 1
try {
// comment 2
}
// comment 3
finally // comment 4
{
// comment 5
}

// Output (Prettier 1.14)
// comment 1
try {
// comment 2
} finally { // comment 4
// comment 3
// comment 5
}

// Output (Prettier 1.15)
// comment 1
try {
// comment 2
} finally {
// comment 3
// comment 4
// comment 5
}

Placera kommentarer i catch-satser på rätt ställe (#5202 av @duailibe)

Kommentarer i catch-satser skrivs nu ut på en egen rad precis som andra satser.

// Input
try {} catch (
// comment
e
) {}

// Output (Prettier 1.14)
try {
} catch (// comment
e) {}

// Output (Prettier 1.15)
try {
} catch (
// comment
e
) {}

Infoga argumentet om det är en pilfunktion med villkorsuttryck som kropp (#5209 av @duailibe)

Det finns ingen anledning att lägga till extra indragsnivå för ett funktionsanropsargument som är en pilfunktion med villkorsuttryck som kropp. Vi infogar dem nu i Prettier 1.15.

// Input
x.then(() => a ?
veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong:
veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);

// Output (Prettier 1.14)
x.then(
() =>
a
? veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
: veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);

// Output (Prettier 1.15)
x.then(() =>
a
? veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
: veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);

Åtgärda oväntat indrag i variabeldeklaration orsakat av kommentarer (#5190 av @duailibe)

I tidigare versioner orsakade kommentarer i variabeldeklarationer att deklarationer skrevs utan indrag, men detta har åtgärdats i Prettier 1.15.

// Input
const // Comment
a = 1;

// Output (Prettier 1.14)
const // Comment
a = 1;

// Output (Prettier 1.15)
const // Comment
a = 1;

Ta inte bort parenteser för ternära uttryck i valfria medlemsuttryck (#5179 av @existentialism)

Prettier 1.14 tog felaktigt bort parenteser runt ternära operatorer när de förekom inom valfria medlemsuttryck (?.). Dessa fall hanteras nu korrekt i Prettier 1.15.

// Input
(a ? b : c)?.d;

// Output (Prettier 1.14)
a ? b : c?.d;

// Output (Prettier 1.15)
(a ? b : c)?.d;

Escapa ${ liksom backticks i GraphQL-taggar (#5137 av @lydell)

Tidigare avescapades interpolliknande strängar felaktigt i inbäddad GraphQL, vilket fick JavaScript att behandla dem som interpolation. De escapes nu korrekt i Prettier 1.15.

// Input
const schema = gql`
type Project {
"Pattern: \`\${project}\`"
pattern: String
}
`;

// Output (Prettier 1.14)
const schema = gql`
type Project {
"Pattern: \`${project}\`"
pattern: String
}
`;

// Output (Prettier 1.15)
const schema = gql`
type Project {
"Pattern: \`\${project}\`"
pattern: String
}
`;

Ta inte bort citattecken i nycklar om de inte är ES5-kompatibla (#5157 av @koba04)

Tidigare tog Prettier bort citattecken i nycklar om de inte behövdes i ES2015, vilket gjorde utdata inkompatibelt med ES5. Prettier 1.15 tar bara bort dem om de inte behövs i ES5.

// Input
var obj = {
"𐊧": 'ok',
𐊧: 'ok'
};

// Output (Prettier 1.14)
var obj = {
𐊧: "ok",
𐊧: "ok"
};

// Output (Prettier 1.15)
var obj = {
"𐊧": "ok",
𐊧: "ok"
};

Krama inte argument om det andra argumentet i en funktion är ett ternärt uttryck (#5151 av @onurtemizkan)

Vi har vissa specialfall som kramar funktionsanropsargument om det första är en funktion och det andra inte är ett komplext uttryck, men vi behandlade ternära uttryck som icke-komplexa. De kan faktiskt vara komplexa, så vi har ändrat detta i Prettier 1.15.

// Input
func(
() => { thing(); },
something(longArgumentName, anotherLongArgumentName) ? someOtherThing() : somethingElse(true, 0)
);

// Output (Prettier 1.14)
func(() => {
thing();
}, something(longArgumentName, anotherLongArgumentName) ? someOtherThing() : somethingElse(true, 0));

// Output (Prettier 1.15)
func(
() => {
thing();
},
something(longArgumentName, anotherLongArgumentName)
? someOtherThing()
: somethingElse(true, 0)
);

Lägg till stöd för timeout som siffror i testfunktioner (#5085 av @j-f1)

Detta bevarar Prettiers speciella formatering för testfunktioner när en timeout (nummer) skickas som tredje parameter:

// Input
it('Handles at least 10k untracked files without failing', async () => {
hello()
}, 25000)

// Output (Prettier 1.14)
it(
"Handles at least 10k untracked files without failing",
async () => {
hello();
},
25000
);

// Output (Prettier 1.15)
it('Handles at least 10k untracked files without failing', async () => {
hello()
}, 25000)

Formatera beforeEach-lika anrop som vanliga funktionsanrop (#5011 av @ericsakmar)

Tidigare klämdes argument i beforeEach felaktigt ihop. Vi har åtgärdat detta i Prettier 1.15.

// Input
beforeEach(done =>
startService()
.pipe(tap(service => (instance = service)))
.subscribe(() => done()),
);

// Output (Prettier 1.14)
beforeEach(done =>
startService()
.pipe(tap(service => (instance = service)))
.subscribe(() => done()));

// Output (Prettier 1.15)
beforeEach(done =>
startService()
.pipe(tap(service => (instance = service)))
.subscribe(() => done())
);

Skriv pipeline-operatörens inledande kommentar på egen rad (#5015 av @flxwu)

I Prettier 1.14 orsakade en kommentar framför en pipeline-operator att högerargumentet inte indenterades. Detta är nu åtgärdat i Prettier 1.15.

// Input
function pipeline() {
0
// Comment
|> x
}

// Output (Prettier 1.14)
function pipeline() {
0
|> // Comment
x;
}

// Output (Prettier 1.15)
function pipeline() {
0 |>
// Comment
x;
}

Bevara hängande kommentarer i new-uttryck (#5017 av @flxwu)

Att skicka en kommentar istället för ett uttryck till ett new-anrop bevaras nu istället för att dras ur parenteserna.

// Input
new Thing(/* comment */)

// Output (Prettier 1.14)
new Thing /* comment */();

// Output (Prettier 1.15)
new Thing(/* comment */);

Ta bort onödig ASI-skydd för bind-uttryck (#4970 av @TitanSnow)

Onödiga semikolon för bind-uttryck tas nu bort med --no-semi i Prettier 1.15.

// Input
a::b.c

// Output (Prettier 1.14)
;a::b.c

// Output (Prettier 1.15)
a::b.c

Ta inte bort nödvändiga parenteser i bind-uttryck (#4964 av @TitanSnow)

Nödvändiga parenteser i bind-uttryck bevaras nu i Prettier 1.15.

// Input
a::(b.c());

// Output (Prettier 1.14)
a::b.c();

// Output (Prettier 1.15)
a::(b.c());

Fixa indentering för ternär i funktionsanrop (#4368 av @malcolmsgroves)

Logiska uttryck i en ternär inuti ett funktionsanrop indenteras nu korrekt.

// Input
fn(
bifornCringerMoshedPerplexSawder,
askTrovenaBeenaDependsRowans,
glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
anodyneCondosMalateOverateRetinol // <--
? annularCooeedSplicesWalksWayWay
: kochabCooieGameOnOboleUnweave
);

// Output (Prettier 1.14)
fn(
bifornCringerMoshedPerplexSawder,
askTrovenaBeenaDependsRowans,
glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
anodyneCondosMalateOverateRetinol // <--
? annularCooeedSplicesWalksWayWay
: kochabCooieGameOnOboleUnweave
);

// Output (Prettier 1.15)
fn(
bifornCringerMoshedPerplexSawder,
askTrovenaBeenaDependsRowans,
glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
anodyneCondosMalateOverateRetinol // <--
? annularCooeedSplicesWalksWayWay
: kochabCooieGameOnOboleUnweave
);

Flytta inte kommentarer i import-uttryck (#5016 av @ericsakmar)

Kommentarer i import-uttryck flyttas inte längre utanför import-uttrycket.

// Input
import x, {
// comment
y
} from 'z';


// Output (Prettier 1.14)
import x, { y } from "z";
// comment

// Output (Prettier 1.15)
import x, {
// comment
y
} from "z";

Fixa instabil while-kommentar (#5251 av @jaideng123)

Kommentarer i while-loopar formateras nu korrekt så att de inte behöver formateras två gånger för stabil utdata.

// Input
while(
true
// Comment
) {}

// First Output (Prettier 1.14)
while (true) // Comment
{}

// Second Output (Prettier 1.14)
while (
true // Comment
) {}

// First & Second Output (Prettier 1.15)
while (
true
// Comment
) {}

Stabil formatering av kommentarer mellan funktionsdeklaration och kropp (#5250 av @jaideng123)

Kommentarer mellan funktionsdeklaration och funktionskropp behöver nu inte formateras två gånger för slutresultat.

// Input
function foo() // this is a function
{
return 42
}

// First Output (Prettier 1.14)
function foo() { // this is a function
return 42;
}

// Second Output (Prettier 1.14)
function foo() {
// this is a function
return 42;
}

// First & Second Output (Prettier 1.15)
function foo() {
// this is a function
return 42;
}

JSX

Bryt inte logiska uttryckskedjor i JSX (#5092 av @duailibe)

Onödiga indrag för logiska uttryckskedjor i JSX förhindras nu.

// Input
const TestComponent = () => {
return (
<>
{cats && memes && (
<Foo bar><Trololol /></Foo>
)}
</>
);
}

// Output (Prettier 1.14)
const TestComponent = () => {
return (
<>
{cats &&
memes && (
<Foo bar>
<Trololol />
</Foo>
)}
</>
);
};

// Output (Prettier 1.15)
const TestComponent = () => {
return (
<>
{cats && memes && (
<Foo bar>
<Trololol />
</Foo>
)}
</>
);
};

Ersätt inte icke-brytbara mellanslag med vanliga (#5165 av @vjeux, #5334 av @ikatyang)

Tidigare behandlades icke-brytbara mellanslag som vanliga, vilket ledde till att de ersattes med vanliga mellanslag. Detta är nu åtgärdat i Prettier 1.15.

(· representerar ett icke-brytbart mellanslag)

// Input
function OhMyWhitespace() {
return (
<Dialog>
<p>
Supprimer l’objectif «·{goal.name}·»·?
</p>
</Dialog>
)
}

// Output (Prettier 1.14)
function OhMyWhitespace() {
return (
<Dialog>
<p>
Supprimer l’objectif «
{goal.name}
·»·?
</p>
</Dialog>
);
}

// Output (Prettier 1.15)
function OhMyWhitespace() {
return (
<Dialog>
<p>Supprimer l’objectif «·{goal.name}·»·?</p>
</Dialog>
);
}

Bryt inte enkla JSX-öppningstaggar (#5078 av @duailibe)

Enkla JSX-öppningstaggar bryts inte längre över flera rader.

// Input
function HelloWorld() {
const listItemText = (
<ListItemText
primary={
<PrimaryText>{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
}
/>
);
}

// Output (Prettier 1.14)
function HelloWorld() {
const listItemText = (
<ListItemText
primary={
<PrimaryText
>{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
}
/>
);
}

// Output (Prettier 1.15)
function HelloWorld() {
const listItemText = (
<ListItemText
primary={
<PrimaryText>{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
}
/>
);
}

Fixa regression för pilfunktion i JSX-uttryck (#5063 av @ikatyang)

// Input
<div className="search-filter-chips">
{scopes.filter(scope => scope.value !== "").map((scope, i) => (
<FilterChip
query={this.props.query}
onFilterChosen={this.onSearchScopeClicked}
/>
))}
</div>;

// Output (Prettier 1.14)
<div className="search-filter-chips">
{scopes.filter(scope => scope.value !== "").map((scope, i) => (
<FilterChip
query={this.props.query}
onFilterChosen={this.onSearchScopeClicked}
/>
))}
</div>;

// Output (Prettier 1.15)
<div className="search-filter-chips">
{scopes
.filter(scope => scope.value !== "")
.map((scope, i) => (
<FilterChip
query={this.props.query}
onFilterChosen={this.onSearchScopeClicked}
/>
))}
</div>;

Flow

Inlinea generiska typer med enstaka identifierare (#5066 av @duailibe)

Generiska typer med enstaka identifierare inlineas nu alltid.

// Input
const longVariableName: Array<number> = this.foo.bar.baz.collider.body.vertices.reduce();

// Output (Prettier 1.14)
const longVariableName: Array<
number
> = this.foo.bar.baz.collider.body.vertices.reduce();

// Output (Prettier 1.15)
const longVariableName: Array<number> = this.foo.bar.baz.collider.body.vertices.reduce();

Inlinea inte alltid klasser i extends (#5244 av @aquibm)

Klasser i extends bryts nu korrekt över flera rader.

// Input
declare interface ExtendsMany extends Interface1, Interface2, Interface3, Interface4, Interface5, Interface6, Interface7 {
x: string;
}

// Output (Prettier 1.14)
declare interface ExtendsMany
extends Interface1, Interface2, Interface3, Interface4, Interface5, Interface6, Interface7 {
x: string;
}

// Output (Prettier 1.15)
declare interface ExtendsMany
extends Interface1,
Interface2,
Interface3,
Interface4,
Interface5,
Interface6,
Interface7 {
x: string;
}

Lägg inte till onödiga parenteser för async-funktion i export default (#5303 av @jbrown215)

Onödiga parenteser runt export default async function tas nu bort. Felet uppstod endast vid användning av flow-parsern.

// Input
export default async function foo() {};

// Output (Prettier 1.14)
export default (async function foo() {});

// Output (Prettier 1.15)
export default async function foo() {}

TypeScript

Lägg till ASI-skydd för non-null-assertion (#5262 av @duailibe)

Nödvändiga semikolon för non-null-assertions kommer inte att tas bort i --no-semi-läge.

// Input
const el = ReactDOM.findDOMNode(ref)
;(el as HTMLElement)!.style.cursor = 'pointer'

// Output (Prettier 1.14)
const el = ReactDOM.findDOMNode(ref)
(el as HTMLElement)!.style.cursor = "pointer"

// Output (Prettier 1.15)
const el = ReactDOM.findDOMNode(ref)
;(el as HTMLElement)!.style.cursor = "pointer"

Lägg inte till extra semikolon för methodsignaturer när prettier-ignore används (#5160 av @onurtemizkan)

Extra semikolon för methodsignaturer tas bort i Prettier 1.15.

// Input
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
// prettier-ignore
addEventListener(): void;
addEventListener(type: string): void;
}

// Output (Prettier 1.14)
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
// prettier-ignore
addEventListener(): void;;
addEventListener(type: string): void;
}

// Output (Prettier 1.15)
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
// prettier-ignore
addEventListener(): void;
addEventListener(type: string): void;
}

Skriv inte ut ogiltiga parenteser för destructuring med standardvärde (#5096 av @ikatyang)

Tidigare skrev Prettier ut ogiltiga parenteser för destructuring med standardvärde. Detta har åtgärdats i Prettier 1.15.

// Input
({ prop: toAssign = "default" } = { prop: "propval" });

// Output (Prettier 1.14)
({ prop: (toAssign = "default") } = { prop: "propval" });

// Output (Prettier 1.15)
({ prop: toAssign = "default" } = { prop: "propval" });

Skriv inte ut semikolon för klassegenskaper med modifiers i --no-semi-läge (#5083 av @ikatyang)

I Prettier 1.14 lades semikolon till i slutet av en klassegenskap när nästa egenskap hade modifiers, men dessa semikolon behövdes inte. Onödiga semikolon tas bort i Prettier 1.15.

// Input
class Reader {
private [kBuffer]: Buffer
private [kOffset]: number
}

// Output (1.14)
class Reader {
private [kBuffer]: Buffer;
private [kOffset]: number
}

// Output (1.15)
class Reader {
private [kBuffer]: Buffer
private [kOffset]: number
}

Ta inte bort parenteser för komplexa noder i ClassExpression's extends (#5074 av @ikatyang)

Tidigare togs parenteser för komplexa noder i class expression's extends felaktigt bort, vilket genererade ogiltig kod. Denna bugg är fixad i Prettier 1.15.

// Input
let Subclass2 = class extends (Superclass as AssertedSuperclass) {};

// Output (Prettier 1.14)
let Subclass2 = class extends Superclass as AssertedSuperclass {};

// Output (Prettier 1.15)
let Subclass2 = class extends (Superclass as AssertedSuperclass) {};

Ta inte bort nödvändiga parenteser för TSOptionalType (#5056 av @ikatyang)

Tidigare togs nödvändiga parenteser för optional types i tuple felaktigt bort, vilket genererade ogiltig kod. Denna bugg är fixad i Prettier 1.15.

// Input
type T = [("a" | "b")?];

// Output (Prettier 1.14)
type T = ["a" | "b"?];

// Output (Prettier 1.15)
type T = [("a" | "b")?];

CSS

Skriv inte fel utdata om både front matter och /* prettier-ignore */ finns (#5103 av @ikatyang)

I Prettier 1.14 var platsinformation i AST felaktigt förskjuten på grund av hur vi extraherade front matters från källkoden, vilket ledde till att /* prettier-ignore */ genererade felaktig utdata. Vi har fixat detta i Prettier 1.15.

/* Input */
---
hello: world
---

/* prettier-ignore */
.foo {}

/* Output (Prettier 1.14) */
---
hello: world
---

/* prettier-ignore */
pretti

/* Output (Prettier 1.15) */
---
hello: world
---

/* prettier-ignore */
.foo {}

Behåll radbrytningar i CSS-in-JS Templates (#5240 av @onurtemizkan)

Interpolationer i CSS-in-JS-mallar kan vara vad som helst, så vi behåller deras radbrytningar i Prettier 1.15.

// Input
const foo = styled.div`
${secondary}
flex: 0 0 auto;
`;

// Output (Prettier 1.14)
const foo = styled.div`
${secondary} flex: 0 0 auto;
`;

// Output (Prettier 1.15)
const foo = styled.div`
${secondary}
flex: 0 0 auto;
`;

Markdown

Mellanslag efter front matters avgränsare tillåts (#5107 av @ikatyang)

Tidigare detekterade vi bara front matters utan avslutande mellanslag för deras avgränsare, vilket ledde till att tematiska brytningar (t.ex. ---) felaktigt identifierades som slutet på front mattern. Vi har fixat detta genom att tillåta avslutande mellanslag för front matters avgränsare i Prettier 1.15, vilket också är hur GitHub hanterar front matters.

(· representerar ett mellanslag)

<!-- Input -->
---
Title: Title
---···

__strong__ **strong**

---

<!-- Output (Prettier 1.14) -->
---
Title: Title
---···
__strong__ **strong**
---

<!-- Output (Prettier 1.15) -->
---
Title: Title
---···

**strong** **strong**

---

Lägg inte till mellanslag mellan latinska bokstäver och hangul (#5040 av @ikatyang)

Tidigare lade vi alltid till mellanslag mellan latinska bokstäver och CJK-tecken för bättre läsbarhet. Men enligt feedback använder koreanska konventionella mellanslag, och extra mellanslag orsakade problem. Därför har vi inaktiverat detta beteende för hangul i Prettier 1.15. Beteendet ändras inte för kinesiska eller japanska.

<!-- Input -->
예문Latin예문Latin 예문Latin예문 Latin예문Latin 예문 Latin 예문

<!-- Output (Prettier 1.14) -->
예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문

<!-- Output (Prettier 1.15) -->
예문Latin예문Latin 예문Latin예문 Latin예문Latin 예문 Latin 예문

Behåll inledande och avslutande radbrytningar i fenced code block (#5038 av @ikatyang)

I Prettier 1.14 togs inledande och avslutande radbrytningar bort i fenced code block, vilket fick andra plugins (t.ex. php) att misslyckas med att formatera dessa kodblock. Inledande och avslutande radbrytningar behålls i Prettier 1.15.

<!-- Input -->
```

hello

```

<!-- Output (Prettier 1.14) -->
```
hello
```

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

hello

```

Inlinea fotnotsdefinitioner om det bara finns ett enda stycke med en rad (#5025 av @ikatyang)

Tidigare bröts allt i en fotnot som inte fick plats inom skrivbredden upp på flera rader, men att dela upp ett enradsstycke gav inte mycket läsbarhet. I Prettier 1.15 inliner vi därför alltid sådana stycken.

<!-- Input -->
[^1]: In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.

<!-- Output (Prettier 1.14) -->
[^1]:

In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.

<!-- Output (Prettier 1.15) -->
[^1]: In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.

Korrekt utskrift av listor före tomma avslutande radbrytningar (#5024 by @ikatyang)

I Prettier 1.14 identifierades listor före tomma avslutande radbrytningar felaktigt som lösa listor. Detta ledde till att användaren behövde formatera koden två gånger för att den skulle stabiliseras, men när den väl stabiliserades blev utskriften felaktig. Problemet är åtgärdat i Prettier 1.15.

// Input
if (condition) {
md`
- 123
- 456
`;
}

// First Output (Prettier 1.14)
if (condition) {
md`
- 123
- 456
`;
}

// Second Output (Prettier 1.14)
if (condition) {
md`
- 123

- 456
`;
}

// First & Second Output (Prettier 1.15)
if (true) {
md`
- 123
- 456
`;
}

YAML

Escapa citattecken korrekt (#5236 by @ikatyang)

Tidigare gav strängar med escapade citattecken i doubleQuote felaktig utdata. De escapas nu korrekt i Prettier 1.15.

# Input
"'a\"b"

# Output (Prettier 1.14)
''a"b'

# Output (Prettier 1.15)
'''a"b'

Bevara avslutande kommentarer för dokument och dokumenthuvud (#5027 by @ikatyang)

I Prettier 1.14 kunde avslutande kommentarer för dokument och dokumenthuvud flyttas i vissa fall. I Prettier 1.15 bevaras de alltid på rätt plats.

# Input
--- # hello
... # world

# Output (Prettier 1.14)
# hello
# world

# Output (Prettier 1.15)
--- # hello
... # world

Ge inte fel för flow mapping-objekt med långt värde (#5027 by @ikatyang)

Tidigare identifierades långa flow mapping-värden felaktigt som nycklar, vilket gav syntaxfel eftersom implicita nycklar med mer än 1024 tecken inte är tillåtna. Problemet är åtgärdat i Prettier 1.15.

(long representerar en lång text på över 1024 tecken)

# Input
{x: long}

# Output (Prettier 1.14)
SyntaxError: The "undefine...ndefined" key is too long

# Output (Prettier 1.15)
{
x: long
}

Föredra implicit nyckel för tomt mappningsvärde (#4972 by @ikatyang)

Tidigare skrevs mappningsobjekt med tomt värde alltid ut med explicit nyckel, vilket är ovanligt och förvirrande. I Prettier 1.15 använder vi alltid implicit nyckel i dessa situationer.

# Input
a:
b:

# Output (Prettier 1.14)
a:
? b

# Output (Prettier 1.15)
a:
b:

Tack! ❤️

Tack till alla som bidragit till denna release, liksom de som rapporterat problem och gett feedback. Prettier är ett community-drivet projekt och kan bara fortsätta existera tack vare människor som ni. Tack!

Speciellt tack till @j-f1, @suchipi och @existentialism för att ha granskat detta blogginlägg!