Prettier 1.13: Erobrar webben!

27 maj 2018 · 22 min att läsa

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 flera nya syntaxfunktioner, formatteringsfixar och förstahandsstöd för arbete i webbläsaren.

Höjdpunkter

API/CLI

Prettier fungerar i webbläsaren!

Detta har länge önskats av teamet och våra användare och vi kan äntligen meddela att Prettier 1.13 har förstahandsstöd för körning i webbläsaren. Tidigare krävdes flera lösningar, men nu kan du enkelt ladda kärnpaketet och de parsers du vill använda.

<script src="https://unpkg.com/prettier@1.13.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@1.13.0/parser-babylon.js"></script>
<script src="https://unpkg.com/prettier@1.13.0/parser-graphql.js"></script>
<script type="text/javascript">
var formatButton = document.querySelector("#format");
var textInput = document.querySelector("#input");
formatButton.addEventListener("click", function() {
  var value = textInput.value;
  textInput.value = prettier.format(value, {
    parser: "babylon",
    plugins: prettierPlugins
  });
});</script>

Läs mer i dokumentationen eller prova på JS Bin.

Använd inte JavaScript-parsern som standard (#4528 by @duailibe)

I Prettier 1.12 och tidigare, när Prettier kördes på en fil utan filändelse, antogs filen innehålla JavaScript. Detta ledde till några förvirrande buggar:

Om du körde prettier på din .git-katalog, omformatterades filer och ditt git-repo kunde skadas.
Om du försökte köra prettier på HTML-filer kunde det ibland ge fel, eller så tolkades HTML som JSX och formatterades därefter (vilket ofta var osäkert).

I Prettier 1.13 ändrar vi detta beteende. Om Prettier inte kan avgöra filtyp från dess ändelse, och användaren inte manuellt angivit en parser, hoppar Prettier över filen.

För att formattera filer med icke-stödda eller icke-standardfiltyper kan du använda --parser för att specificera parser. Vid piping till stdin, inkludera --stdin-filepath så att prettier kan identifiera språk via filändelse.

I JavaScript-API:t kommer nu prettier.format och prettier.formatWithCursor att ge fel om du inte inkluderar parser eller filepath. Fel ges även om filepath anges men inte parser, och rätt parser inte kan härledas från sökvägen.

Metoden `prettier.getFileInfo()` och CLI-flaggan `--file-info` (#4341 by @kachkaev)

Tidigare fanns inget sätt att kontrollera om en fil skulle ignoreras (via .prettierignore) eller om den stöddes, så redigerarpluginvar fick implementera denna logik. Nu kan du i 1.13 kontrollera om en parser kan härledas (och vilken) samt om filen ignoreras innan format anropas.

Läs mer i dokumentationen.

Stöd för global Prettier och pluginvar (#4192 by @kachkaev)

Vid global installation kunde Prettier inte automatiskt hitta pluginvar eftersom de söktes i närmaste package.json. Nu söker Prettier i sin egen node_modules. För alternativa installationer finns ny flagga --plugin-search-dir för att ange sökväg.

Läs mer i Plugin-dokumentationen.

Förbättrad spårning av marköroffset (#4397 by @ds300)

Prettier 1.13 förbättrar avsevärt spårningen av marköroffset i flera fall där Prettier tidigare gav fel position, vilket fick redigeringsintegrationer att flytta markören till fel plats.

JavaScript

Inför fler parenteser i matematiska uttryck (#4413 och #4407 av @duailibe)

Prettier kommer nu lägga till parenteser runt modulooperationer när de finns inuti en additionsoperation eller vid blandning av olika multiplikationsoperationer, även om de inte är nödvändiga. Detta hjälper till att snabbare förstå kodsnuttar.

// Input
a % 10 - 5;
2 / 3 * 10 / 2 + 2;

// Output with Prettier 1.13
(a % 10) - 5;
((2 / 3) * 10) / 2 + 2;

Behåll AngularJS-tester med `inject` på en rad (#4495 av @thorn0)

Prettier kommer nu att behålla AngularJS-tester med beroendeinjektion på en enda rad, precis som den gör för våra andra tester.

// Input:
it("has calculated the answer correctly", inject(function(DeepThought) {
  expect(DeepThought.answer).toBe(42);
}));

// Output with Prettier 1.12.1:
it(
  "has calculated the answer correctly",
  inject(function(DeepThought) {
    expect(DeepThought.answer).toBe(42);
  })
);

// Output with Prettier 1.13:
it("has calculated the answer correctly", inject(function(DeepThought) {
  expect(DeepThought.answer).toBe(42);
}));

Bättre radbrytning för D3 (#4285 av @1wheel, #4505 av @duailibe)

I Prettier 1.12 och tidigare bröts kedjor som började med d3 och andra korta namn före det första .. I Prettier 1.13 lägger vi inte till en radbrytning efter namnet om det är kortare än indenteringbredden.

// Input
d3.select('body')
  .append('circle')
  .at({ width: 30, fill: '#f0f' })
  .st({ fontWeight: 600 })

// Output with Prettier 1.12.1:
d3
  .select("body")
  .append("circle")
  .at({ width: 30, fill: "#f0f" })
  .st({ fontWeight: 600 });

// Output with Prettier 1.13:
d3.select("body")
  .append("circle")
  .at({ width: 30, fill: "#f0f" })
  .st({ fontWeight: 600 });

Formatera den nya `describe.each`-tabellen i Jest 23 (#4423 av @ikatyang)

Jest 23 introducerade en ny funktion kallad datadrivna tester där du kan beskriva testexempel i en tabell. Prettier 1.13 inkluderar stöd för denna funktion och kommer automatiskt indentera tabellen när datadrivna tester används.

// Input
describe.each`
a|b|expected
${11   } | ${  1  }|${222}
${1-1}|${2+2}|${ 3333}
${2+1+2}|${1111}|${3}
`('$a + $b', ({a, b, expected}) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

// Output with Prettier 1.13
describe.each`
  a            | b        | expected
  ${11}        | ${1}     | ${222}
  ${1 - 1}     | ${2 + 2} | ${3333}
  ${2 + 1 + 2} | ${1111}  | ${3}
`("$a + $b", ({ a, b, expected }) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

Formatera funktionskomposition snyggare (#4431 av @suchipi)

En av de mest efterfrågade ändringarna i Prettier var att formatera funktionskomposition bättre. Detta mönster är ganska vanligt i funktionella programmeringsbibliotek som RxJS, Redux, Lodash och Ramda. I 1.13 har Prettier nu en heuristik för att upptäcka denna typ av funktionskomposition och formatera den så att de komponerade funktionerna hamnar på varsin rad. Detta förbättrar läsbarheten när funktioner som pipe, compose, flowRight etc. används.

// Input
compose(
  sortBy(x => x),
  flatten,
  map(x => [x, x * 2])
);

pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
);

// Output with Prettier 1.12.1
compose(sortBy(x => x), flatten, map(x => [x, x * 2]));

pipe(filter(x => x % 2 === 0), map(x => x + x), scan((acc, x) => acc + x, 0));

// Output with Prettier 1.13
compose(
  sortBy(x => x),
  flatten,
  map(x => [x, x * 2])
);

pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
);

Behåll parenteser runt `do`-uttryck vid behov och förbättra deras formatering (#4479 av @existentialism)

I Prettier 1.12 och tidigare fanns det fall där Prettier tog bort parenteser runt do-uttryck när det inte var säkert, vilket gjorde koden ogiltig. Dessa fall är nu åtgärdade i 1.13. Dessutom har formateringen av do-uttryck förbättrats generellt i denna release.

// Input
(do {});
(do {} + 1);
(1 + do {});

() => do {
  var obj = { foo: "bar", bar: "foo" };
  for (var key in obj) {
    obj[key];
  }
};

// Output with Prettier 1.12
do {
};
do {
} + 1;
1 +
  do {
  };

() =>
  do {
    var obj = { foo: "bar", bar: "foo" };
    for (var key in obj) {
      obj[key];
    }
  };

// Output with Prettier 1.13
(do {});
(do {} + 1);
1 + do {};

() => do {
  var obj = { foo: "bar", bar: "foo" };
  for (var key in obj) {
    obj[key];
  }
};

Flow

Skriv ut mixins och implements korrekt för klasser (#4326 av @existentialism)

I version 1.12 och tidigare tog Prettier felaktigt bort mixins och implements från flow-libdef-klasser, vilket ändrade kodens betydelse. Detta har åtgärdats i 1.13.

// Input
declare class A implements B {}
declare class C mixins D {}

// Output with Prettier 1.12
declare class A {}
declare class C {}

// Output with Prettier 1.13
declare class A implements B {}
declare class C mixins D {}

Lagt till stöd för nullish coalescing-operatorn och numeriska separators i litteraler (#4536 av @vjeux)

Dessa JS-funktioner stöddes redan med standardparsern Babylon, men Prettier 1.13 lägger till stöd för dem när Flow-parsern används.

Lagt till stöd för nya syntaxfunktioner i Flow (#4543, #4540 och #4551 av @existentialism)

Nya funktioner tillagda i Flow stöds nu av Prettier:

Infogade gränssnitt (inline interfaces)
```
type A = interface { p: string};
```
Explicita typargument (explicit type arguments)
```
fnCall<string>("name");
```
Syntax för proto-modifier
```
declare class A { proto: T }
```

TypeScript

Lagt till stöd för TypeScript-importtyper (#4429 och #4438 av @ikatyang)

En ny funktion i TypeScript 2.9 för att beskriva strukturen hos dynamiskt importerade moduler.

// Input
export const x: import("./foo") = { x: 0, y: 0 };

export let y: import("./foo2").Bar.I = { a: "", b: 0 };

export let shim: typeof import("./foo2") = { Bar: Bar2 };

// Output with Prettier 1.13
export const x: import("./foo") = { x: 0, y: 0 };

export let y: import("./foo2").Bar.I = { a: "", b: 0 };

export let shim: import("./foo2") = { Bar: Bar2 };

Stöd för generiska JSX-element i TypeScript tillagt (#4268 av @ikatyang)

En annan funktion i TypeScript 2.9 är stöd för generiska typer i JSX-element, och Prettier 1.13 kan nu formattera dessa.

// Example:
<MyComponent<number> data={12} />

Stöd för TaggedTemplateExpression typeParameters tillagt (#4353 av @ikatyang)

Även tillagt i TypeScript 2.9 - det är nu möjligt att skicka typ-parametrar till template expression-taggar.

// Example:
export const RedBox = styled.div<{ foo: string }>`
  background: red;
  ${props => props.foo};
`;

Förbättrad formatering av typomvandlingar med generiska typer och unioner (#4219 av @kpdonn)

// Input
const finalConfiguration =
  <Immutable.Map<string, any>>someExistingConfigMap.mergeDeep(fallbackOpts);

// Output with Prettier 1.12
const finalConfiguration = <Immutable.Map<
  string,
  any
>>someExistingConfigMap.mergeDeep(fallbackOpts);

// Output with Prettier 1.13
const finalConfiguration = <Immutable.Map<string, any>>(
  someExistingConfigMap.mergeDeep(fallbackOpts)
);

JSON

Separerade JSON- och JSON5-parsers (#4367 och #4371 av @ikatyang, #4333 av @duailibe)

JSON5 är en superset av JSON som stöder kommentarer, avslutande kommatecken och omslutna egenskapsnycklar. Vissa filer (som .babelrc) använder JSON5, så kommentarer, avslutande kommatecken och omslutna egenskapsnycklar är tillåtna i dessa filer. Andra filer (som package.json) använder inte JSON5, så dessa funktioner är inte tillåtna. Prettier hade tidigare en enda parser och printer kallad JSON för båda, men att underhålla båda tillsammans ledde till buggar, särskilt runt pragmakommentarerna /* @prettier */. Med de separerade parsers är dessa buggar fixade.

Tillagd `json-stringify`-parser för formatering i `JSON.stringify`-stil (#4450 av @ikatyang)

En vanlig klagomål var att Prettier formaterade package.json och package-lock.json annorlunda än npm och yarn. Om du körde ett npm- eller yarn-kommando kunde detta introducera formateringsfel, och redigeringar av package.json kunde lägga till radbrytningar som senare togs bort när du sedan körde ett npm- eller yarn-kommando. I Prettier 1.13 har en ny parser/printer kallad json-stringify lagts till som beter sig som JSON.stringify, så ändringar kommer inte att pendla fram och tillbaka. Denna är nu standard för package.json och package-lock.json.

CSS/Less/SCSS

Förbättrad formatering för SCSS-kartor (#4487 av @evilebottnawi)

/* Output with Prettier 1.12 */
a {
  @include section-type-1(
    $header: (margin: 0 0 $margin-base, text-align: left),
    $decoration:
      (
        type: base,
        margin: 0 auto -1px 0,
        primary-color: $brand-primary,
        secondary-color: $gray-light
      ),
    $title:
      (
        margin: 0 0 $margin-small,
        color: false,
        font-size: $font-size-h3,
        font-weight: false,
        line-height: $line-height-h3
      )
  );
}

/* Output with Prettier 1.13 */
a {
  @include section-type-1(
    $header: (
      margin: 0 0 $margin-base,
      text-align: left
    ),
    $decoration: (
      type: base,
      margin: 0 auto -1px 0,
      primary-color: $brand-primary,
      secondary-color: $gray-light
    ),
    $title: (
      margin: 0 0 $margin-small,
      color: false,
      font-size: $font-size-h3,
      font-weight: false,
      line-height: $line-height-h3
    )
  );
}

Förbättrad formatering för `@support`-at-regel (#4372 av @evilebottnawi)

/* Input */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

/* Output with Prettier 1.12 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

/* Output with Prettier 1.13 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
  (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

Markdown

Ändrade punktlistor till bindestreck (#4440 av @ikatyang)

När vi lade till Markdown-stöd i Prettier använde vi GitHub BigQuery-data och upptäckte att * var marginellt vanligare än - för punktlistor. Men vi fick massiv feedback från communityn att - föredras. Prettier 1.13 formatterar nu punktlistor med -.

<!-- Input -->
* Top level list item 1
* Top level list item 2
  * Nested List item 1
  * Nested List item 2
    * Sub-Nested List item 1
    * Sub-Nested List item 2

<!-- Output with Prettier 1.12.1 -->
* Top level list item 1
* Top level list item 2
  * Nested List item 1
  * Nested List item 2
    * Sub-Nested List item 1
    * Sub-Nested List item 2

<!-- Output with Prettier 1.13 -->
- Top level list item 1
- Top level list item 2
  - Nested List item 1
  - Nested List item 2
    - Sub-Nested List item 1
    - Sub-Nested List item 2

Bevara innehållet i Liquid-taggar (#4484 av @duailibe)

Liquid är ett mallningsspråk populärt bland statiska sidgeneratorer som Jekyll. I tidigare versioner hanterades inte Liquid-taggar korrekt i Markdown-filer, vilket kunde ändra deras innehåll. Prettier 1.13 förstår nu Liquid-taggar och ändrar inte deras innehåll.

<!-- Input -->
{% include_relative _installations/tarball.md %}

{% cloudinary nice_prefix_-_for_the_filename.jpg %}

<!-- Output with Prettier 1.12 -->
{% include_relative \_installations/tarball.md %}

{% cloudinary nice*prefix*-\_for_the_filename.jpg %}

<!-- Output with Prettier 1.13 -->
{% include_relative _installations/tarball.md %}

{% cloudinary nice_prefix_-_for_the_filename.jpg %}

Bryt länkdefinitioner vid behov (#3531 av @j-f1)

Länkdefinitioner bryts nu över flera rader när --prose-wrap always används och de överskrider angiven radbredd.

<!-- Input -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]: https://example.com "a long, long title. It's really really long. Here have words."

[long]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx "look a title!"

<!-- Output with Prettier 1.12 -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]: https://example.com "a long, long title. It's really really long. Here have words."
[long]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx "look a title!"

<!-- Output with Prettier 1.13 -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]:
  https://example.com
  "a long, long title. It's really really long. Here have words."
[long]:
  https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]:
  https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
  "look a title!"

GraphQL

Lägg endast till tomma rader efter toppnivådefinitioner om de fanns i originalkällan (#4512 av @ad1992)

I Prettier 1.12 och tidigare lade vi alltid till en tom rad mellan toppnivådefinitioner. I 1.13 lägger vi bara till en tom rad om den fanns i originalkoden. Detta beteende liknar hur Prettier formaterar JavaScript.

# Input
type TypeA {
  fieldA: string
}
type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

# Output with Prettier 1.12.1
type TypeA {
  fieldA: string
}

type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

# Output with Prettier 1.13
type TypeA {
  fieldA: string
}
type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

Andra ändringar

API/CLI

Formatera inte ett intervall om nödvändig pragma saknas i filen (#3996 av @josephfrazier)

I Prettier 1.12 och tidigare skulle Prettier formatera ett intervall med --require-pragma även om filen saknade /** @prettier */-pragmat. Nu kontrollerar Prettier om filen innehåller pragmat även vid formatering av ett intervall.

Förbättrad pluginupplösning när sökvägen inte börjar med `./` (#4451 av @kachkaev)

När man angav --plugin=path/to/plugin kraschade Prettier 1.12 och tidigare eftersom den letade efter en path/to/plugin i node_modules-mappen. Prettier 1.13 letar först i aktuell katalog och därefter i node_modules om den inte hittas.

Tillagt plugin-gränssnitt för isBlockComment (#4347 av @mgrip)

En blockkommentar är en kommentar som kan skrivas inline med koden (t.ex. /* comment */ i JS). Eftersom Prettier hanterar kommentarformatering behövdes ett sätt för plugins att avgöra om en kommentar är en blockkommentar. Läs mer i vår dokumentation.

JavaScript

Tillämpa destruktureringsregler för funktioner på catch-parametrar (#4385 av @duailibe)

I 1.12 formaterade vi destrukturering i catch-argument som tilldelningar, men koden ser bättre ut om vi behandlar det som parametrar i funktioner, så vi gjorde den ändringen:

// Input
try {
  doSomething();
} catch ({data: {message}}) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({data: {message: {errors}}}) {
  handleError(errors);
}

// Output with Prettier 1.12.1
try {
  doSomething();
} catch ({
  data: { message }
}) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({
  data: {
    message: { errors }
  }
}) {
  handleError(errors);
}

// Output with Prettier 1.13
try {
  doSomething();
} catch ({ data: { message } }) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({
  data: {
    message: { errors }
  }
}) {
  handleError(errors);
}

Escapea backslash korrekt för Markdown i JS (#4381 av @ikatyang)

Prettier 1.12 och tidigare tog bort backslashar i Markdown-malliteraler i vissa fall. Prettier 1.13 hanterar dem korrekt.

// Input
markdown`
  const cssString = css\`
    background-color: \$\{color('base')\}
  \`;
`
// Output with Prettier 1.12.1
markdown`
  const cssString = css\`background-color: ${color('base')}\`;
`;

// Output with Prettier 1.13
markdown`
  const cssString = css\`background-color: \$\{color('base')\}\`;
`;

Stöd för styled-components Foo.extend.attrs()`` (#4434 av @duailibe)

I Prettier 1.12.1 formaterades inte malliteralen till styled-components-funktionen Foo.extends.attrs() som CSS. I 1.13 stöder Prettier denna syntax och formaterar innehållet som CSS.

// Input
Button.extend.attrs({})`
border-color : black;
`;

// Output with Prettier 1.12
Button.extend.attrs({})`
border-color : black;
`;

// Output with Prettier 1.13
Button.extend.attrs({})`
  border-color: black;
`;

Stöd tillagt för GraphQL-kommentartaggen (#4395 av @tjallingt)

Vi formaterar GraphQL i taggade malliteraler, men vissa GraphQL-bibliotek använder otaggade malliteraler. Många GraphQL-editorplugins använder kommentaren /* GraphQL */ för att identifiera GraphQL. I 1.13 identifierar Prettier nu även denna kommentar och formaterar koden.

// Input
const query = /* GraphQL */`
      {
    user(   id :   5  )  {
      firstName
      lastName
    }
  }
`;

// Output with Prettier 1.13
const query = /* GraphQL */ `
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`;

Formatera Angular Component-stilar (#4361 av @JamesHenry)

Prettier 1.13 formaterar inline-stilar i Angular-komponenter.

// Input
@Component({
       selector: 'app-test',
  styles: [   `

 :host {
   color: red;
 }
 div { background: blue
 }
`

]
})
class     TestComponent {}

// Output with Prettier 1.13
@Component({
  selector: "app-test",
  styles: [
    `
      :host {
        color: red;
      }
      div {
        background: blue;
      }
    `,
  ],
})
class TestComponent {

Bryt korrekt vid initialisering av klassegenskaper (#4442 av @nicolo-ribaudo)

Prettier 1.12 indenterade inte efterföljande rader vid brytning av klassegenskap. Detta är nu åtgärdat i 1.13.

// Input
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  	this.props.barbarbarbar;
}

// Output with Prettier 1.12
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  this.props.barbarbarbar;
}

// Output with Prettier 1.13
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  	this.props.barbarbarbar;
}

Fixa långa metodnamn i bind-uttryck (#4447 av @misoguy)

Prettier 1.13 förbättrar formateringen av långa medlemsuttryckskedjor i bind-uttryck.

// Input
function Foo() {
	const longVariableName = ::veryLongObjectName.veryLongObjectChain.veryLongObjectProperty;
}

// Output with Prettier 1.12
function Foo() {
  const longVariableName = ::veryLongObjectName.veryLongObjectChain
    .veryLongObjectProperty;
}

// Output with Prettier 1.13
function Foo() {
  const longVariableName =
    ::veryLongObjectName.veryLongObjectChain.veryLongObjectProperty;
}

Sluta ta bort parenteser för `?.`-operatorn (#4542 av @duailibe)

Det finns ett edge case i förslaget om valfri kedjning där parenteser runt ett uttryck ändrar körningsbeteendet. Prettier 1.12 och tidigare versioner tog bort parenteserna i det fallet, vilket nu är åtgärdat i 1.13.

// Input
(a?.b).c

// Output with Prettier 1.12
a?.b.c

// Output with Prettier 1.13
(a?.b).c

Flow

Sätt parenteser runt `?() => T` vid behov. (#4475 av @nicolo-ribaudo)

Prettier 1.12 och tidigare versioner ändrade oavsiktligt innebörden av typer vid användning av den nullbara operatorn på grund av operatorprioritet. Detta är nu åtgärdat i Prettier 1.13.

// Input
type Foo = { arg: ?(() => void) | string };

// Output with Prettier 1.12
type Foo = { arg: ?() => void | string };
// which is equivalent to:
type Foo = { arg: ?() => (void | string) };

// Output with Prettier 1.13
type Foo = { arg: ?(() => void) | string };

TypeScript

Behåll citattecken runt klassproperties (#4517 av @ikatyang)

Strikta egenskapsinitieringskontroller tillämpas inte på citerade klassproperties i TypeScript. I Prettier 1.13 kommer vi att behålla citattecknen om de fanns i originalkoden.

// Input
class Username {
  age: number;
  "username": string;
}

// Output with Prettier 1.12
class Username {
  age: number;
  username: string;
}

// Output with Prettier 1.13
class Username {
  age: number;
  "username": string;
}

Markdown

Ta bort radbrytning i tomma `.md`-filer (#4388 av @huyvohcmc)

I Prettier 1.12.1 lades en radbrytning till vid formatering av tomma markdown-filer. Detta är nu åtgärdat i 1.13.

Förhindra sammanslagning av kontinuerlig CJK-text med `--prose-wrap preserve` (#4504 av @ikatyang)

När --prose-wrap preserve används kommer Prettier inte längre att slå ihop kontinuerlig CJK-text som bryts över flera rader.

<!-- Input -->
::: warning 注意
该网站在国外无法访问，故以下演示无效
:::

<!-- Output with Prettier 1.12 -->
::: warning 注意该网站在国外无法访问，故以下演示无效
:::

<!-- Output with Prettier 1.13 -->
::: warning 注意
该网站在国外无法访问，故以下演示无效
:::

CSS/SCSS/Less

Skriv ut avslutande kommatecken i SCSS-listor och -kartor (#4317 av @ad1992)

Prettier skriver nu ut avslutande kommatecken i listor och kartor i SCSS om trailingComma inte är "none" och listan eller karten bryts över flera rader.

/* Input */
$list: (a);
$colors: (
  "red",
  "blue"
);
$map: (
  'medium': (min-width: 800px),
  'large': (min-width: 1000px),
  'huge': (min-width: 1200px),
);

/* Output with Prettier 1.13 */
$list: (a);
$colors: (
  "red",
  "blue",
);
$map: (
  "medium": (min-width: 800px),
  "large": (min-width: 1000px),
  "huge": (min-width: 1200px),
);

Fixa tom front-matter (#4392 och #4457 av @eliasmeire)

Prettier 1.12 släpptes med stöd för front-matter-block i CSS/SCSS/Less-filer, men den tog bort tomma block (eller block med endast kommentarer). Detta är nu åtgärdat i 1.13.

Formatera inte SCSS-stränginterpolation (#4490 av @evilebottnawi)

Prettier kunde bryta SCSS-kod vid formatering av strängar med interpolation i vissa fall. Prettier 1.13 kommer att skriva ut originalkoden.

/* Input
a {
 content: "#{my-fn("_")}";
}

/* Output with Prettier 1.12 */
a {
 content: "#{my-fn(" _ ")}";
}

/* Output with Prettier 1.13 */
a {
 content: "#{my-fn("_")}";
}

Escapa tecken korrekt (#4472 av @evilebottnawi)

Prettier 1.12 escaparade inte tecken korrekt i vissa fall.

/* Input */
@media only screen and (max-width: 767px) {
    @include widths(2 3 4, \@small);
}

$widths-breakpoint-separator: \@small;

/* Output with Prettier 1.12 */
@media only screen and (max-width: 767px) {
  @include widths(2 3 4, \ @small);
}

$widths-breakpoint-separator: \ @small;

/* Output with Prettier 1.13 */
@media only screen and (max-width: 767px) {
    @include widths(2 3 4, \@small);
}

$widths-breakpoint-separator: \@small;

Fixa SCSS-interpolation i CSS-variabler (#4471 av @evilebottnawi)

/* Input */
a {
  --bg: var(--#{$type});
}

/* Output with Prettier 1.12 */
a {
  --bg: var(-- #{$type});
}

/* Output with Prettier 1.13 */
a {
  --bg: var(--#{$type});
}

Fixa mellanrumsproblem i PostCSS-beräknade variabler (#4408 av @ad1992)

/* Input */
background-color: $$(style)Color;

/* Output with Prettier 1.12 */
background-color: $$(style) Color;

/* Output with Prettier 1.13 */
background-color: $$(style)Color;

Höjdpunkter​

API/CLI​

Prettier fungerar i webbläsaren!​

Använd inte JavaScript-parsern som standard (#4528 by @duailibe)​

Metoden prettier.getFileInfo() och CLI-flaggan --file-info (#4341 by @kachkaev)​

Stöd för global Prettier och pluginvar (#4192 by @kachkaev)​

Förbättrad spårning av marköroffset (#4397 by @ds300)​

JavaScript​

Inför fler parenteser i matematiska uttryck (#4413 och #4407 av @duailibe)​

Behåll AngularJS-tester med inject på en rad (#4495 av @thorn0)​

Bättre radbrytning för D3 (#4285 av @1wheel, #4505 av @duailibe)​

Formatera den nya describe.each-tabellen i Jest 23 (#4423 av @ikatyang)​

Formatera funktionskomposition snyggare (#4431 av @suchipi)​

Behåll parenteser runt do-uttryck vid behov och förbättra deras formatering (#4479 av @existentialism)​

Flow​

Skriv ut mixins och implements korrekt för klasser (#4326 av @existentialism)​

Lagt till stöd för nullish coalescing-operatorn och numeriska separators i litteraler (#4536 av @vjeux)​

Lagt till stöd för nya syntaxfunktioner i Flow (#4543, #4540 och #4551 av @existentialism)​

TypeScript​

Lagt till stöd för TypeScript-importtyper (#4429 och #4438 av @ikatyang)​

Stöd för generiska JSX-element i TypeScript tillagt (#4268 av @ikatyang)​

Stöd för TaggedTemplateExpression typeParameters tillagt (#4353 av @ikatyang)​

Förbättrad formatering av typomvandlingar med generiska typer och unioner (#4219 av @kpdonn)​

JSON​

Separerade JSON- och JSON5-parsers (#4367 och #4371 av @ikatyang, #4333 av @duailibe)​

Tillagd json-stringify-parser för formatering i JSON.stringify-stil (#4450 av @ikatyang)​

CSS/Less/SCSS​

Förbättrad formatering för SCSS-kartor (#4487 av @evilebottnawi)​

Förbättrad formatering för @support-at-regel (#4372 av @evilebottnawi)​

Markdown​

Ändrade punktlistor till bindestreck (#4440 av @ikatyang)​

Bevara innehållet i Liquid-taggar (#4484 av @duailibe)​

Bryt länkdefinitioner vid behov (#3531 av @j-f1)​

GraphQL​

Lägg endast till tomma rader efter toppnivådefinitioner om de fanns i originalkällan (#4512 av @ad1992)​

Andra ändringar​

API/CLI​

Formatera inte ett intervall om nödvändig pragma saknas i filen (#3996 av @josephfrazier)​

Förbättrad pluginupplösning när sökvägen inte börjar med ./ (#4451 av @kachkaev)​

Tillagt plugin-gränssnitt för isBlockComment (#4347 av @mgrip)​

JavaScript​

Tillämpa destruktureringsregler för funktioner på catch-parametrar (#4385 av @duailibe)​

Escapea backslash korrekt för Markdown i JS (#4381 av @ikatyang)​

Stöd för styled-components Foo.extend.attrs()`` (#4434 av @duailibe)​

Stöd tillagt för GraphQL-kommentartaggen (#4395 av @tjallingt)​

Formatera Angular Component-stilar (#4361 av @JamesHenry)​

Bryt korrekt vid initialisering av klassegenskaper (#4442 av @nicolo-ribaudo)​

Fixa långa metodnamn i bind-uttryck (#4447 av @misoguy)​

Sluta ta bort parenteser för ?.-operatorn (#4542 av @duailibe)​

Flow​

Sätt parenteser runt ?() => T vid behov. (#4475 av @nicolo-ribaudo)​

TypeScript​

Behåll citattecken runt klassproperties (#4517 av @ikatyang)​

Markdown​

Ta bort radbrytning i tomma .md-filer (#4388 av @huyvohcmc)​

Förhindra sammanslagning av kontinuerlig CJK-text med --prose-wrap preserve (#4504 av @ikatyang)​

CSS/SCSS/Less​

Skriv ut avslutande kommatecken i SCSS-listor och -kartor (#4317 av @ad1992)​

Fixa tom front-matter (#4392 och #4457 av @eliasmeire)​

Formatera inte SCSS-stränginterpolation (#4490 av @evilebottnawi)​

Escapa tecken korrekt (#4472 av @evilebottnawi)​

Fixa SCSS-interpolation i CSS-variabler (#4471 av @evilebottnawi)​

Fixa mellanrumsproblem i PostCSS-beräknade variabler (#4408 av @ad1992)​

Höjdpunkter

API/CLI

Prettier fungerar i webbläsaren!

Använd inte JavaScript-parsern som standard (#4528 by @duailibe)

Metoden `prettier.getFileInfo()` och CLI-flaggan `--file-info` (#4341 by @kachkaev)

Stöd för global Prettier och pluginvar (#4192 by @kachkaev)

Förbättrad spårning av marköroffset (#4397 by @ds300)

JavaScript

Inför fler parenteser i matematiska uttryck (#4413 och #4407 av @duailibe)

Behåll AngularJS-tester med `inject` på en rad (#4495 av @thorn0)

Bättre radbrytning för D3 (#4285 av @1wheel, #4505 av @duailibe)

Formatera den nya `describe.each`-tabellen i Jest 23 (#4423 av @ikatyang)

Formatera funktionskomposition snyggare (#4431 av @suchipi)

Behåll parenteser runt `do`-uttryck vid behov och förbättra deras formatering (#4479 av @existentialism)

Flow

Skriv ut mixins och implements korrekt för klasser (#4326 av @existentialism)

Lagt till stöd för nullish coalescing-operatorn och numeriska separators i litteraler (#4536 av @vjeux)

Lagt till stöd för nya syntaxfunktioner i Flow (#4543, #4540 och #4551 av @existentialism)

TypeScript

Lagt till stöd för TypeScript-importtyper (#4429 och #4438 av @ikatyang)

Stöd för generiska JSX-element i TypeScript tillagt (#4268 av @ikatyang)

Stöd för TaggedTemplateExpression typeParameters tillagt (#4353 av @ikatyang)

Förbättrad formatering av typomvandlingar med generiska typer och unioner (#4219 av @kpdonn)

JSON

Separerade JSON- och JSON5-parsers (#4367 och #4371 av @ikatyang, #4333 av @duailibe)

Tillagd `json-stringify`-parser för formatering i `JSON.stringify`-stil (#4450 av @ikatyang)

CSS/Less/SCSS

Förbättrad formatering för SCSS-kartor (#4487 av @evilebottnawi)

Förbättrad formatering för `@support`-at-regel (#4372 av @evilebottnawi)

Markdown

Ändrade punktlistor till bindestreck (#4440 av @ikatyang)

Bevara innehållet i Liquid-taggar (#4484 av @duailibe)

Bryt länkdefinitioner vid behov (#3531 av @j-f1)

GraphQL

Lägg endast till tomma rader efter toppnivådefinitioner om de fanns i originalkällan (#4512 av @ad1992)

Andra ändringar

API/CLI

Formatera inte ett intervall om nödvändig pragma saknas i filen (#3996 av @josephfrazier)

Förbättrad pluginupplösning när sökvägen inte börjar med `./` (#4451 av @kachkaev)

Tillagt plugin-gränssnitt för isBlockComment (#4347 av @mgrip)

JavaScript

Tillämpa destruktureringsregler för funktioner på catch-parametrar (#4385 av @duailibe)

Escapea backslash korrekt för Markdown i JS (#4381 av @ikatyang)

Stöd för styled-components Foo.extend.attrs()`` (#4434 av @duailibe)

Stöd tillagt för GraphQL-kommentartaggen (#4395 av @tjallingt)

Formatera Angular Component-stilar (#4361 av @JamesHenry)

Bryt korrekt vid initialisering av klassegenskaper (#4442 av @nicolo-ribaudo)

Fixa långa metodnamn i bind-uttryck (#4447 av @misoguy)

Sluta ta bort parenteser för `?.`-operatorn (#4542 av @duailibe)

Flow

Sätt parenteser runt `?() => T` vid behov. (#4475 av @nicolo-ribaudo)

TypeScript

Behåll citattecken runt klassproperties (#4517 av @ikatyang)

Markdown

Ta bort radbrytning i tomma `.md`-filer (#4388 av @huyvohcmc)

Förhindra sammanslagning av kontinuerlig CJK-text med `--prose-wrap preserve` (#4504 av @ikatyang)

CSS/SCSS/Less

Skriv ut avslutande kommatecken i SCSS-listor och -kartor (#4317 av @ad1992)

Fixa tom front-matter (#4392 och #4457 av @eliasmeire)

Formatera inte SCSS-stränginterpolation (#4490 av @evilebottnawi)

Escapa tecken korrekt (#4472 av @evilebottnawi)

Fixa SCSS-interpolation i CSS-variabler (#4471 av @evilebottnawi)

Fixa mellanrumsproblem i PostCSS-beräknade variabler (#4408 av @ad1992)