Hoppa till huvudinnehållet

Prettier 1.14: Stöd för YAML

· 18 min att läsa
Ika
Ika
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 lägger till stöd för YAML, pragma (dvs. /** @prettier */) för alla språk och förbättrar prestandan för stora filer. Den lägger också till stöd för flera nya syntaxfunktioner och innehåller några formateringsjusteringar för att göra din kod ännu snyggare. ✨

Höjdpunkter​

YAML​

Stöd för YAML (#4563, #4742, #4773, #4854 av @ikatyang)​

Prettier kan nu formatera YAML-filer! 🎉

Implementationen följer YAML-specifikationen mycket väl och backas upp av det utmärkta yaml-paketet tack vare @eemeli. Några höjdpunkter:

Radbrytning​

Precis som i Markdown kommer vi att bryta löpande text vid 80 tecken om det inte påverkar filens innebörd.

Indata:

>
  Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valourous visitation of a bygone vexation stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition! The only verdict is vengeance; a vendetta held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it’s my very good honour to meet you and you may call me V.

Utdata: (--prose-wrap always)

>
  Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim
  and villain by the vicissitudes of Fate. This visage, no mere veneer of
  vanity, is a vestige of the vox populi, now vacant, vanished. However, this
  valourous visitation of a bygone vexation stands vivified and has vowed to
  vanquish these venal and virulent vermin vanguarding vice and vouchsafing the
  violently vicious and voracious violation of volition! The only verdict is
  vengeance; a vendetta held as a votive, not in vain, for the value and
  veracity of such shall one day vindicate the vigilant and the virtuous.
  Verily, this vichyssoise of verbiage veers most verbose, so let me simply add
  that it’s my very good honour to meet you and you may call me V.

Observera: alternativet proseWrap är som standard inställt på preserve, så du måste ange always eller never för att aktivera den här funktionen.

Ignorera en del av filen​

Om du av någon anledning inte vill formatera en del av YAML-filen kan du alltid lägga till en ignorerande kommentar före den:

# prettier-ignore
key  : value
hello: world

Front Matter​

Formatera YAML front matter (#4773 av @ikatyang)​

Prettier kan nu formatera YAML front matter avgränsat med --- i CSS- och Markdown-filer:

Indata & Utdata (Prettier 1.13):

---
key  : value
---

# heading

content

Utdata (Prettier 1.14):

---
key: value
---

# heading

content

Pragma​

Stöd för requirePragma/insertPragma i alla språk (#4688, #4699, #4713 av @ikatyang)​

Prettier 1.7.0 och 1.8.0 introducerade två nya alternativ: --require-pragma och --insert-pragma. Dessa alternativ stöddes dock bara i ett fåtal språk. Nu finns dessa alternativ tillgängliga i alla språk, inklusive YAML!

  • YAML

    # @prettier

    key: value

  • CSS/Less/SCSS

    /** @prettier */

    .class {
      display: none;
    }

  • GraphQL

    # @prettier

    query Browse($offset: Int) {
      browse(offset: $offset)
    }

  • Vue

    <!-- @prettier -->

    <template>
      <div>Template</div>
    </template>

JavaScript​

Inlinea aldrig decorators om de inte är ensamma parameter-decorators (#4830 av @suchipi)​

Tidigare var decorators alltid inlinade eftersom MobX använde det som konvention, men feedback från communityn visade att MobX är det enda stora biblioteket som följer denna konvention. Prettier placerar nu decorators på egna rader om de inte är parameter-decorators.

// Input
@observer
class OrderLine {
  @observable
  price: number = 0;
  @observable amount: number = 1;

  foo(@required name) {
    console.log(name);
  }
}

// Output (Prettier 1.13)
@observer
class OrderLine {
  @observable price: number = 0;
  @observable amount: number = 1;

  foo(@required name) {
    console.log(name);
  }
}

// Output (Prettier 1.14)
@observer
class OrderLine {
  @observable
  price: number = 0;
  @observable
  amount: number = 1;

  foo(@required name) {
    console.log(name);
  }
}

Hantera JSX-whitespace separat från fbt-whitespace (#4717 av @karl)​

Tidigare bevarades alltid JSX-whitespace eftersom Facebook har en anpassad översättningspipeline (fbt) som använder JSX-syntax men hanterar whitespace annorlunda än vanlig JSX, vilket innebar att vi inte kunde ändra JSX-whitespace utan att bryta Facebooks kodbas. I Prettier 1.14 upptäcker vi nu Facebooks fbt-taggar och hanterar whitespace för dem separat från andra JSX-taggar, vilket förbättrar konsistensen mellan olika men ekvivalenta indata.

// Input and Output from Prettier 1.13
first = (
  <div>
    Text<br />
    More text<br />
    And more<br />
  </div>
);

second = (
  <div>
    Text<br />More text<br />And more<br />
  </div>
);

third = (
  <div>
    Text
    <br />
    More text
    <br />
    And more
    <br />
  </div>
);

// Output from Prettier 1.14
first = (
  <div>
    Text
    <br />
    More text
    <br />
    And more
    <br />
  </div>
);

second = (
  <div>
    Text
    <br />
    More text
    <br />
    And more
    <br />
  </div>
);

third = (
  <div>
    Text
    <br />
    More text
    <br />
    And more
    <br />
  </div>
);

När texten som separerar taggar eller uttryck bara är ett enda tecken skriver vi ut hela gruppen på en enda rad där det är möjligt.

// Input and Output from Prettier 1.13
x = (
  <div>
    {hour}:{minute}:{second}
  </div>
);

x = (
  <div>
    {hour}
    :
    {minute}
    :
    {second}
  </div>
);

x = (
  <div>
    {hour}:
    {minute}:
    {second}
  </div>
);

// Output from Prettier 1.14
x = (
  <div>
    {hour}:{minute}:{second}
  </div>
);

x = (
  <div>
    {hour}:{minute}:{second}
  </div>
);

x = (
  <div>
    {hour}:{minute}:{second}
  </div>
);

Det förbättrar också utdata för edge cases som denna:

// Input
this_really_should_split_across_lines =
  <div>
    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
  </div>

// Output (Prettier 1.13)
this_really_should_split_across_lines = (
  <div>
    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{
      stuff
    }after
  </div>
);


// Output (Prettier 1.14)
this_really_should_split_across_lines = (
  <div>
    before
    {stuff}
    after
    {stuff}
    after
    {stuff}
    after
    {stuff}
    after
    {stuff}
    after
    {stuff}
    after
    {stuff}
    after
  </div>
);

Bryt JSX i pilfunktioner i JSX-uttryck (#4601 av @duailibe)​

I tidigare versioner följde JSX i pilfunktioner i JSX-uttryck den generella fit-or-break-regeln, men det blir mindre lättläst vid iteration över arrayer. Prettier 1.14 tvingar dessa pilfunktioner att brytas, vilket förbättrar läsbarheten.

// Input
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
)

// Output (Prettier 1.13)
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>
  </section>
);

// Output (Prettier 1.14)
const UsersList = ({ users }) => (
  <section>
    <h2>Users list</h2>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </section>
);

TypeScript​

Stöd för TypeScript 3.0 (#4625, #4757 av @ikatyang)​

Några nya funktioner med ny syntax läggs till i det kommande TypeScript 3.0: unknown-typen och tupler i rest-parametrar och spread-uttryck. Prettier 1.14 lägger till stöd för dessa så du kan formatera dem när TypeScript 3.0 släpps.

// UnknownType
const json: unknown = JSON.parse(jsonText);

// RestType
type Foo = [string, number];
type Bar = [boolean, ...Foo];

// OptionalType
type Baz = [string, number?];

JSON​

Placera inte värden på separat rad från nyckeln (#4852 av @ikatyang)​

Att placera långa värden på nya rader är en kärnfunktion i Prettier, men vi upptäckte att det inte förbättrar läsbarheten för objekt med långa strängvärden i JSON-filer. Prettier 1.14 flyttar inte ett objekts strängvärde oavsett om det får plats i utskriftsbredden eller inte.

// Input
{
  "description": "a long long long long long long long long long long long long long long long long long paragraph"
}

// Output (Prettier 1.13)
{
  "description":
    "a long long long long long long long long long long long long long long long long long paragraph"
}

// Output (Prettier 1.14)
{
  "description": "a long long long long long long long long long long long long long long long long long paragraph"
}

Markdown​

Justera listor endast om de redan är justerade (#4893 av @ikatyang)​

Tidigare justerade vi alltid listor för bättre indentering och som lösning på felaktig tolkning av indenterade kodblock, men detta introducerade dubbel mellanrum före numrerade listor, vilket inte är vanligt i markdown. I Prettier 1.14 justerar vi listor endast i följande fall:

  • De är redan justerade.

  • Det finns minst två mellanslag före det första listobjektet.

  • Det finns ett indenterat kodblock inuti.

Indata:

1.  123
1.  123

---

1.   123
1. 123

---

11. 123
1.  123

---

11. 123
1. 123

---

1. 123
1. 123

Utdata: (Prettier 1.13)

1.  123
1.  123

---

1.  123
1.  123

---

11. 123
1.  123

---

11. 123
1.  123

---

1.  123
1.  123

Utdata: (Prettier 1.14)

1.  123
1.  123

---

1.  123
1.  123

---

11. 123
1.  123

---

11. 123
1. 123

---

1. 123
1. 123

Prestanda​

Prestandaförbättring på stora filer (#4790, #4848 av @sompylasar)​

Prettiers kärnfunktion är att bryta rader när de överskrider utskriftsbredden, och för att göra detta måste vi beräkna varje teckens visuella bredd. Det enklaste sättet är att använda JavaScripts String#length-egenskap, men vissa icke-ASCII-tecken som CJK-tecken har bredder större än latinska tecken. Som lösning ersatte vi dessa 2-tecken-breda tecken med 2 mellanslag före längdberäkning. Detta fungerar men saktar ner Prettier eftersom ersättningen måste köras på varje token. I Prettier 1.14 kontrollerar vi om strängen endast innehåller ASCII-tecken så vi slipper göra onödiga strängersättningar. Detta ger en 20% snabbare körning på stora filer.

Andra ändringar​

API/CLI​

Stöd för relativa sökvägar för plugins och pluginSearchDirs i konfigurationsfiler (#4667 av @ikatyang)​

I Prettier 1.13 introducerade vi ett nytt alternativ pluginSearchDirs som ändrar var Prettier letar efter plugins. Det fungerade bra när det angavs i CLI:n eftersom det alltid var relativt till aktuell katalog, men relativa sökvägar fungerade inte i konfigurationsfiler. I Prettier 1.14 stöds nu relativa sökvägar för både pluginSearchDirs och plugins i konfigurationsfiler.

Kasta inte fel om prettier installeras i katalog utan namnet prettier (#4706 by @asottile)​

Vi lade till stöd för globalt installerade plugins i Prettier 1.13 genom att söka uppåt i katalogträdet för att hitta närmaste node_modules från prettier. Vi antog att det alltid skulle finnas en prettier-katalog vilket fick Prettier att krascha om den fanns i en annorlunda namngiven katalog. Vi ändrade söklogiken i Prettier 1.14 så du nu borde kunna byta namn på prettier-katalogen om behovet uppstår (till exempel vid publicering av en fork till npm).

Stöd filepath i webbläsare (#4721 by @ikatyang)​

I Prettier 1.13 lade vi till förstahandsstöd för att köra Prettier i webbläsaren, men enda sättet att välja parser var via alternativet parser. Prettier 1.14 lägger till stöd för alternativet filepath i webbläsar-API:t vilket låter Prettier härleda vilken parser som ska användas, precis som med Node.js-API:t. Detta bör vara särskilt användbart för webbaserade editortjänster!

Exponera isPreviousLineEmpty för plugins (#4748 by @warrenseine)​

Tidigare exponerade vi isNextLineEmpty för plugins men inte isPreviousLineEmpty. Prettier 1.14 exponerar detta, eftersom det kan vara användbart i scenarier som direktiv i C#.

JavaScript​

Stöd BigInt-literaler (#4697 by @ikatyang)​

BigInt-literaler stöds nu i standardparsern babylon.

const bigInt = 1n;

Stöd throw-uttryck (#4695 by @VojtechStep)​

Throw-uttryck stöds nu i standardparsern babylon.

const assert = x => x || throw new Error('...');

Expandera alltid första argumentet om andra argumentet också är ett anropsuttryck (#4657 by @duailibe)​

Tidigare hade vi ett specialfall för att inte bryta funktionsanrop om endast 2 parametrar skickades och första parametern var en funktion. Detta fungerade bra, men om andra parametern också var en funktion såg det inte särskilt bra ut.

// Input
somePromise.then((args) => {
  this.props.receiveFavoritesActions(id, [].concat(...args));
}, ({ isCanceled }) => !isCanceled && logger.warn(`Error getting actions for the product: ${id}`));

// Output (Prettier 1.13)
somePromise.then(args => {
  this.props.receiveFavoritesActions(id, [].concat(...args));
}, ({ isCanceled }) => !isCanceled && logger.warn(`Error getting actions for the product: ${id}`));

// Output (Prettier 1.14)
somePromise.then(
  args => {
    this.props.receiveFavoritesActions(id, [].concat(...args));
  },
  ({ isCanceled }) =>
    !isCanceled && logger.warn(`Error getting actions for the product: ${id}`)
);

Lägg till parenteser för await i bind (#4778 by @ikatyang)​

Tidigare tog Prettier felaktigt bort nödvändiga parenteser för await i experimentell bind-syntax, vilket ändrade dess betydelse. Prettier 1.14 behåller nu parenteserna korrekt.

// Input
const doBothThings = async () => {
    const request = doAsyncThing();
    return (await request)::doSyncThing();
};

// Output (Prettier 1.13)
const doBothThings = async () => {
    const request = doAsyncThing();
    return await request::doSyncThing(); // means `await (request::doSyncThing)`
};

// Output (Prettier 1.14)
const doBothThings = async () => {
    const request = doAsyncThing();
    return (await request)::doSyncThing();
};

Tillåt super och await på toppnivå (#4823 by @ikatyang)​

super och await får inte finnas på andra ställen än i klasser respektive async-funktioner, men vårt range format-alternativ fungerade inte helt korrekt vid markering av funktionsinnehåll. Prettier 1.14 tillåter dem att finnas överallt.

super();

await doSomething();

Svartlista this och super i funktionell kompositionsheuristik (#4836 by @princed)​

I Prettier 1.13 förbättrade vi formateringen för funktionell komposition (t.ex. pipe, compose etc.) genom att placera parametrarna på egna rader, men detta introducerade falska positiva träffar för funktioner med samma namn i klasser. Prettier 1.14 svartlistar nu this och super i funktionell kompositionsheuristik.

// Input
class X {
  x() {
    this.compose(a(), b);
    super.compose(a(), b);
  }
}

// Output (Prettier 1.13)
class X {
  x() {
    this.compose(
      a(),
      b
    );
    super.compose(
      a(),
      b
    );
  }
}

// Output (Prettier 1.14)
class X {
  x() {
    this.compose(a(), b);
    super.compose(a(), b);
  }
}

TypeScript​

Stöd för import.meta (#4762 av @ikatyang)​

I Prettier 1.13 stödde versionen av TypeScript-parsern vi använde inte tolkningen av import.meta-syntaxen. Vi uppdaterade vår TypeScript-parser i Prettier 1.14 så att de nu tolkas och formateras korrekt.

console.log(import.meta.url);

Valfri egenskap med StringLiteral-nyckel i klass (#4762 av @ikatyang)​

I den tidigare versionen togs ? i en valfri egenskap med en strängliteral som nyckel bort felaktigt. Vi fixade detta fel i Prettier 1.14 så att den inte tas bort.

// Input
export class ClassExample {
  "a-prop"?: boolean;
}

// Output (Prettier 1.13)
export class ClassExample {
  "a-prop": boolean;
}

// Output (Prettier 1.14)
export class ClassExample {
  "a-prop"?: boolean;
}

Kasta fel vid flera superklasser i klass (#4762 av @ikatyang)​

Klasser får bara ha en överordnad klass men TypeScripts AST tillåter flera eftersom extends-satsen internt har samma struktur som implements-satsen. Tidigare ignorerades extra superklasser tyst under utskrift, vilket kunde orsaka förvirring efter formatering. I Prettier 1.14 markeras de nu som syntaxfel istället.

// Input
class Foo extends BarComponent, BazService, QuuxProvider {}

// Output (Prettier 1.13)
class Foo extends BarComponent {}

// Output (Prettier 1.14)
/*
  SyntaxError: Classes can only extend a single class.
*/

Stöd för JSX-spridningsbarn (#4885 av @ikatyang)​

Tidigare togs ... i barnspridning i JSX-uttryck bort felaktigt. Vi fixade detta problem i Prettier 1.14.

// Input
const x = <div>{...[0]}</div>

// Output (Prettier 1.13)
const x = <div>{[0]}</div>;

// Output (Prettier 1.14)
const x = <div>{...[0]}</div>;

Flow​

Stöd för .js.flow-tillägg (#4777 av @ikatyang)​

.js.flow är filtillägget för Flow-deklarationsfiler, men tidigare kände vi inte igen det. I Prettier 1.14 ska de plockas upp automatiskt så att du inte behöver lägga till överstyrningar för dem i konfigurationsfiler.

CSS/Less/SCSS​

Hantera ny rad mellan front-matter och kommentar korrekt (#4701 av @evilebottnawi)​

Flera nya rader mellan front matter och en CSS-kommentar ersattes med ett mellanslag i Prettier 1.13. I Prettier 1.14 skriver vi istället ut en ny rad mellan dem.

/* Input */
---
key: value
---

/* comment */
.class {
  display: none;
}

/* Output (Prettier 1.13) */
---
key: value
---
 /* comment */
.class {
  display: none;
}

/* Output (Prettier 1.14) */
---
key: value
---

/* comment */
.class {
  display: none;
}

Stöd för at-regel som slutar med högerklammer (#4733 av @davidgomes)​

I den tidigare versionen tolkades at-regler som slutade med } inte korrekt. Prettier 1.14 känner nu igen och formaterar dem korrekt.

/* Input */
@mixin placeholder {
    &::placeholder {@content}
}

/* Output (Prettier 1.13) */
/*
  SyntaxError: CssSyntaxError Unclosed block
*/

/* Output (Prettier 1.14) */
@mixin placeholder {
  &::placeholder {
    @content;
  }
}

Markdown​

Bevara e-postautolänk (#4740 av @ikatyang)​

Autolänkar formaterades som deras URL i den tidigare versionen, vilket är okej. Men det finns ett specialfall för e-postlänkar: de kommer att lösas som mailto:-länkar. I Prettier 1.14 bevaras e-postautolänkar.

<!-- Input -->
<hello@example.com>

<!-- Output (Prettier 1.13) -->
<mailto:hello@example.com>

<!-- Output (Prettier 1.14) -->
<hello@example.com>

Kräv inte mellanslag efter språknamn för Markdown-block (#4783 av @kachkaev)​

I Prettier 1.12 lade vi till stöd för inhägnade kodblocksspråk följt av attribut, vilket kräver att de separeras med blanksteg. Men detta introducerade en inkonsekvens för kodblocksmarkering i Atom: kodblocks markeras men vi formaterar dem inte. Vi uppdaterade vår detekteringslogik i Prettier 1.14 så att de nu ska bete sig på samma sätt.

<!-- Input -->
```js{something=something}
const x   =   1;
```

<!-- Output (Prettier 1.13) -->
```js{something=something}
const x   =   1;
```

<!-- Output (Prettier 1.14) -->
```js{something=something}
const x = 1;
```

Använd språkalias för att hitta parser för Markdown-kodblock (#4734 av @ikatyang)​

Tidigare använde vi språkets name och extensions för att bestämma vilken parser som ska användas för kodblocksformatering, men vi upptäckte att det är omöjligt att formatera JSON with Comments-kodblock och samtidigt hålla syntaxmarkering aktiv eftersom de delar samma .json-tillägg som JSON och kommentarsyntaxmarkering endast är tillgänglig i JSON5. Vi lade till stöd för att använda språkets aliases för att hitta parser i Prettier 1.14 så att du ska kunna använda jsonc för att formatera och utlösa syntaxmarkering för JSON with Comments-kodblock.

<!-- Input -->
```jsonc
// comment
{"a":1}
```

<!-- Output (Prettier 1.13) -->
```jsonc
// comment
{"a":1}
```

<!-- Output (Prettier 1.14) -->
```jsonc
// comment
{ "a": 1 }
```

Bevara entitet för kodat tecken om dess kodpunkt är större än U+FFFF (#4832 av @ikatyang)​

Markdown-tolken vi använder (remark) tolkar varje kodat tecken till en enda AST-nod så att vi kan återställa det kodade tecknet genom att detektera om värdet i AST-noden har längden 1. Men det finns ett undantag: ett enda tecken kan ha längden 2 om dess kodpunkt är större än 0xffff eftersom JavaScript använder UTF-16 (2 byte) för att koda strängar. Prettier 1.14 känner nu igen dessa tecken korrekt så att de inte omvandlas till det bokstavliga tecknet.

<!-- Input -->
&#x1F609;

<!-- Output (Prettier 1.13) -->
😉

<!-- Output (Prettier 1.14) -->
&#x1F609;

Vue​

Stöd för områdesformatering i Vue-filer (#4868 av @ikatyang)​

Tidigare fanns inte områdesformatering tillgängligt i Vue, men Prettier 1.14 lägger till stöd för det.

GraphQL​

Bevara radbrytning i icke-block stringValue (#4808 av @ikatyang)​

Icke-block strängvärden får endast vara på en rad men Prettier 1.13 omvandlade felaktigt det escapeade \n till en riktig radbrytning. Prettier 1.14 skriver nu ut \n korrekt.

# Input
{
  foo(input: {multiline: "ab\ncd"}) { id }
}

# Output (Prettier 1.13)
{
  foo(input: { multiline: "ab
cd" }) {
    id
  }
}

# Output (Prettier 1.14)
{
  foo(input: { multiline: "ab\ncd" }) {
    id
  }
}