Hoppa till huvudinnehållet

Prettier 2.8: förbättrad --cache CLI-option och TypeScript 4.9 satisfies-operator!

· 7 min att läsa
Sosuke Suzuki
Sosuke Suzuki
Inofficiell Beta-översättning

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

Den här versionen innehåller förbättringar av --cache-flaggan som lades till i 2.7. En ny --cache-location-flagga har lagts till, och en bugg som sparade cachen även när --write inte angavs har åtgärdats.

Vi lägger också till stöd för TypeScript 4.9:s satisfies-operator!

Om du gillar Prettier och vill stödja vårt arbete, överväg att sponsra oss direkt via vår OpenCollective eller genom att sponsra de projekt vi förlitar oss på, inklusive typescript-eslint, remark och Babel.

Prettier-teamet planerar att släppa version 3.0 inom de närmaste månaderna. Om du är plugin-utvecklare, förbered dig för migreringen. Besök migreringsguiden och issue #13606 för mer information.

Höjdpunkter​

TypeScript​

Stöd för TypeScript 4.9 satisfies-operator (#13764, #13783, #13872 av @sosukesuzuki)​

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

Auto-Accessors in Classes kommer att stödjas i en kommande 2.8-patchrelease. Vi har avprioriterat dem för tillfället för att kunna leverera satisfies-operatorn snabbare.

CLI​

Spara inte cachen om --write-flaggan inte angavs (#13016 av @Milly)​

# Prettier 2.7
$ prettier --cache foo.js
# This shows formatted contents of `foo.js`.
# Then cache is created and `foo.js` is flagged as already formatted.

$ prettier --cache --write foo.js
foo.js 2ms (cached)
# "... (cached)" means the file is already formatted, so nothing is done this time.

# Prettier 2.8
$ prettier --cache foo.js
# Show formatted contents of `foo.js`.

$ prettier --cache --write foo.js
foo.js 2ms
# `foo.js` is formatted now.

Lägg till --cache-location-flagga (#13019 av @sosukesuzuki)​

Som standard sparar Prettier CLI cachefilen för --cache-flaggan på ./node_modules/.cache/prettier/.prettier-cache. Detta kan nu åsidosättas:

prettier --write --cache --cache-location=my_cache_file src

Andra ändringar​

JavaScript​

Åtgärda docblock-tolkning (#13054 av @fisker)​

// With `--insert-pragma` flag

// Input
/* comment */
foo()

// Prettier 2.7
/**
 * /* comment
 *
 * @format
 */

foo();

// Prettier 2.8
/**
 * comment
 *
 * @format
 */

foo();

Åtgärda intervallformatering för funktionskroppar (#13173 av @thorn0)​

// Input
let fn = (() => {
  return; //
//^^^^^^^^^^ - range
});

// Prettier 2.7
let fn = (() => {
  return; //
};);

// Prettier 2.8
let fn = (() => {
  return; //
});

Åtgärda inkonsekvent formatering av flerradiga strängar (#13274 av @GlebDolzhikov)​

// Input
const loremIpsumFooBazBar1 = 'Multiline string\
         Multiline string\
'

const loremIpsumFooBazBar2 = 'Multiline string\
         Multiline string\
         Multiline string'

// Prettier 2.7
const loremIpsumFooBazBar1 = "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

// Prettier 2.8
const loremIpsumFooBazBar1 =
  "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

TypeScript​

Åtgärda parenteser i infererade funktioners returtyper med extends (#13289 av @GlebDolzhikov)​

// Input
type Foo<T> = T extends (...a: any[]) => (infer R extends string) ? R : never;

// Prettier 2.7
type Foo<T> = T extends (...a: any[]) => infer R extends string ? R : never;

// Prettier 2.8
type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;

CSS​

Åtgärda formatering av långa :is-, :where- och :not-selektorer (#13577 av @j-f1)​

Pseudoselektorer som :is, :where och :not som kan ta flera selektorer som argument formateras nu som funktionsanrop i andra språk. Tidigare gavs ingen särskild betydelse åt kommatecknen mellan deras "argument", vilket ledde till förvirrande radbrytningsbeteende. Ytterligare förbättringar kan behövas här - öppna gärna ett issue med exempelkod om du hittar något som inte ser ut som förväntat.

/* Input */
:where(
  label > input:valid,
  label > textarea:not(:empty),
  label > button[disabled]
) ~ .errors > .error { display: none; }

/* Prettier 2.7 */
:where(label > input:valid, label > textarea:not(:empty), label
    > button[disabled])
  ~ .errors
  > .error {
  display: none;
}

/* Prettier 2.8 */
:where(
    label > input:valid,
    label > textarea:not(:empty),
    label > button[disabled]
  )
  ~ .errors
  > .error {
  display: none;
}

SCSS​

Fix: extra mellanslag mellan '#' och '{' (#13286 by @jspereiramoura)​

// Input
padding: var(--spacer#{(1) + 2});

// Prettier 2.7
padding: var(--spacer# {(1) + 2});

// Prettier 2.8
padding: var(--spacer#{(1) + 2});

Angular​

Infoga mellanslag i pipe (#13100 by @sosukesuzuki)​

<!-- Input -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

<!-- Prettier 2.7 -->
<tui-line-chart
  [value]="chart | tuiFilter: filter:range | tuiMapper: toNumbers:range"
></tui-line-chart>

<!-- Prettier 2.8 -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

Ember / Handlebars​

Formatera anpassade "else if"-block korrekt (#13507 by @jamescdavis)​

En malltransform kan användas för att skapa anpassade blocknyckelord som beter sig likt if. Denna uppdatering av printer-glimmer ser till att "else if"-fallet formateras korrekt när "if" är ett anpassat nyckelord.

{{! Input }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier 2.7 }}
{{#when isAtWork}}
  Ship that code!
{{else}}{{#when isReading}}
    You can finish War and Peace eventually...
  {{else}}
    Go to bed!
  {{/when}}{{/when}}

{{! Prettier 2.8 }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

Markdown​

Bevara radbrytningar i inline-kod vid --prose-wrap=preserve (#11373 by @andersk)​

<!-- Input -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.7 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.8 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

MDX​

Förbättra stöd för intervallignorering i MDX (#12208 by @nickrttn)​

Lägger till stöd för att använda Markdowns intervallignoreringsdirektiv i MDX via JSX-kommentarer.

// Input
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

// Prettier 2.7 (throws an error)
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.8
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

API​

"Doc Explorer"-läge för Playground (#10183 by @thorn0)​

Växla parser-alternativet till specialvärdet doc-explorer för att experimentera med Prettiers mellanrepresentation och se hur den skrivs ut med olika inställningar.

Fixa problem med dokumentskrivaren vid användning av ifBreak inuti group (#12362 by @fisker)​

// Input
//                                                                              |80
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

// Prettier 2.7
for (const number of [
  123_123_123, 123_123_123, 123_123_123, 123_123_123, 12,
]) {
}

// Prettier 2.8
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

Kryssrutan "Kasta om inbäddningsfel" på Playground (#13227 by @thorn0)​

Tidigare var Playgrounds beteende förvirrande inkonsekvent med Prettiers lokala beteende genom att den visade parsningsfel i inbäddade språk för felsökningsändamål. Nu styrs detta beteende av en kryssruta och är inaktiverat som standard.

CLI​

Hämta parser för .lintstagedrc (#13081 by @OrRosenblatt)​

En .lintstagedrc-fil (utan filändelse) hanteras med hjälp av json- och yaml-parsers.