Prettier 3.0: Hej, ECMAScript Modules!

Inofficiell Beta-översättning

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

Vi är glada att meddela lanseringen av den nya versionen av Prettier!

Vi har migrerat till att använda ECMAScript Modules för all vår källkod. Denna förändring har avsevärt förbättrat utvecklarupplevelsen för Prettier-teamet. Var försäkrad om att när du använder Prettier som ett bibliotek kan du fortfarande använda det som CommonJS också.

Denna uppdatering medför flera breaking changes. Ett anmärkningsvärt exempel är ändringen i markdown-formatering - mellanslag infogas inte längre mellan latinska tecken och kinesiska eller japanska tecken. Vi vill rikta ett stort tack till Tatsunori Uchino, som gjort betydande bidrag till Prettier under det senaste året, särskilt med denna funktion. Dessutom har standardvärdet för trailingComma ändrats till "all".

En annan viktig förändring i denna release är den omfattande ombyggnaden av plugin-gränssnittet. Prettier stöder nu plugin som skrivits med ECMAScript Modules och asynkra parsers. Om du är en plugin-utvecklare, var försiktig vid uppdatering. Du hittar migrationsguiden här. Som alltid välkomnar vi felrapporter och feedback!

Denna release innehåller också många formateringsförbättringar och felrättningar.

Om du uppskattar 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å, såsom typescript-eslint, remark och Babel. Tack för ert fortsatta stöd!

Höjdpunkter

Markdown

Förbättrad hantering av mellanslag för kinesiska, japanska och koreanska (#11597 av @tats-u)

Sluta infoga mellanslag mellan kinesiska/japanska och västerländska tecken

Tidigare infogade Prettier mellanslag mellan kinesiska/japanska och västerländska tecken (bokstäver och siffror). Vissa föredrar denna stil, men den är inte standard och strider faktiskt mot officiella riktlinjer. Se här för mer information. Vi beslutade att det inte är Prettiers uppgift att tvinga fram en specifik stil i detta fall, så mellanslag infogas inte längre, medan befintliga bevaras. Om du behöver ett verktyg för att framtvinga mellanslagsstil, överväg textlint-ja eller lint-md (reglerna space-round-alphabet och space-round-number).

Den knepiga delen av denna förändring var tvetydiga radbrytningar mellan kinesiska/japanska och västerländska tecken. När Prettier slår ihop text måste den avgöra om en sådan radbrytning ska tas bort helt eller ersättas med ett mellanslag. För detta undersöker Prettier omgivande text och härleder den föredragna stilen.

<!-- Input -->
漢字
Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 2.8 -->
漢字 Alphabets ひらがな 12345 カタカナ 67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 3.0 -->
漢字Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

Följ radbrytningsregler för kinesiska och japanska

Det finns regler som förbjuder vissa tecken att visas i början eller slutet av en rad i kinesiska och japanska. T.ex. ska punkttecken som 。, ． och . inte inleda en rad medan （ inte ska avsluta en rad. Prettier följer nu dessa regler när den bryter text, det vill säga när proseWrap är inställt på always.

<!-- Input -->
HTCPCPのエラー418は、ティーポットにコーヒーを淹（い）れさせようとしたときに返されるステータスコードだ。

<!-- Prettier 2.8 with --prose-wrap always --print-width 8 -->
HTCPCP の
エラー
418 は、
ティーポ
ットにコ
ーヒーを
淹（い）
れさせよ
うとした
ときに返
されるス
テータス
コードだ
。

<!-- Prettier 3.0 with the same options -->
HTCPCPの
エラー
418は、
ティー
ポットに
コーヒー
を淹
（い）れ
させよう
としたと
きに返さ
れるス
テータス
コード
だ。

Bryt inte rader inom koreanska ord

Koreanska använder mellanslag för att dela upp ord, och en olämplig uppdelning kan ändra meningen i en fras:

• 노래를 못해요.: Jag är inte bra på att sjunga.

• 노래를 못 해요.: Jag kan inte sjunga (av någon anledning).

Tidigare, när proseWrap var inställt på always, kunde efterföljande Hangul-tecken delas upp med en radbrytning, vilket senare kunde konverteras till ett mellanrum när dokumentet redigerades och formatterades om. Detta händer inte längre. Koreansk text bryts nu av på samma sätt som engelsk text.

<!-- Input -->
노래를 못해요.

<!-- Prettier 2.8 with --prose-wrap always --print-width 9 -->
노래를 못
해요.

<!-- Prettier 2.8, subsequent reformat with --prose-wrap always --print-width 80 -->
노래를 못 해요.

<!-- Prettier 3.0 with --prose-wrap always --print-width 9 -->
노래를
못해요.

<!-- Prettier 3.0, subsequent reformat with --prose-wrap always --print-width 80 -->
노래를 못해요.

En radbrytning mellan Hangul och icke-Hangul-bokstäver och siffror konverteras till ett mellanrum när Prettier tar bort radbrytningar. Betrakta detta exempel:

3분 기다려 주지.

I denna mening, om du bryter raden mellan "3" och "분", kommer ett mellanrum att infogas där när texten får radbrytningar borttagna.

API

Stöd för plugins med asynkrona parsers (#12748 by @fisker, #13211 by @thorn0 and @fisker)

parse-funktionen i en plugin kan nu returnera ett Promise.

För att stödja asynkrona parsers för inbäddade språk var vi tvungna att introducera en breaking change i plugin-API:et. Specifikt måste embed-metoden i en printer nu matcha en helt ny signatur, inkompatibel med tidigare versioner. Om du är plugin-utvecklare och din plugin inte definierar embed, behöver du inte oroa dig. Annars se dokumentationen för detaljer.

Dessutom kan preprocess-metoden i en printer nu returnera ett promise.

Stöd för konfigurationsfiler i ESM (#13130 by @fisker)

Konfigurationsfiler i ESM stöds nu, med följande filnamn:

• prettier.config.js (med {"type": "module"} i package.json)

• .prettierrc.js (samma som ovan)

• prettier.config.mjs

• .prettierrc.mjs

export default {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

Delbara konfigurationspaket kan också vara renodlade ESM-paket.

Breaking Changes

JavaScript

Ändra standardvärdet för trailingComma till all (#11479 by @fisker, #13143 by @sosukesuzuki)

Sedan version 2.0 har standardvärdet för trailingComma varit es5.

Internet Explorer, den sista webbläsaren som inte tillät trailing commas i funktionsanrop, slutade stödjas den 15 juni 2022. Därför ändrar vi standardvärdet för trailingComma till all.

Om du föredrar det gamla beteendet, konfigurera Prettier med { "trailingComma": "es5" }.

Ta bort stöd för Flow-syntax från babel-parser (#14314 av @fisker, @thorn0)

Av historiska skäl kunde Prettier tidigare känna igen Flow-syntax i JS-filer när parser-alternativet var inställt på babel, även om filen inte innehöll @flow-pragmat. Detta stöd var begränsat och dåligt för prestanda, så det har tagits bort i Prettier 3.0. Prettier med babel-parsern växlar fortfarande automatiskt till Flow-syntax om den hittar @flow-pragmat eller filen har filändelsen .js.flow.

Flow

Ta bort stöd för Flow-kommentarer (#13687, #13703 av @thorn0)

Som en slags preprocessor bearbetas Flow-kommentarer (även kallade kommentarstyper) på token-nivå och kan inte representeras i ett AST i allmänhet. Flow bygger AST:et som om dessa speciella kommentar-tokens inte existerade. Exempel:

/*:: if */ (x) + y;

Detta tolkas som if (x) +y; av Flow och som x + y; av JS-parsrar som inte stöder Flow.

Tidigare försökte Prettier för vissa specialfall upptäcka att denna syntax användes och bevara den. Som ett försök att löra ett olösligt problem var detta begränsade stöd skört och fullt av buggar, så det har tagits bort. Om alternativet parser nu är inställt på flow eller babel-flow, kommer Flow-kommentarer att parsas och skrivas ut som normal kod. Om en parser som inte stöder Flow används, kommer de att behandlas som vanliga kommentarer.

// Input
let a /*: foo */ = b;

// Prettier 2.8
let a /*: foo */ = b;

// Prettier 3.0 with --parser flow
let a: foo = b;

// Prettier 3.0 with --parser babel
let a /*: foo */ = b;

Skriv ut avslutande kommatecken i typparametrar och tuppeltyper när --trailing-comma=es5 (#14086, #14085 av @fisker)

// Input
type Foo =  [
  {
    from: string,
    to: string,
  }, // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType }, // <- 2
>;

// Prettier 2.8
type Foo = [
  {
    from: string,
    to: string,
  } // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType } // <- 2
>;

// Prettier 3.0
type Foo = [
  {
    from: string,
    to: string,
  }, // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType }, // <- 2
>;

CSS

Lägg till den rena css-parsern (#7933, #9092, #9093 av @fisker)

Tidigare, när --parser=css användes, försökte Prettier parsa innehållet med postcss-scss och postcss-less. Detta orsakade förvirring och gjorde syntaxfel svåra att upptäcka. Nu fungerar --parser=css endast med vanlig CSS-syntax.

Om du använder parser="css" för dina .less / .scss-filer, uppdatera till rätt parser eller ta bort parser-alternativet så att Prettier automatiskt kan välja parser baserat på filändelsen.

/* Input */
/* Less Syntax with `--parser=css` */
a {.bordered();}

/* Prettier 2.8 */
/* Less Syntax with `--parser=css` */
a {
  .bordered();
}

/* Prettier 3.0 */
SyntaxError: (postcss) CssSyntaxError Unknown word (2:4)
  1 | /* Less Syntax with `--parser=css` */
> 2 | a {.bordered();}

/* Input */
/* Scss Syntax with `--parser=css` */
::before {content: #{$foo}}

/* Prettier 2.8 */
/* Scss Syntax with `--parser=css` */
::before {
  content: #{$foo};
}

/* Prettier 3.0 */
SyntaxError: (postcss) CssSyntaxError Unknown word (2:22)
  1 | /* Scss Syntax with `--parser=css` */
> 2 | ::before {content: #{$foo}}

GraphQL

Sluta stödja syntax för "kommaseparerade gränssnitt" (#12835 av @fisker)

# Input
type Type1 implements A, B {a: a}

# Prettier 2.8
type Type1 implements A, B {
  a: a
}

# Prettier 3.0
SyntaxError: Syntax Error: Unexpected Name "B". (1:26)
> 1 | type Type1 implements A, B {a: a}

API

Sluta stödja Node.js 10 och 12 (#11830 av @fisker, #13118 av @sosukesuzuki)

Den lägsta nödvändiga Node.js-versionen är nu v14

Ändra publika API:er till asynkrona (#12574, #12788, #12790, #13265 av @fisker)

• prettier.format() returnerar nu Promise<string>

• prettier.formatWithCursor() returnerar Promise<{formatted: string, cursorOffset: number}>

• prettier.formatAST() returnerar Promise<string>

• prettier.check() returnerar Promise<boolean>

• prettier.getSupportInfo() returnerar Promise

• prettier.clearConfigCache() returnerar Promise<void>

• prettier.resolveConfig.sync har tagits bort

• prettier.resolveConfigFile.sync har tagits bort

• prettier.getFileInfo.sync har tagits bort

Om du fortfarande behöver synkrona API:er kan du prova @prettier/sync

Filstruktur för npm-paket har ändrats (#12740 av @fisker, #13530 av @fisker, #14570 av @fisker)

Filstrukturändringar:

• bin-prettier.js -> bin/prettier.cjs

• esm/standalone.mjs -> standalone.mjs

• esm/parser-angular.mjs -> plugins/angular.mjs

• parser-angular.js -> plugins/angular.js

• esm/parser-babel.mjs -> plugins/babel.mjs

• parser-babel.js -> plugins/babel.js

• esm/parser-espree.mjs -> plugins/acorn-and-espree.mjs

• parser-espree.js -> plugins/acorn.js
  globalt objekt bytt namn prettierPlugins.espree -> prettierPlugins.acorn

• esm/parser-flow.mjs -> plugins/flow.mjs

• parser-flow.js -> plugins/flow.js

• esm/parser-glimmer.mjs -> plugins/glimmer.mjs

• parser-glimmer.js -> plugins/glimmer.js

• esm/parser-graphql.mjs -> plugins/graphql.mjs

• parser-graphql.js -> plugins/graphql.js

• esm/parser-html.mjs -> plugins/html.mjs

• parser-html.js -> plugins/html.js

• esm/parser-markdown.mjs -> plugins/markdown.mjs

• parser-markdown.js -> plugins/markdown.js

• esm/parser-meriyah.mjs -> plugins/meriyah.mjs

• parser-meriyah.js -> plugins/meriyah.js

• esm/parser-postcss.mjs -> plugins/postcss.mjs

• parser-postcss.js -> plugins/postcss.js

• esm/parser-typescript.mjs -> plugins/typescript.mjs

• parser-typescript.js -> plugins/typescript.js

• esm/parser-yaml.mjs -> plugins/yaml.mjs

• parser-yaml.js -> plugins/yaml.js

Se hela listan på https://unpkg.com/browse/prettier@3.0.0/.

En ny plugin har lagts till:

• plugins/estree.mjs (ESM-version)

• plugins/estree.js (UMD-version)

Om du använder standalone-versionen ska denna plugin laddas när du skriver ut JavaScript, TypeScript, Flow eller JSON.

import { format } from "prettier/standalone";
- import prettierPluginBabel from "prettier/parser-babel";
+ import * as prettierPluginBabel from "prettier/plugins/babel";
+ import * as prettierPluginEstree from "prettier/plugins/estree";

console.log(
-  format(code, {
+  await format(code, {
      parser: "babel",
-     plugins: [prettierPluginBabel],
+     plugins: [prettierPluginBabel, prettierPluginEstree],
   })
);

- node ./node_modules/prettier/bin-prettier.js . --write
+ node ./node_modules/prettier/bin/prettier.cjs . --write

Stöd för plugins i ESM (#13201 av @fisker)

Från och med v3.0.0 laddar vi plugins via import() istället för require(), så plugins kan nu vara ESM-moduler.

Om du använder --plugin med katalogsökväg eller filsökväg utan filändelse, kanske pluginen inte kan laddas.

- prettier . --plugin=path/to/my-plugin-directory
+ prettier . --plugin=path/to/my-plugin-directory/index.js

- prettier . --plugin=path/to/my-plugin-file
+ prettier . --plugin=path/to/my-plugin-file.js

Uppdatering av prettier.doc (#13203, #14456 av @fisker)

prettier.doc.builders.concat deprecierades i v2.3.0 och är nu borttagen.

Följande API:er var aldrig dokumenterade och var endast avsedda för intern användning. De är nu borttagna:

• prettier.doc.utils.getDocParts

• prettier.doc.utils.propagateBreaks

• prettier.doc.utils.cleanDoc

• prettier.doc.utils.getDocType

• prettier.doc.debug.printDocToDebug

textToDoc trimmar avslutande hårdrader (#13220 av @fisker)

Tidigare anropade vi prettier.doc.utils.stripTrailingHardline() i alla kärnspråk efter att inbäddad kod skrivits ut till Doc för att ta bort avslutande hårdrader.

Vi anser att om textToDoc returnerar dokument utan avslutande hårdrader blir det enklare för plugins att hantera embed-utskrifter.

Borttaget stöd för anpassat parser-API (#13250 av @fisker och @thorn0)

Innan plugins fanns hade Prettier en liknande men mer begränsad funktion kallad anpassade parsers. Denna har tagits bort i v3.0.0 eftersom dess funktionalitet var en delmängd av Plugin API:et. Om du använde detta, se hur du migrerar.

Det andra argumentet parsers som skickades till parsers.parse har tagits bort (#13268 av @fisker)

Signatur för pluginens print-funktion har ändrats från

function parse(text: string, parsers: object, options: object): AST;

till

function parse(text: string, options: object): Promise<AST> | AST;

Det andra argumentet parsers har tagits bort. Om du fortfarande behöver andra parsers under parse-processen kan du:

1. Importera pluginen själv (rekommenderas)

   import * as prettierPluginBabel from "prettier/plugins/babel";
   
   const myCustomPlugin = {
     parsers: {
       "my-custom-parser": {
         async parse(text) {
           const ast = await prettierPluginBabel.parsers.babel.parse(text);
           ast.program.body[0].expression.callee.name = "_";
           return ast;
         },
         astFormat: "estree",
       },
     },
   };

2. Hämta parsern från options-argumentet

   function getParserFromOptions(options, parserName) {
     const parserOrParserInitFunction = options.plugins.find(
       (plugin) => plugin.parsers && Object.hasOwn(plugin.parsers, parserName),
     )?.parsers[parserName];
     return typeof parserOrParserInitFunction === "function"
       ? parserOrParserInitFunction()
       : parserOrParserInitFunction;
   }
   
   const myCustomPlugin = {
     parsers: {
       "my-custom-parser": {
         async parse(text, options) {
           const babelParser = await getParserFromOptions(options, "babel");
           const ast = await babelParser.parse(text);
           ast.program.body[0].expression.callee.name = "_";
           return ast;
         },
         astFormat: "estree",
       },
     },
   };

undefined och null skickas inte längre till pluginens print-funktion (#13397 av @fisker)

Om din plugin använde print för att hantera dessa värden, kontrollera dem istället i den överordnade noden.

function print(path, print) {
-  const value = path.getValue();
-  if (!value?.type) {
-    return String(value);
-  }

-  return path.map(print, "values");

+  return path.map(({node}) => (node?.type ? print() : String(node)), "values");
}

Tillåt godtyckliga truthy-värden för label-dokument (#13532 av @thorn0)

label-dokumentbyggaren har ändrats. Se dokumentationen.

getFileInfo() löser konfiguration som standard (#14108 av @fisker)

options.resolveConfig är nu true som standard. Se dokumentationen.

Plugin-sökfunktionen har tagits bort (#14759 av @fisker)

Den automatiska plugin-sökfunktionen fungerade inte bra med pnpm och orsakade långsammare prestanda.

Flaggor som --plugin-search-dir, --no-plugin-search för CLI och pluginSearchDirs i API-optioner har tagits bort i Prettier 3.0.

Använd istället flaggan --plugin eller alternativet plugins. Se dokumentationen.

CLI

Ignorera .gitignore-ade filer som standard (#14731 av @fisker)

Prettier ignorerar nu filer som ignoreras av .gitignore som standard. Om du vill ha det tidigare beteendet (bara ignorera filer som anges i .prettierignore), använd

prettier . --write --ignore-path=.prettierignore

Andra ändringar

JavaScript

Stöd för mönstret "dekorerad funktion" (#10714 by @thorn0)

I det här fallet är utvecklaren vanligtvis beredd att offra läsbarheten i pilfunktionens signatur för att få mindre indrag i dess kropp. Prettier känner nu igen detta mönster och behåller pilfunktionen "hugged" även om signaturen bryts.

// Prettier 2.8
const Counter = decorator("my-counter")(
  (props: { initialCount?: number; label?: string }) => {
    // ...
  }
);

// Prettier 3.0
const Counter = decorator("my-counter")((props: {
  initialCount?: number;
  label?: string;
}) => {
  // ...
});

Fixa markörpositionering för filer som innehåller emoji (#13340 by @fisker)

$ cat test.js
const { formatWithCursor } = await import("prettier");
const code = "'😀😀😀😀'";
await formatWithCursor(code, {parser: "babel", cursorOffset: 9})

# Prettier 2.8
$ node test.js
{ formatted: '"😀😀😀😀";\n', cursorOffset: 5, comments: [] }

# Prettier 3.0
$ node test.js
{ formatted: '"😀😀😀😀";\n', cursorOffset: 9, comments: [] }

Fixa edge cases för expansion av första anropsargumentet (#13341 by @thorn0)

// Input
export default whatever(function (a: {
  aaaaaaaaa: string;
  bbbbbbbbb: string;
  ccccccccc: string;
}) {
  return null;
}, "xyz");

call(
    function() {
        return 1;
    },
    $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? 'test'
);

// Prettier 2.8
export default whatever(function (a: {
  aaaaaaaaa: string;
  bbbbbbbbb: string;
  ccccccccc: string;
}) {
  return null;
},
"xyz");

call(function () {
  return 1;
}, $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  "test");

// Prettier 3.0
export default whatever(function (a: {
  aaaaaaaaa: string,
  bbbbbbbbb: string,
  ccccccccc: string,
}) {
  return null;
}, "xyz");

call(
  function () {
    return 1;
  },
  $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    "test",
);

Fixa indrag av pilfunktionskedjor i anropsargument och binära uttryck (#13391 by @thorn0)

Motivationen bakom det valda formateringssättet är att göra det tydligt hur många argument anropet har. Men det fanns en bugg med indraget av den första signaturen i kedjan om den signaturen inte fick plats på en rad.

// Prettier 2.8
askTrovenaBeenaDependsRowans(
  glimseGlyphsHazardNoopsTieTie,
  (
      averredBathersBoxroomBuggyNurl,
      anodyneCondosMalateOverateRetinol = "default"
    ) =>
    (annularCooeedSplicesWalksWayWay) =>
    (kochabCooieGameOnOboleUnweave) =>
      abugidicRomanocastorProvider,
  weaponizedStellatedOctahedron
);

// Prettier 3.0
askTrovenaBeenaDependsRowans(
  glimseGlyphsHazardNoopsTieTie,
  (
    averredBathersBoxroomBuggyNurl,
    anodyneCondosMalateOverateRetinol = "default",
  ) =>
    (annularCooeedSplicesWalksWayWay) =>
    (kochabCooieGameOnOboleUnweave) =>
      abugidicRomanocastorProvider,
  weaponizedStellatedOctahedron,
);

Bryt inte signaturen för ett "hugged" funktionsuttryck om parametrar är identifierare utan typer (#13410 by @thorn0)

// Prettier 2.8
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
  props,
  ref
) {
  return <ThemeUILink ref={ref} variant="default" {...props} />;
});

// Prettier 3.0
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  function Link(props, ref) {
    return <ThemeUILink ref={ref} variant="default" {...props} />;
  },
);

Fixa interfolierade kommentarer (#13438 by @thorn0)

// Input
function x() {
} // first
; // second

// Prettier 2.8
function x() {} // first // second

// Prettier 3.0
function x() {} // first
// second

Stöd för nästlade JSDoc-kommentarer (#13445 by @thorn0)

Den här typen av kommentarer används för att dokumentera överlagrade funktioner (se https://github.com/jsdoc/jsdoc/issues/1017).

// Input
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 *//**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

// Prettier 2.8
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 */ /**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

// Prettier 3.0
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 *//**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

Fixa instabila malliteraler med inbäddade språk (#13532 by @thorn0)

Om en malliteral med inbäddad syntax är det enda argumentet i ett anrop eller kroppen av en pilfunktion och har inledande och avslutande blanktecken, kommer den inte att skrivas ut på en ny rad.

// Input
foo(/* HTML */ ` <!-- bar1 --> bar <!-- bar2 --> `);

// Prettier 2.8 (first output)
foo(
  /* HTML */ `
    <!-- bar1 -->
    bar
    <!-- bar2 -->
  `
);

// Prettier 2.8 (second output)
foo(/* HTML */ `
  <!-- bar1 -->
  bar
  <!-- bar2 -->
`);

// Prettier 3.0 (first output)
foo(/* HTML */ `
  <!-- bar1 -->
  bar
  <!-- bar2 -->
`);

Fixa indrag av uttryck i malliteraler (#13621 by @fisker)

// Input
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow"
              )}" button, type "${chalk.yellow.underline(
                version
              )}", hit the "${chalk.bgGreen("Run workflow")}" button.
`

// Prettier 2.8
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow"
              )}" button, type "${chalk.yellow.underline(
  version
)}", hit the "${chalk.bgGreen("Run workflow")}" button.
`;

// Prettier 3.0
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow",
              )}" button, type "${chalk.yellow.underline(
                version,
              )}", hit the "${chalk.bgGreen("Run workflow")}" button.
`;

Lägg till stöd för förslaget "Explicit Resource Management" (#13752 by @fisker, #14862 by @sosukesuzuki)

Stage 2-förslaget "Explicit Resource Management" stöds nu via Babel 7.20.0 och 7.22.0.

Tänk också på vår policy för icke-standardiserad syntax innan du använder denna föreslagna syntaxfunktion med Prettier.

// Examples
{
  using obj = g(); // block-scoped declaration
  const r = obj.next();
} // calls finally blocks in `g`

{
  await using obj = g(); // block-scoped declaration
  const r = obj.next();
} // calls finally blocks in `g`

Lägg till stöd för förslaget "Import Reflection" (#13771 by @fisker)

Stage 2-förslaget "Import Reflection" stöds nu via Babel 7.20.0. Tänk också på vår policy för icke-standardiserad syntax innan du använder detta föreslagna syntaxfunktion med Prettier.

// Examples
import module x from "<specifier>";

Åtgärda inkonsekvens mellan array/tuple och object/record (#14065 av @fisker)

// Input
foo.a().b().c([n, o])
foo.a().b().c(#[n, o])
foo.a().b().c({n, o})
foo.a().b().c(#{n, o})

// Prettier 2.8
foo.a().b().c([n, o]);
foo
  .a()
  .b()
  .c(#[n, o]);
foo.a().b().c({ n, o });
foo
  .a()
  .b()
  .c(#{ n, o });

// Prettier 3.0
foo.a().b().c([n, o]);
foo.a().b().c(#[n, o]);
foo.a().b().c({ n, o });
foo.a().b().c(#{ n, o });

Åtgärda markörspårning inom JSX Text (#14163 av @fisker)

// Prettier 2.8
formatWithCursor(
  ["<>a", "  <div>hi</div>", "</>"].join("\n"),
  { cursorOffset: 3, parser: "babel" }
).cursorOffset;
// -> 2

// Prettier 3.0
(await formatWithCursor(
  ["<>a", "  <div>hi</div>", "</>"].join("\n"),
  { cursorOffset: 3, parser: "babel" }
)).cursorOffset;
// -> 6

Undvik onödigt indrag av nästlade await-uttryck (#14192 av @thorn0)

En förfining av denna ändring i v2.3. Ibland finns det inget behov av att tvinga fram indrag av nästlade await-uttryck.

// Prettier 2.8
await Promise.all(
  (
    await readdir("src")
  ).map((path) => {
    import(`./${path}`);
  })
);

// Prettier 3.0
await Promise.all(
  (await readdir("src")).map((path) => {
    import(`./${path}`);
  }),
);

Stöd för regexp-modifierarförslag (#14391 av @fisker)

Se Regular Expression Pattern Modifiers for ECMAScript.

Åtgärda saknade parenteser och semikolon runt prettier-ignore-markerade noder (#14406 av @fisker)

// Input
async function request(url) {
  return (
    // prettier-ignore
    await fetch(url)
  ).json()
}

// Prettier 2.8
async function request(url) {
  return (
    // prettier-ignore
    await fetch(url).json()
  );
}

// Prettier 3.0
async function request(url) {
  return (
    // prettier-ignore
    (await fetch(url)).json()
  );
}

// Input
foo();
// prettier-ignore
[bar, baz].forEach(console.log)

// Prettier 2.8 (--no-semi)
foo()
// prettier-ignore
[bar, baz].forEach(console.log)

// Prettier 3.0
foo()
// prettier-ignore
;[bar, baz].forEach(console.log)

Ta bort onödiga parenteser runt klassuttryck (#14409 av @fisker)

// Input
call(
  @dec class {}
);

// Prettier 2.8
call(
  (
    @dec
    class {}
  )
);

// Prettier 3.0
call(
  @dec
  class {},
);

Lägg till parenteser runt huvudet av ExpressionStatement istället för hela uttrycket (#14599 av @fisker)

// Input
const isArray = (object) => ({}).toString.call(foo) === "[object Array]";

// Prettier 2.8
const isArray = (object) => ({}.toString.call(foo) === "[object Array]");

// Prettier 3.0
const isArray = (object) => ({}).toString.call(foo) === "[object Array]";

Förbättra konsistens mellan curryade och icke-curryade pilfunktioner (#14633 av @seiyab, @fisker)

// Input
Y(() => a ? b : c);
Y(() => () => a ? b : c);

// Prettier 2.8
Y(() => (a ? b : c));
Y(() => () => a ? b : c);

// Prettier 3.0
Y(() => (a ? b : c));
Y(() => () => (a ? b : c));

Åtgärda kontroll av tomma rader mellan arrayelement (#14736 av @solarized-fox)

// Input
[
  (a = b),

  c // comment
]

// Prettier 2.8
[
  (a = b),
  c, // comment
];

// Prettier 3.0
[
  (a = b),

  c, // comment
];

Stöd för avslutande kommentarer i funktionsparametrar för alla parametertyper (#14835 av @pieterv)

Stöd för avslutande kommentarer i funktionsparametrar för parameternodtyperna RestElement, ArrayPattern och ObjectPattern.

// Input
function Foo(
  ...bar
  // Trailing comment
) {}

// Prettier 2.8
function Foo(...bar) // Trailing comment
{}

// Prettier 3.0
function Foo(
  ...bar
  // Trailing comment
) {}

Stöd för Import Attributes (#14861, #14863 av @sosukesuzuki)

Stöd för Import Attributes-förslaget.

import json from "./foo.json" with { type: "json" };
import("./foo.json", { with: { type: "json" } });

TypeScript

Åtgärda inledande kommentarer i mappade typer med readonly (#13427 av @thorn0, @sosukesuzuki)

// Input
type Type = {
  // comment
  readonly [key in Foo];
};

// Prettier 2.8
type Type = {
  readonly // comment
  [key in Foo];
};

// Prettier 3.0
type Type = {
  // comment
  readonly [key in Foo];
};

Konsekvent formatering av hängande kommentarer för tuppeltyper och arrayer (#13608 av @sosukesuzuki)

// Input
type Foo = [
   // comment
];
const bar = [
   // comment
];

// Prettier 2.8
type Foo = [// comment];
const bar = [
   // comment
];

// Prettier 3.0
type Foo = [
   // comment
];
const bar = [
   // comment
];

Åtgärda att uniontyper ska skrivas i flerradsformat vid förekomst av kommentarer (#13860 av @PerfectPan)

// Input
type FooBar =
  | Number // this documents the first option
  | void // this documents the second option
  ;

// Prettier 2.8
type FooBar = Number | void; // this documents the first option // this documents the second option

// Prettier 3.0
type FooBar =
  | Number // this documents the first option
  | void; // this documents the second option

Förbättrad kommentarshantering och markörspårning kring typannoteringar (#14171 av @fisker)

// Input
let foo /* comment */ : number;

// Prettier 2.8
let foo: /* comment */ number;

// Prettier 3.0
<Same as input>

// Prettier 2.8
prettier.formatWithCursor("let foo: number", {
  cursorOffset: 7,
  parser: "babel",
}).cursorOffset;

// -> 9

// Prettier 3.0
(
  await prettier.formatWithCursor("let foo: number", {
    cursorOffset: 7,
    parser: "babel",
  })
).cursorOffset;

// -> 7

Radbrytning vid TypeScript-parameterproperties (#14402 av @seiyab)

// Input
class MyClass {
  constructor(
    protected x: number,
    private y: string
  ) {}
}

// Prettier 2.8
class MyClass {
  constructor(protected x: number, private y: string) {}
}

// Prettier 3.0
class MyClass {
  constructor(
    protected x: number,
    private y: string,
  ) {}
}

Åtgärda formatering av uniontyper med enstaka typer (#14654 av @fisker och @auvred)

// Input
type T =
  | (
    | {
        value: number
      }
    | {
        value: string
      }
  )

// Prettier 2.8
type T =
  |
      | {
          value: number;
        }
      | {
          value: string;
        };

// Prettier 3.0
type T =
  | {
      value: number;
    }
  | {
      value: string;
    };

Förbättrad nyradsdetektering i mappade typer (#14659 av @fisker)

// Input
type A1 = { [A in B]:
T}
type A2 = {
  [A in B]:T}

// Prettier 2.8
type A1 = {
  [A in B]: T;
};
type A2 = {
  [A in B]: T;
};

// Prettier 3.0
type A1 = { [A in B]: T };
type A2 = {
  [A in B]: T;
};

Radbrytning efter extends i typparametrar (#14672, #14858 av @sosukesuzuki)

// Input
export type OuterType2<
  LongerLongerLongerLongerInnerType extends LongerLongerLongerLongerLongerLongerLongerLongerOtherType
> = { a: 1 };

// Prettier 2.8
export type OuterType2<
  LongerLongerLongerLongerInnerType extends LongerLongerLongerLongerLongerLongerLongerLongerOtherType
> = { a: 1 };

// Prettier 3.0
export type OuterType2<
  LongerLongerLongerLongerInnerType extends
    LongerLongerLongerLongerLongerLongerLongerLongerOtherType,
> = { a: 1 };

Åtgärda saknade obligatoriska kommatecken i typparametrar (#14688 av @fisker, @sosukesuzuki)

Tidigare skrev vi endast ut efterföljande kommatecken vid filändelsen .tsx, men det visade sig att även .mts och .cts kräver detta för korrekt tolkning.

// Input
export const unsafeCoerce = <T,>(u: unknown): T => u as T

// Prettier 2.8
export const unsafeCoerce = <T>(u: unknown): T => u as T;

// Prettier 3.0
export const unsafeCoerce = <T,>(u: unknown): T => u as T;

Behåll parenteser runt TSInstantiationExpression följt av property-access (#14701 av @morsko1)

// Input
(Array<string>).a;
(Array<string>)?.a;
(Array<string>)[a];
(Array<string>)?.[a];

// Prettier 2.8
Array<string>.a;
Array<string>?.a;
Array<string>[a];
Array<string>?.[a];

// Prettier 3.0
(Array<string>).a;
(Array<string>)?.a;
(Array<string>)[a];
(Array<string>)?.[a];

Åtgärda dubbelsemikolon orsakat av // prettier-ignore på signaturrad för anrop (#14830 av @ot07)

// Input
type Foo = {
  (): void; // prettier-ignore
  second: string;
};

// Prettier 2.8
type Foo = {
  (): void;; // prettier-ignore
  second: string;
};

// Prettier 3.0
type Foo = {
  (): void; // prettier-ignore
  second: string;
};

Flow

Objekttyp i declare function-signatur bryter nu rad före returtyp (#13396 av @thorn0)

Detta beteende har harmoniserats med hur TypeScript formateras.

// Input
declare function bla (props: { a: boolean, b: string, c: number }): Promise<Array<foo>>

// Prettier 2.8
declare function bla(props: { a: boolean, b: string, c: number }): Promise<
  Array<foo>
>;

// Prettier 3.0
declare function bla(props: {
  a: boolean;
  b: string;
  c: number;
}): Promise<Array<foo>>;

Stöd för villkorliga typer och infer-typer (#14573 av @SamChou19815)

// Input
type TestReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

// Prettier 2.8
// Does not parse

// Prettier 3.0
type TestReturnType<T extends (...args: any[]) => any> = T extends (
  ...args: any[]
) => infer R
  ? R
  : any;

Stöd för mappade typer och keyof (#14619 av @jbrown215)

// Input
type Mapped = { [key in keyof O]: number };

// Prettier 2.8
// Does not parse

// Prettier 3.0
type Mapped = { [key in keyof O]: number };

Stöd för type guards (#14767 av @panagosg7)

// Input
function isString (x: mixed): x is string { return typeof x === "string"; }

// Prettier 2.8
// Does not parse

// Prettier 3.0
function isString(x: mixed): x is string {
  return typeof x === 'string';
}

CSS

Förbättrad formatering av anpassade properties (#9209 av @fisker)

Tack vare PostCSS 8.0 kan vi nu hantera dessa specialfall för anpassade properties.

/* Input */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a":1}}, [4]];
  --javascript: function(rule) { console.log(rule) };
}

@supports (--element(".minwidth", { "minWidth": 300 })) {
  [--self] {
    background: greenyellow;
  }
}

/* Prettier 2.8 */
SyntaxError: (postcss) CssSyntaxError Missed semicolon (3:20)
  1 | :root {
  2 |   --empty: ;
> 3 |   --JSON: [1, "2", {"three": {"a":1}}, [4]];
    |                    ^
  4 |   --javascript: function(rule) { console.log(rule) };
  5 | }
  6 |

/* Prettier 3.0 */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a": 1}}, [4]];
  --javascript: function(rule) {console.log(rule)};
}

@supports (--element(".minwidth", {"minWidth": 300})) {
  [--self] {
    background: greenyellow;
  }
}

Behåll avslutande kommatecken för var-funktioner (#13402 av @sosukesuzuki)

/* Input */
.foo {
  --bar: var(--baz,);
}

/* Prettier 2.8 */
.foo {
  --bar: var(--baz);
}

/* Prettier 3.0 */
.foo {
  --bar: var(--baz,);
}

Åtgärda radbrytning i CSS-deklarationer med kommatecken (#14208 av @mvorisek)

// Input
.myclass {
  box-shadow:
    inset 0 0 10px #555,
    0 0 20px black;
}

// Prettier 2.8
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

// Prettier 3.0
.myclass {
  box-shadow:
    inset 0 0 10px #555,
    0 0 20px black;
}

Åtgärda URL som innehåller kommatecken (#14476 av @seiyab)

/* Input */
@font-face {
  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}

/* Prettier 2.8 */
@font-face {
  src: url(RobotoFlex-VariableFont_GRADXTRAYOPQYTASYTDEYTFIYTLCYTUCopszslntwdthwght.ttf);
}

/* Prettier 3.0 */
@font-face {
  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}

SCSS

Åtgärda formatering av strängvärden som innehåller escape-tecknet \ (#13487 av @sosukesuzuki)

/* Input */
$description: "Lorem ipsum dolor sit \"amet\", consectetur adipiscing elit, " +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

/* Prettier 2.8 */
$description: 'Lorem ipsum dolor sit "amet", consectetur adipiscing elit, '+ "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

/* Prettier 3.0 */
$description: 'Lorem ipsum dolor sit "amet", consectetur adipiscing elit, ' +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

Less

Åtgärda tolkningsfel vid interpolation (#11343 av @fisker)

// Input
@{selector}-title{ @{prop}-size: @{color} }

// Prettier 2.8
SyntaxError: CssSyntaxError: Unknown word (1:20)
> 1 | @{selector}-title{ @{prop}-size: @{color} }

// Prettier 3.0
@{selector}-title {
  @{prop}-size: @{color};
}

Behåll inline JavaScript-kod som den är (#14109 av @fisker)

// Input
.calcPxMixin() {
  @functions: ~`(function() {
    const designWidth = 3840
    const actualWidth = 5760
    this.calcPx = function(_) {
      return _ * actualWidth / designWidth + 'px'
    }
  })()`;
}

// Prettier 2.8
.calcPxMixin() {
  @functions: ~`(
      function() {const designWidth = 3840 const actualWidth = 5760 this.calcPx =
        function(_) {return _ * actualWidth / designWidth + "px"}}
    )
    () `;
}

// Prettier 3.0
<Same as input>

HTML

Skriv HTML5-doctype med gemener (#7391 av @fisker)

<!-- Input -->
<!DocType html>
<html><head></head><body></body></html>

<!-- Prettier 2.8 -->
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

<!-- Prettier 3.0 -->
<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Uppdatera angular-html-parser (#13578 av @thorn0)

Prettiers förgrening av Angulars HTML-tolkare har synkroniserats med uppströmsversionen.

Formatera <script> inuti SVG (#14400 av @fisker)

<!-- Input -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
  const element = document.getElementById('foo')
   if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
</svg>

<!-- Prettier 2.8 -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <script>
    document.addEventListener( 'DOMContentLoaded', () => { const element =
    document.getElementById('foo') if (element) { element.fillStyle =
    'currentColor' } });
  </script>
</svg>

<!-- Prettier 3.0 -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const element = document.getElementById("foo");
      if (element) {
        element.fillStyle = "currentColor";
      }
    });
  </script>
</svg>

Identifiera <search>-elementet (#14615 av @fisker)

HTML-specifikationen har lagt till <search>-elementet.

<!-- Input -->
<SEARCH title="Website">
  ...
</SEARCH>

<!-- Prettier 2.8 -->
<SEARCH title="Website"> ... </SEARCH>

<!-- Prettier 3.0 -->
<search title="Website">...</search>

Vue

Ignorera htmlWhitespaceSensitivity vid formatering av Vue SFC-rotblock (#14401 av @fisker)

<!-- Input -->
<docs lang=unknown></docs><docs lang=unknown></docs><!-- display: inline --><docs lang=unknown></docs><docs lang=unknown style="display: inline"></docs>

<!-- Prettier 2.8 (--html-whitespace-sensitivity=strict) -->
<docs lang="unknown"></docs>><docs lang="unknown"></docs
><!-- display: inline --><docs lang="unknown"></docs
>><docs lang="unknown" style="display: inline"></docs>

<!-- Prettier 3.0 -->
<docs lang="unknown"></docs>
<docs lang="unknown"></docs>
<!-- display: inline -->
<docs lang="unknown"></docs>
<docs lang="unknown" style="display: inline"></docs>

Formatera TypeScript-uttryck i attributbindningar (#14506 av @seiyab)

<!-- Input -->
<script lang="ts"></script>
<template>
  <comp :foo="   (a:string)=>1"/>
</template>

<!-- Prettier 2.8 -->
<script lang="ts"></script>
<template>
  <comp :foo="   (a:string)=>1" />
</template>

<!-- Prettier 3.0 -->
<script lang="ts"></script>
<template>
  <comp :foo="(a: string) => 1" />
</template>

Förbättra identifiering av Vue-filter (#14542 av @fisker)

<!-- Input -->
<template>
  <div>
    {{
      fn(
        bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
      )
      | filter1
      | filter2
      | filter3
      | filter4
    }}
  </div>
</template>

<!-- Prettier 2.8 -->
<template>
  <div>
    {{
      fn(
        bitwise
          | or
          | operator
          | a_long_long_long_long_long_long_long_long_long_long_variable
      )
        | filter1
        | filter2
        | filter3
        | filter4
    }}
  </div>
</template>

<!-- Prettier 3.0 -->
<template>
  <div>
    {{
      fn(
        bitwise |
          or |
          operator |
          a_long_long_long_long_long_long_long_long_long_long_variable,
      )
        | filter1
        | filter2
        | filter3
        | filter4
    }}
  </div>
</template>

Undvik onödigt inledande semikolon (#14557 av @fisker)

<!-- Input -->
<template>
  <div @click="[foo, bar].forEach(fn => void fn())"></div>
</template>

<!-- Prettier 2.8 (With `--no-semi` option) -->
<template>
  <div @click=";[foo, bar].forEach((fn) => void fn())"></div>
</template>

<!-- Prettier 3.0 -->
<template>
  <div @click="[foo, bar].forEach((fn) => void fn())"></div>
</template>

Formatera TS-uttryck när script-tagg har lang="ts" (#14587 av @seiyab)

<!-- Input -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.8 -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 3.0 -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x as number).toFixed(2) }}
</template>

Angular

Uppdatera @angular/compiler till v14 (#13609 av @fisker)

• Stöd för shorthand-objekt

• Ta bort stöd för quote expressions

<!-- Input -->
<div [input]="{a, b   :   2 }"></div>

<!-- Prettier 2.8 -->
Error: Cannot find front char /:/ from index 0 in "{a, b   :   2 }"

<!-- Prettier 3.0 -->
<div [input]="{ a, b: 2 }"></div>

<!-- Input -->
<a [href]="http://google.com">Click me</a>

<!-- Prettier 2.8 -->
<a [href]="http:  //google.com">Click me</a>

<!-- Prettier 3.0 -->
<a [href]="http://google.com">Click me</a>

Åtgärda parenteser med nullish coalescing-operatorn (#14216 av @thron0)

<!-- Input -->
<img [src]="(x && y) ?? z" />

<!-- Prettier 2.8 -->
<img [src]="x && y ?? z" />

<!-- Prettier 3.0 -->
<img [src]="(x && y) ?? z" />

Stöd för beräknad optional chaining (#14658 by @fisker)

<!-- Input -->
<img [src]="   a?.[0]" />

<!-- Prettier 2.8 -->
<img [src]="   a?.[0]" />

<!-- Prettier 3.0 -->
<img [src]="a?.[0]" />

Ta bort mellanslag efter rörnamn (#14961 by @waterplea)

Vi introducerade ett nytt format för rör i Prettier 2.8, men detta accepterades inte av communityn.

Därför introducerar vi nu ett nytt format som speglar communityns önskemål.

För mer information om diskussionen, se https://github.com/prettier/prettier/issues/13887.

<!-- Input -->
<my-component
  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
></my-component>

<!-- Prettier 2.8 -->
<my-component
  [value]="value | transform : arg1 : arg2 | format : arg3 : arg4"
></my-component>

<!-- Prettier 3.0 -->
<my-component
  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
></my-component>

Markdown

Bevara flera mellanslag i inline-kod (#13590 by @kachkaev och @thorn0)

Tidigare kollapsades flera blanktecken i inline-kod till ett enda mellanslag. Detta händer inte längre för att följa CommonMark-specifikationen.

<!-- Input -->
`   foo   bar   baz   `

<!-- Prettier 2.8 -->
` foo bar baz `

<!-- Prettier 3.0 -->
`   foo   bar   baz   `

API

Lägg till .d.ts-filer (#14212 by @sosukesuzuki, @fisker)

Lägger till typdefinitionsfiler som krävs för att använda Prettiers JavaScript-API från TypeScript. Detta eliminerar behovet för användare att installera @types/prettier.

Uppdatera prettier.util (#14317, #14320 by @fisker)

• La till prettier.util.getNextNonSpaceNonCommentCharacter

• Ändrade prettier.util.getNextNonSpaceNonCommentCharacter

  Signatur ändrades från

  function getNextNonSpaceNonCommentCharacterIndex<N>(
    text: string,
    node: N,
    locEnd: (node: N) => number,
  ): number | false;

  till

  function getNextNonSpaceNonCommentCharacterIndex(
    text: string,
    startIndex: number,
  ): number | false;

• Ändrade prettier.util.isPreviousLineEmpty

  Signatur ändrades från

  function isPreviousLineEmpty<N>(
    text: string,
    node: N,
    locStart: (node: N) => number,
  ): boolean;

  till

  function isPreviousLineEmpty(text: string, startIndex: number): boolean;

• Ändrade prettier.util.isNextLineEmpty

  Signatur ändrades från

  function isNextLineEmpty<N>(
    text: string,
    node: N,
    locEnd: (node: N) => number,
  ): boolean;

  till

  function isNextLineEmpty(text: string, startIndex: number): boolean;

• Föråldrad prettier.util.isNextLineEmptyAfterIndex

  Använd prettier.util.isNextLineEmpty istället.

Se dokumentationen för detaljer.

Åtgärda pluginladdningscache (#14576 by @fisker)

Plugin-instanser cachelagras felaktigt, se denna issue för detaljer.

Sluta formatera okänd kod med babel-parser (#14718 av @fisker)

await prettier.format("foo")

// Prettier 2.8
No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
'foo;\n'

// Prettier 3.0
UndefinedParserError: No parser and no file path given, couldn't infer a parser.

CLI

Uppdaterat felmeddelande för bättre information (#11369 av @webark)

Uppdaterade "Glömde köra Prettier?" till "Kör Prettier med --write för att fixa."

Detta behåller samma budskap men är mindre benäget att missförstås då det är ett mer formellt meddelande snarare än ett något familjärt uttryck.

Ändra --loglevel till --log-level (#13204 av @sosukesuzuki)

# Prettier 2.8
prettier test.js --loglevel=debug

# Prettier 3.0
prettier test.js --log-level=debug

Acceptera flera --ignore-path (#14332 av @fisker)

Du kan nu skicka flera --ignore-path.

prettier . --ignore-path=.prettier-ignore --ignore-path=.eslintignore

Visa sökvägar i POSIX-format på Windows (#14333 av @fisker)

Anpassa efter andra verktyg som ESLint och Stylelint.

// Prettier 2.8
Checking formatting...
[warn] src\utilities\create-get-visitor-keys.js
[warn] src\utilities\unexpected-node-error.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

// Prettier 3.0
Checking formatting...
[warn] src/utilities/create-get-visitor-keys.js
[warn] src/utilities/unexpected-node-error.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

Expandera inte globbar via symboliska länkar (#14627 by @andersk)

Prettier följer inte längre symboliska länkar vid expandering av kommandoradsargument. Detta undviker problem i många scenarier såsom symboliska länkar utanför källträdet, symboliska länkar till ignorerade filer och cykler av symboliska länkar.

Radbrytning efter filsökväg med fel (#14788 av @sosukesuzuki)

Tidigare skrev endast flaggan --write ut en radbrytning före felet, men nu gör även andra flaggor och inga flaggor detsamma.

# Input
prettier ./test.js

# Prettier 2.8
test.js[error] test.js: SyntaxError: Unexpected token: ')' (1:6)
[error] > 1 | 1 (+-) hoge
[error]     |      ^

# Prettier 3.0
test.js
[error] test.js: SyntaxError: Unexpected token: ')' (1:6)
[error] > 1 | 1 (+-) hoge
[error]     |

Rensa filnamn innan ignorerad filkod skrivs ut till skärmen (#14794 by @fisker)

# Input
echo test.js > .prettierignore
echo code > test.js
prettier ./test.js

# Prettier 2.8
test.jscode

# Prettier 3.0
code