Prettier 1.18: Många korrigeringar och OpenCollective

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 inga glänsande nya funktioner, men många korrigeringar för JavaScript, särskilt JSX och malliteraler, TypeScript och Markdown.

Det är också ett bra tillfälle att påminna om att Prettier nu tar emot donationer! Om du gillar Prettier och vill stödja vårt arbete, besök vår OpenCollective.

Höjdpunkter

JavaScript

Sluta bryta enkla malliteraler (#5979 by @jwbay)

Detta är en av Prettiers funktioner som får många ändringsönskemål: brytning av enkla uttryck inuti malliteraler. Tidigare bröt Prettier uttrycken på flera rader om hela literalens längd överskred utskriftsbredden. Nu förhindrar vi radbrytning om uttrycket är enkelt.

Detta är en förbättring jämfört med tidigare, men det finns fortfarande arbete kvar inom detta område.

// Input
console.log(chalk.white(`Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${coverageSummary.total.lines.pct}%`))

// Output (Prettier stable)
console.log(
  chalk.white(
    `Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${
      coverageSummary.total.lines.pct
    }%`
  )
);

// Output (Prettier master)
console.log(
  chalk.white(
    `Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${coverageSummary.total.lines.pct}%`
  )
);

Sluta konvertera tomma JSX-element till självslutande element (#6127 by @duailibe)

Prettier har alltid konverterat tomma JSX-element (<div></div>) till självslutande element (<div />) eftersom de är ekvivalenta.

Vi har fått feedback att man under utveckling gärna vill skriva öppnings- och stängningstaggar och lämna dem för att lägga till barn senare, men Prettier konverterade dem till självslutande element, vilket tvingade utvecklaren att manuellt konvertera tillbaka dem. Detta har ändrats i den här versionen.

// Input
function Foo() {
  return <div></div>;
}

// Output (Prettier stable)
function Foo() {
  return <div />;
}

// Output (Prettier master)
function Foo() {
  return <div></div>;
}

Andra ändringar

JavaScript

Korrigera typomvandlingar i Closure-kompilatorn (#5947 by @jridgewell)

Om en avslutande parentes följer efter en typomvandling i ett inre uttryck, skulle typomvandlingen radbryta allt till den följande parentesen.

// Input
test(/** @type {!Array} */(arrOrString).length);
test(/** @type {!Array} */((arrOrString)).length + 1);
// Output (Prettier stable)
test(/** @type {!Array} */ (arrOrString.length));
test(/** @type {!Array} */ (arrOrString.length + 1));
// Output (Prettier master)
test(/** @type {!Array} */ (arrOrString).length);
test(/** @type {!Array} */ (arrOrString).length + 1);

Korrigera Closure-typomvandlingar utan mellanslag (#6116 by @jridgewell)

Tidigare krävdes ett mellanslag mellan @type och öppnande { i en Closure-typomvandling, annars skulle den omslutande parentesen tas bort. Closure kräver självt inget mellanslag.

// Input
const v = /** @type{string} */(value);

// Output (Prettier stable)
const v = /** @type{string} */ value;

// Output (prettier master)
const v = /** @type{string} */ (value);

Förhindra att citattecken läggs till vid användning av --quote-props=consistent när objekt har siffror eller beräknade uttryck som nycklar (#6119 och #6138 by @duailibe)

Tidigare lade Prettier till onödiga citattecken till nycklar i ett objekt, eller egenskaper och metoder i klasser, om det fanns minst en beräknad nyckel med ett "komplext" uttryck (t.ex. ett medlemsuttryck) eller en numerisk literal.

// Input
const obj = {
  foo: "",
  [foo.bar]: "",
};

const other = {
  foo: "",
  1: ""
};

// Output (Prettier stable)
const obj = {
  "foo": "",
  [foo.bar]: "",
};

const other = {
  "foo": "",
  1: ""
};

// Output (Prettier master)
const obj = {
  foo: "",
  [foo.bar]: "",
};

const other = {
  foo: "",
  1: ""
};

Lägg till parenteser i JSX-spridningselement med logiska uttryck (#6130 by @duailibe)

Tidigare lade Prettier inte till parenteser i JSX-spridningselement eftersom de inte är nödvändiga, men för att vara konsekvent med spridningsoperatorn i objekt och arrayer lägger vi nu till dem även i JSX.

// Input
<Component {...(props || {})} />;

// Output (Prettier stable)
<Component {...props || {}} />;

// Output (Prettier master)
<Component {...(props || {})} />;

Hantera kommentarer korrekt i tomma pilfunktionsuttryck (#6086 by @evilebottnawi)

// Input
const fn = (/*event, data*/) => doSomething(anything);

// Output (Prettier stable)
const fn = () => /*event, data*/ doSomething(anything);

// Output (Prettier master)
const fn = (/*event, data*/) => doSomething(anything);

Kläm inte ihop sekvensuttryck i objektegenskaper (#6088 by @evilebottnawi)

// Input
const a = {
  someKey:
    (longLongLongLongLongLongLongLongLongLongLongLongLongLongName, shortName)
};

// Output (Prettier stable)
const a = {
  someKey: (longLongLongLongLongLongLongLongLongLongLongLongLongLongName,
  shortName)
};

// Output (Prettier master)
const a = {
  someKey:
    (longLongLongLongLongLongLongLongLongLongLongLongLongLongName, shortName)
};

Lägg till stöd för externa stilar i styled-jsx (#6089 by @hongrich)

Lägg till stöd för 2 externa stiltaggar i styled-jsx/css: css.global och css.resolve. https://github.com/zeit/styled-jsx/#external-css-and-styles-outside-of-the-component

Malltaggen css stöds redan av Prettier.

// Input
const styles = css.resolve`
.box {background:black;
}`;

// Output (Prettier stable)
const styles = css.resolve`
.box {background:black;
}`;

// Output (prettier master)
const styles = css.resolve`
  .box {
    background: black;
  }
`;

Behåll parenteser runt funktioner och klasser i export default-deklarationer (#6133 by @duailibe)

Prettier tog tidigare bort parenteser från vissa uttryck i export default, men om dessa är komplexa uttryck som börjar med function eller class krävs parenteserna.

Se nedan några praktiska exempel, inklusive ett som påverkar TypeScript.

// Input
export default (function log() {}).toString();
export default (function log() {} as typeof console.log);

// Output (Prettier stable)
export default function log() {}.toString();
export default function log() {} as typeof console.log; // syntax error

// Output (Prettier master)
export default (function log() {}).toString();
export default (function log() {} as typeof console.log);

Åtgärda parentesfel för extremfall med anrop och new (#6148 by @bakkot)

Att lägga till alla och endast nödvändiga parenteser när man blandar new med funktionsanrop är knepigt. Den här ändringen åtgärdar två problem där nödvändiga parenteser utelämnades och ett där överflödiga parenteser lades till.

// Input
new (x()``.y)();
new (x()!.y)();
new e[f().x].y()

// Output (Prettier stable)
new x()``.y();
new x()!.y();
new e[(f()).x].y();

// Output (Prettier master)
new (x())``.y();
new (x())!.y();
new e[f().x].y();

Fixa kapslade inbäddningar (JS i HTML i JS) (#6038 av @thorn0)

Tidigare, om JS-kod inbäddad i HTML (via <script>) som var inbäddad i JS (via en malliteral) innehöll malliteraler, så formaterades inte den inre JS-koden.

// Input
const html = /* HTML */ `<script>var a=\`\`</script>`;

// Output (Prettier stable)
// SyntaxError: Expecting Unicode escape sequence \uXXXX (1:8)

// Output (Prettier master)
const html = /* HTML */ `
  <script>
    var a = \`\`;
  </script>
`;

Behåll nödvändiga parenteser runt bind-uttryck som skickas till new-uttryck (#6152 av @sosukesuzuki)

Tidigare tog Prettier bort nödvändiga parenteser runt ett bind-uttryck om det skickades till ett new-uttryck.

// Input
new (a::b)();

// Output (Prettier stable)
new a::b();

// Output (Prettier master)
new (a::b)();

Förhindra att onödiga parenteser läggs till runt bind-uttryck i egenskaper för medlemsuttryck (#6159 av @duailibe)

// Input
f[a::b];

// Output (Prettier stable)
f[(a::b)];

// Output (Prettier master);
f[a::b];

TypeScript

Behåll avslutande komma i TSX-typparametrar (#6115 av @sosukesuzuki)

Tidigare städades ett avslutande komma bort efter en enskild typparameter i en pilfunktion. Det formaterade resultatet är giltigt som TS, men ogiltigt som TSX. Detta är nu åtgärdat i 1.19.

// Input
type G<T> = any;
const myFunc = <T,>(arg1: G<T>) => false;

// Output (Prettier stable)
type G<T> = any;
const myFunc = <T>(arg1: G<T>) => false;

// Output (prettier master)
type G<T> = any;
const myFunc = <T,>(arg1: G<T>) => false;

Bryt inte upp anropsuttryck när det sista argumentet är en pilfunktion med en enkel returtyp (#6106 av @brainkim)

Åtgärdar ett specialfall där vi delade upp anropsuttryck som innehöll pilfunktioner med enkla returtyper.

app.get("/", (req, res): void => {
  res.send("Hello World!");
});

// Output (Prettier stable)
app.get(
  "/",
  (req, res): void => {
    res.send("Hello World!");
  },
);

// Output (Prettier master)
app.get("/", (req, res): void => {
  res.send("Hello World!");
});

Behåll ett par parenteser när det finns extra par (#6131 av @sosukesuzuki)

Tidigare tog Prettier bort nödvändiga parenteser när den försökte ta bort onödiga parenteser, i TypeScript.

// Input
type G = ((keyof T))[];

// Output (Prettier stable)
type G = keyof T[];

// Output (prettier master)
type G = (keyof T)[];

Behåll nödvändiga parenteser runt non-null-assertioner (#6136 av @sosukesuzuki, #6140 av @thorn0, #6148 av @bakkot)

Tidigare tog Prettier bort nödvändiga parenteser runt non-null-assertioner om resultatet av assertion-uttrycket anropades som en konstruktor.

// Input
const b = new (c()!)();

// Output (Prettier stable)
const b = new c()!();

// Output (Prettier master)
const b = new (c())!();

Behåll radbrytningar inom mappade typer (#6146 av @sosukesuzuki)

Tidigare tog Prettier bort radbrytningar inom mappade typer. För att göra det likt hur vi behandlar objektliteraler kommer vi att behålla radbrytningarna om de fanns i källkoden.

// Input
type A<T> = {
  readonly [P in keyof T]: T[P];
};

// Output (Prettier stable)
type A<T> = { readonly [P in keyof T]: T[P] };

// Output (Prettier master)
type A<T> = {
  readonly [P in keyof T]: T[P];
};

Lägg till avslutande komma på tuple-typer med --trailing-comma=all (#6172 av @sosukesuzuki)

TypeScript stöder ett avslutande komma på tuple-typer sedan version 3.3.

// Input
export type Foo = [
  number,
  number, // comment
];

// Output (Prettier stable)
export type Foo = [
  number,
  number // comment
];

// Output (Prettier master);
export type Foo = [
  number,
  number, // comment
];

Markdown

Bestäm korrekt antalet backticks i inline-kod (#6110 av @belochub)

Enligt CommonMark-specifikationen krävs det att man 'väljer en sträng med n backtick-tecken som avgränsare, där koden inte innehåller några strängar med exakt n backtick-tecken.'

Detta ändrar metoden för att hitta det nödvändiga antalet backticks från att använda 2 backticks när det finns en backtick-sträng av längd 1 i inline-kodblocket, och använda 1 backtick i alla andra fall, till att hitta en sträng med backticks av minsta möjliga längd som korrekt kan användas som avgränsare.

<!-- Input -->
``` 3 ``22`` `1` ```

`` 2 ```123``` `1` ``

<!-- Output (Prettier stable) -->
` 3 ``22`` `1` `

` 2 ```123``` `1` `

<!-- Output (Prettier master) -->
``` 3 ``22`` `1` ```

`` 2 ```123``` `1` ``

Handlebars

Medan stödet för Handlebars fortfarande är i beta, så släpper @GavinJoyce några fixar så att vi äntligen kan nå en stabil version!

Undvik att lägga till oönskat blanktecken efter komponenter (#6178 av @GavinJoyce)

Tidigare lade Prettier till ett blanktecken före /> och en radbrytning efter, även i början av en rad. Nu finns inte det extra blanktecknet och radbrytningen kvar.

// Input
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
  />
</div>

// Output (Prettier stable)
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
   />

</div>

// Output (Prettier master)
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
  />
</div>

API

Prettier fungerar nu i Atom igen (#6129 av @duailibe)

Atom har en säkerhetsfunktion som förhindrar att kod som innehåller eval får köras. En av Prettiers beroenden använder eval för att förhindra att bundlers inkluderar felsökningskod. Vi har nu säkerställt att denna eval inte hamnar i koden vi levererar till npm, vilket gör Prettier kompatibel med Atom igen.