Hoppa till huvudinnehållet

Prettier 1.17: Fler alternativ för citattecken och stöd för delade konfigurationer

· 6 min att läsa
Lucas Duailibe
Lucas Duailibe
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 ger länge efterfrågad flexibilitet för citattecken kring objektegenskaper, möjliggör att Prettier-konfigurationer kan delas via paket, lägger till en LWC-parser, stödjer ny GraphQL-syntax och fixar många formateringsbuggar.

Höjdpunkter​

JavaScript​

Lägg till alternativ för när Prettier använder citattecken kring objektegenskaper (#5934 av @azz)​

--quote-props <as-needed|preserve|consistent>

as-needed (standard) - Lägg bara till citattecken kring objektegenskaper där det krävs. Nuvarande beteende. preserve - Behåll inputens citattecken. Användbart för användare av Google's Closure Compiler i Advanced Mode, som behandlar citerade egenskaper annorlunda. consistent - Om minst en egenskap i ett objekt kräver citattecken, citera alla egenskaper - liknar ESLints alternativ consistent-as-needed.

// Input
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

// Output (Prettier 1.16 or --quote-props=as-needed)
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  origin: "prettier.io"
};

// Output (--quote-props=consistent)
const headers = {
  "accept": "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

// Output (--quote-props=preserve)
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

Konfiguration​

Stöd för delade konfigurationer (#5963 av @azz)​

Att dela en Prettier-konfiguration är enkelt: publicera en modul som exporterar ett konfigurationsobjekt, t.ex. @company/prettier-config, och referera till det i din package.json:

{
  "name": "my-cool-library",
  "version": "9000.0.1",
  "prettier": "@company/prettier-config"
}

Om du inte vill använda package.json kan du använda någon av de stödda filtilläggen för att exportera en sträng, t.ex. .prettierrc.json:

"@company/prettier-config"

@azz har skapat ett exempel på ett konfigurationspaket. Du kan se källkoden på GitHub eller installera det via npm.

Den här metoden erbjuder inte ett sätt att utöka konfigurationen för att skriva över vissa egenskaper från den delade konfigurationen. Om du behöver göra det, importera filen i en .prettierrc.js-fil och exportera ändringarna, t.ex:

module.exports = {
  ...require("@company/prettier-config"),
  semi: false,
};

Allmänt​

JavaScript​

Respektera radbrytningar mellan parametrar (#5836 av @evilebottnawi)​

// Input
function foo(
  one,

  two,
  three,
  four,


  five,
  six,
  seven,
  eight,
  nine,
  ten,

  eleven

) {}

// Output (Prettier 1.16)
function foo(
  one,
  two,
  three,
  four,
  five,
  six,
  seven,
  eight,
  nine,
  ten,
  eleven
) {}

// Output (Prettier 1.17)
function foo(
  one,

  two,
  three,
  four,

  five,
  six,
  seven,
  eight,
  nine,
  ten,

  eleven
) {}

Fixa kommentarer vid flerradig dynamisk import (#6025 av @noahsug)​

// Input
import(
  /* Hello */
  'something'
  /* Hello */
)
import(
  'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'
)

// Output (Prettier stable)
import(/* Hello */
"something");
/* Hello */
import('myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename');

// Output (Prettier master)
import(
  /* Hello */
  'something'
  /* Hello */
)
import(
  'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'
);

Lägg till parenteser för omedelbart konstruerade funktioner och klasser (#5996 av @bakkot)​

// Input
new class {};
new function() {}

// Output (Prettier stable)
new class {}();
new function() {}();

// Output (Prettier master)
new (class {})();
new (function() {})();

Fixa parenteslogik för optional chaining-uttryck och closure-typhänvisningar (#5843 av @yangsu)​

Logiken introducerad i #4542 skrev ut parenteser på fel ställen och genererade ogiltig kod för optional chaining-uttryck (med fler än 2 noder) eller closure-typhänvisningar som slutade med funktionsanrop.

// Input
(a?.b[c]).c();
let value = /** @type {string} */ (this.members[0]).functionCall();

// Output (Prettier stable)
a(?.b[c]).c();
let value = /** @type {string} */ this(.members[0]).functionCall();

// Output (Prettier master)
(a?.b[c]).c();
let value = /** @type {string} */ (this.members[0]).functionCall();

Markdown​

Justera inte tabellinnehåll om det överskrider utskriftsbredden och --prose-wrap never är satt (#5701 av @chenshuai2144)​

Den justerade tabellen är mindre läsbar än den kompakta om den är särskilt lång och ordbrytning inte är aktiverat i editorn, så vi skriver nu ut dem som kompakta tabeller i dessa situationer.

<!-- Input -->
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |

<!-- Output (Prettier stable, --prose-wrap never) -->
| Property   | Description                                                                                                           | Type    | Default |
| ---------- | --------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| bordered   | Toggles rendering of the border around the list                                                                       | boolean | false   |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string  | -       |

<!-- Output (Prettier master, --prose-wrap never) -->
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |

TypeScript​

Stöd för readonly-operatorn (#6027 av @ikatyang)​

// Input
declare const array: readonly number[];

// Output (Prettier stable)
// SyntaxError: ',' expected.

// Output (Prettier master)
declare const array: readonly number[];

HTML​

Lägg till stöd för Lightning Web Components (#5800 av @ntotten)​

Stöder Lightning Web Components (LWC)-mallformat för HTML-attribut genom att lägga till en ny parser kallad lwc.

// Input
<my-element data-for={value}></my-element>

// Output (Prettier stable)
<my-element data-for="{value}"></my-element>

// Output (Prettier master)
<my-element data-for={value}></my-element>

Angular: Lägg inte till onödiga parenteser kring pipes (#5929 av @voithos)​

I vissa fall lades omslutande parenteser till kring vissa pipes inuti attribut, men dessa läggs inte längre till när de inte påverkar uttryckets resultat.

// Input
<div *ngIf="isRendered | async"></div>

// Output (Prettier stable)
<div *ngIf="(isRendered | async)"></div>

// Output (Prettier master)
<div *ngIf="isRendered | async"></div>

GraphQL​

Stöd för variabeldirektiv (#6020 av @adek05)​

Prettier stöder nu formatering av variabeldirektiv.

// Input
query Q($variable: Int   @directive) {node}

// Output (Prettier stable)
query Q($variable: Int) {
  node
}

// Output (Prettier master)
query Q($variable: Int @directive) {
  node
}

Stöd för GraphQL-fragmentvariabler (#6016 av @adek05)​

Prettier stöder nu formatering av fragmentvariabler.

// Input
fragment F($var: Int) on Type { node }

// Output (Prettier stable)
// Fails to parse

// Output (Prettier master)
fragment F($var: Int) on Type {
   node
}

CLI​

Automatisk identifiering av scopade plugins (#5945 av @Kocal)​

Prettier stöder nu automatisk inläsning av scopade plugins med namnet @scope-name/prettier-plugin-*.