Hoppa till huvudinnehållet

Prettier 1.12: Fixar, funktioner och formatering, oj oj!

· 17 min att läsa
Lily Skye
Lily Skye
Inofficiell Beta-översättning

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

Hej allihopa, och välkommen till Prettier 1.12.0! Den här versionen innehåller många buggfixar, formateringsjusteringar, nya funktioner för vårt plugin-API och nya Markdown-funktioner.

Höjdpunkter​

JavaScript​

Bryt nästlade ternära operatorer (#4120 by @duailibe)​

När ternära operatorer är nästlade kan den yttre operatorn brytas över flera rader beroende på utskriftsbredd och indragningsnivå, medan den inre operatorn förblir på en enda rad:

// Input:
const platformString = Platform.OS == "ios" ? "iOS"
  : Platform.OS == "android" ? "Android" : "unknown";

// Formatted (Prettier 1.11.1):
const platformString =
  Platform.OS == "ios"
    ? "iOS"
    : Platform.OS == "android" ? "Android" : "unknown";

Detta såg lite konstigt ut, så för att öka läsbarheten kommer vi nu att göra alla nästlade ternära operatorer flerradiga om någon av dem blir flerradig:

// Formatted (Prettier 1.12.0):
const platformString =
  Platform.OS == "ios"
    ? "iOS"
    : Platform.OS == "android"
      ? "Android"
      : "unknown";

Hantera kommentarer före else (#4264 by @duailibe)​

En länge öppen bugg handlar om hur kommentarer före else hanteras. Kommentarer före else-nyckelordet flyttades inuti else-blocket, vilket kunde vara förvirrande när kommentaren förklarade villkoret istället för blocket. Dessutom ställde det till problem när man kommenterade bort en del av en if/else-kedja.

Indata:​
if (obj.foo) {
  return foo;
}
// Use bar as a fallback
else if (obj.bar) {
  return bar;
}

if (a == 2) {
  console.log('2');
}
// else if (a == 3) {
//   console.log('3');
// }
else if (a == 4) {
  console.log('4');
}
Formaterad (Prettier 1.11.1):​
if (obj.foo) {
  return foo;
} else if (obj.bar) {
  // Use bar as a fallback
  return bar;
}

if (a == 2) {
  console.log("2");
} else if (a == 4) {
  // else if (a == 3) {
  //   console.log('3');
  // }
  console.log("4");
}

Det var irriterande att dessa kommentarer flyttades, men vi var osäkra på hur vi skulle hantera det eftersom vi ville formatera else-block konsekvent i den här stilen: } else {.

I den här versionen har vi beslutat att göra ett undantag från normalformateringen och formatera else annorlunda, men endast om en kommentar förekommer mellan else och öppnande klammerparentes. Detta verkar vara den bästa lösningen:

Formaterad (Prettier 1.12.0):​
if (obj.foo) {
  return foo;
}
// Use bar as a fallback
else if (obj.bar) {
  return bar;
}

if (a == 2) {
  console.log("2");
}
// else if (a == 3) {
//   console.log('3');
// }
else if (a == 4) {
  console.log("4");
}

Inlinea Angular async-tester och beforeEach, etc. (#4241 by @ad1992)​

I Prettier 1.11.1 formaterades Angular-tester som använde async-testhjälparen med onödigt många radbrytningar. Vi har gjort en ändring för att behålla funktioner som är inlindade i denna hjälpare på samma rad, vilket förhindrar dessa onödiga radbrytningar.

// Input:
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

// Formatted (Prettier 1.11.1):
import { TestBed, async } from "@angular/core/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [AppComponent]
      }).compileComponents();
    })
  );
  it(
    "should create the app",
    async(() => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    })
  );
});

// Formatted (Prettier 1.12.0):
import { TestBed, async } from "@angular/core/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it("should create the app", async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

Bryt ObjectPatterns med nästlade ObjectPatterns (#4267 by @duailibe)​

Vi fick mycket feedback från communityn om att destruktureringssyntax för objekt och arrayer ibland inte formaterades särskilt bra. Som ett första steg mot förbättring har vi gjort en ändring så att alla nästlade objekt- eller arraymönster som inte är lövnoder i ett destruktureringsmönster blir flerradiga om något av deras föräldramönster blir det:

// Input:
const {
  name: {
    first,
    last,
  },
  organisation: {
    address: {
      street: orgStreetAddress,
      postcode: orgPostcode,
    },
  },
} = user;

// Formatted (Prettier 1.11.1):
const {
  name: { first, last },
  organisation: { address: { street: orgStreetAddress, postcode: orgPostcode } }
} = user;

// Formatted (Prettier 1.12.0):
const {
  name: { first, last },
  organisation: {
    address: { street: orgStreetAddress, postcode: orgPostcode }
  }
} = user;

Markdown​

Stöd för hasPragma/insertPragma (#4275 by @ikatyang)​

Prettier 1.7.0 och 1.8.0 introducerade två nya alternativ, --require-pragma och --insert-pragma. Dessa alternativ stöddes dock endast i JavaScript. Nu är dessa alternativ även tillgängliga i Markdown!

<!-- @prettier -->

# My Markdown Document

A long time ago, in my hometown of Ericsburgh...

Stöd för toppnivå prettier-ignore-start/prettier-ignore-end (#4202 by @ikatyang)​

När användare använder verktyg som all-contributors eller markdown-toc stötte de på att automatiskt genererat Markdown-innehåll formaterades konstigt av Prettier, eller att Prettiers --list-different-läge flaggade automatiskt genererat innehåll som användaren inte brydde sig om att formatera.

För att lösa dessa problem har vi lagt till en ny typ av ignoreringskommentar i Markdown, kallad Range Ignore:

<!-- prettier-ignore-start -->
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
| [<img src="https://avatars1.githubusercontent.com/u/12345?v=4" width="100px;"/><br /><sub><b>Alice</b></sub>](https://github.com/example-alice)<br /> [💻](https://github.com/my/repo/commits?author=example-alice "Code") [📖](https://github.com/my/repo/commits?author=example-alice "Documentation") [⚠️](https://github.com/my/repo/commits?author=example-alice "Tests") | [<img src="https://avatars3.githubusercontent.com/u/12346?v=4" width="100px;"/><br /><sub><b>Bob</b></sub>](https://github.com/example-bob)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-bob "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/123457?v=4" width="100px;"/><br /><sub><b>Jeffrey</b></sub>](https://github.com/example-jeffrey)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-jeffrey "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/123458?v=4" width="100px;"/><br /><sub><b>Sarah</b></sub>](https://github.com/example-sarah)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-sarah "Bug reports") |
| :---: | :---: | :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->
<!-- prettier-ignore-end -->

Du kan sätta prettier-ignore-start och prettier-ignore-end runt automatiskt genererat innehåll, och Prettier kommer då att ignorera allt däremellan. Observera att denna funktion för närvarande endast är tillgänglig i Markdown och kan bara användas på toppnivå.

GraphQL​

Tillåt nytt gränssnittsstil för GraphQL (#4012 by @ruiaraujo)​

GraphQL Schema Definition Language ändrade nyligen syntaxen för flera ärvda gränssnitt till att använda & istället för ,:

// Old style
type Foo implements Bar, Baz { field: Type }

// New style
type Foo implements Bar & Baz { field: Type }

Prettier 1.11.1 kunde inte tolka den nya stilen; vi stöder nu båda stilarna.

Plugin-API (Beta)​

Flytta pragma-upptäckt/infogning till plugins (#3685 by @duailibe)​

Prettier-plugins kan nu inkludera en hasPragma-funktion i sin parser och en insertPragma-funktion i sin printer för att ansluta sig till --insert-pragma och --require-pragma-stöd. Här är deras signaturer:

function hasPragma(text: string): boolean;
function insertPragma(text: string): string;

Aktivera pluginspecifik kommentarsfunktionalitet (#4182 by @mgrip)​

Plugins kan nu åsidosätta Prettiers inbyggda kommentarsutskriftsalgoritm fall till fall för att bättre stödja kommentarsformatering för sitt språk. Denna API är ännu inte dokumenterad, men du kan se hur funktionen används i det nyligen släppta Prettier PHP Plugin här och här.

Andra ändringar​

JavaScript​

Uppgradera flow till 0.69 och aktivera ?.-stöd (#4296 by @vjeux)​

Valfri kedning (?.) stöds nu när flow-parsern används:

const name = this.model?.user?.firstName || "No Name Set"

Sluta markera alla kommentarer i namngivna export som inledande kommentarer (#4292 by @duailibe)​

Denna ändring fixar en bugg där ignorerade kommentarer i namngivna export duplicerades vid varje formatering:

// Input:

// prettier-ignore
export {
  foo, // comment
  bar, // comment
}

// Formatted (Prettier 1.11.1):

// prettier-ignore
// comment
// comment
export {
  foo, // comment
  bar, // comment
}

// Formatted (Prettier 1.12.0):

// prettier-ignore
export {
  foo, // comment
  bar, // comment
}

Hantera ContinueStatement- och BreakStatement-kommentarer (#4279 by @duailibe)​

Prettier skrev av misstag inte ut vissa kommentarer nära continue- och break-nyckelorden. Detta har åtgärdats:

// Input:
for (let i = 0; i < 5; i++) {
  continue /* Comment */;
}

for (let i = 0; i < 10; i++) {
  break /* Comment */;
}

// Output (Prettier 1.11.1):
/*
  Error: Comment "Comment" was not printed. Please report this error!
    at https://prettier.io/lib/index.js:2312:75
    at Array.forEach (<anonymous>)
    at ensureAllCommentsPrinted (https://prettier.io/lib/index.js:2312:22)
    at _formatWithCursor (https://prettier.io/lib/index.js:2313:949)
    at _format (https://prettier.io/lib/index.js:2314:239)
    at formatRange (https://prettier.io/lib/index.js:2331:215)
    at _formatWithCursor (https://prettier.io/lib/index.js:2313:288)
    at _format (https://prettier.io/lib/index.js:2314:239)
    at Object.format (https://prettier.io/lib/index.js:2333:277)
    at formatCode (https://prettier.io/worker.js:130:21)
    at self.onmessage (https://prettier.io/worker.js:80:19)
*/

// Formatted (Prettier 1.12.0):
for (let i = 0; i < 5; i++) {
  continue; /* Comment */
}

for (let i = 0; i < 10; i++) {
  break; /* Comment */
}

Åtgärda inbäddad GraphQL i JS med backticks (#4265 av @duailibe, #4278 av @duailibe)​

I Prettier 1.11.1 fanns en bugg som gjorde att GraphQL med escapeade backtick-strängar inte formaterades. Detta har åtgärdats i Prettier 1.12.0:

// Input:
gql`
  "\`foo\` mutation payload."
  type FooPayload { bar: String
  }
`

// Formatted (Prettier 1.11.1):
gql`
  "\`foo\` mutation payload."
  type FooPayload { bar: String
  }
`;

// Formatted (Prettier 1.12.0):
gql`
  "\`foo\` mutation payload."
  type FooPayload {
    bar: String
  }
`;

Blanda inte ihop uttryck när prettier-ignore används inuti template literals (#4220 av @evilebottnawi)​

En bugg i Prettier 1.11.1 orsakade att kapslade uttryck i template literals flyttades när prettier-ignore-kommentarer användes inuti literalen under vissa förhållanden:

// Input:
styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => props.small ? 'font-size: 0.8em;' : ''};
`

// Formatted (Prettier 1.11.1):
styled.div`
  color: ${props => (props.small ? "font-size: 0.8em;" : "")};
  /* prettier-ignore */
  ${props => props.theme.colors.paragraph};
`;

Observera att de två funktionerna som tar emot props har bytt plats.

Denna bugg har åtgärdats i Prettier 1.12.0:

// Formatted (Prettier 1.12.0):
styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => (props.small ? "font-size: 0.8em;" : "")};
`;

Förhindra "överindentering" av klassproperties värden (#4085 av @duailibe)​

I Prettier 1.11.1 fanns ett problem där indenteringen för binära uttryck (saker som 2 + 2, 4 * 4, etc) ökade vid varje radbrytning under vissa förhållanden. Detta har åtgärdats i Prettier 1.12.0:

// Input:
class EnterpriseQualityClass {
	foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
    // then add bar and multiply by 90 time foo plus 2
    (this.bar * 90) * (this.foo + 2)
}

// Formatted (Prettier 1.11.1):
class EnterpriseQualityClass {
  foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
      // then add bar and multiply by 90 time foo plus 2
      this.bar * 90 * (this.foo + 2);
}

// Formatted (Prettier 1.12.0):
class EnterpriseQualityClass {
  foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
    // then add bar and multiply by 90 time foo plus 2
    this.bar * 90 * (this.foo + 2);
}

Förbättra formatering av switch-satser (#4165 av @evilebottnawi)​

När diskriminanten i en switch-sats var väldigt lång formaterade vi den inte särskilt snyggt. Formateringen har förbättrats i Prettier 1.12.0:

// Input:
switch (longLongLongLongLongLongLongVariable &&
    longLongLongLongLongLongLongVariable) {
  case (1): {
    console.log("hi");
  }
}

// Formatted (Prettier 1.11.1):
switch (longLongLongLongLongLongLongVariable &&
  longLongLongLongLongLongLongVariable) {
  case 1: {
    console.log("hi");
  }
}

// Formatted (Prettier 1.12.0):
switch (
  longLongLongLongLongLongLongVariable && longLongLongLongLongLongLongVariable
) {
  case 1: {
    console.log("hi");
  }
}

TypeScript​

Skriv aldrig semikolon efter export default interface Foo {} (#4128 av @j-f1)​

I Prettier 1.11.1 skrevs semikolon felaktigt efter default-exporterade interfaces. Detta har åtgärdats i Prettier 1.12.0:

// Input:
export default interface Foo {
  readonly bar?: string;
}

// Formatted (Prettier 1.11.1):
export default interface Foo {
  readonly bar?: string;
};

// Formatted (Prettier 1.12.0):
export default interface Foo {
  readonly bar?: string;
}

Kräv parenteser runt "TSAsExpression" inuti "UpdateExpression" (#4183 av @UselessPickles)​

Prettier 1.11.1 tog bort parenteser runt typomvandlings-uppdateringsuttryck, vilket orsakade syntaxfel. Problemet har åtgärdats i Prettier 1.12.0:

// Input:
(obj.value as any)++

// Formatted (Prettier 1.11.1):
obj.value as any++;

// Formatted (Prettier 1.12.0):
(obj.value as any)++;

Markdown​

Ta bort onödiga tomma rader i front matter (#4280 av @ikatyang)​

Prettier 1.11.1 skrev en onödig tom rad när markdowndokument med tom yaml/toml front-matter formaterades; denna rad skrivs inte längre ut:

Indata:​
---
---

Hello
Formaterad (Prettier 1.11.1):​
---

---

Hello
Formaterad (Prettier 1.12.0):​
---
---

Hello

Stöd fenced codeblock-språk följt av attribut (#4153 av @ikatyang)​

Vissa markdokument använder attribut som listas efter språket för speciella ändamål; de används till exempel av markdown-preview-enhanced för att ändra visningsalternativ och specificera kodkörningsparametrar.

Språkattribut för kodblock ser ut så här:

```js {cmd=node .line-numbers}
console.log("hello world");
```

Prettier formaterade inte innehållet i dessa markdown-block tidigare eftersom den inte kunde upptäcka språket när attribut fanns närvarande. Nu identifierar Prettier språket korrekt.

Korrekt indrag för kapslad HTML (#4115 by @ikatyang)​

I Prettier 1.11.1 formaterades HTML kapslad under en listpunkt felaktigt; indragsnivån ändrades varje gång koden omformaterades. Detta är nu åtgärdat.

<!-- Input: -->
1.  A list item

    <table class="table table-striped">
    <tr>
    <th>Test</th>
    <th>Table</th>
    </tr>
    <tbody>
        <tr>
        <td>Test</td>
        <td>Data</td>
        </tr>
    </tbody>
    </table>

<!-- Output (Prettier 1.11.1): -->
1.  A list item

    <table class="table table-striped">
<tr>
<th>Test</th>
<th>Table</th>
</tr>
<tbody>
    <tr>
    <td>Test</td>
    <td>Data</td>
    </tr>
</tbody>
</table>

<!-- Output (Prettier 1.12.0): -->
1.  A list item

    <table class="table table-striped">
    <tr>
    <th>Test</th>
    <th>Table</th>
    </tr>
    <tbody>
        <tr>
        <td>Test</td>
        <td>Data</td>
        </tr>
    </tbody>
    </table>

Använd literalline för radbrytning istället för hardline (#4083 by @ikatyang)​

I Prettier 1.11.1 uppstod ett problem med indragsnivån för blockkommentarer när CSS eller JSX var inbäddat i markdown. Detta har åtgärdats i Prettier 1.12.0:

<!-- Input: -->
```pcss
.Avatar {
    @container (width > 100px) {
      /*
      Change some styles on the image element when the container is
      wider than 100px
      */
    }
}
```

<!-- Formatted (Prettier 1.11.1): -->
```pcss
.Avatar {
  @container (width > 100px) {
    /*
          Change some styles on the image element when the container is
          wider than 100px
          */
  }
}
```

<!-- Formatted (Prettier 1.12.0): -->
```pcss
.Avatar {
  @container (width > 100px) {
    /*
      Change some styles on the image element when the container is
      wider than 100px
      */
  }
}
```

CSS/SCSS/Less​

Ändra inte variabelnamn för anpassade selektorer till gemener #4254 (#4255 by @Coobaha)​

Prettier 1.11.1 ändrade felaktigt variabelnamn för anpassade selektorer till gemener. Detta är åtgärdat i Prettier 1.12.0:

/* Input: */
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
 color: red;
}

/* Formatted (Prettier 1.11.1): */
@custom-selector :--camelCase .my-css-selector;

:--camelcase {
  color: red;
}

/* Formatted (Prettier 1.12.0): */
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
  color: red;
}

Bryt inte värdeegenskaper med inbäddade URL:er (#4236 by @evilebottnawi)​

I Prettier 1.11.1 kunde Prettier formatera url() felaktigt när de förekom i shorthand-egenskaper. Detta har åtgärdats i Prettier 1.12.0.

/* Input: */
.search-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K) center center no-repeat;
}

/* Formatted (Prettier 1.11.1): */
.search-icon {
  background: url(
      data:image/svg+xml;base64,
      PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K
    )
    center center no-repeat;
}

/* Formatted (Prettier 1.12.0): */
.search-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K)
    center center no-repeat;
}

Åtgärda inline-kommentarer i listor och map-strukturer (#4205 by @evilebottnawi)​

Prettier 1.11.0 kunde bryta koden när inline-kommentarer fanns inom SCSS-listor eller map-strukturer. Detta har åtgärdats i Prettier 1.12.0. Obs: Formateringsstilen är fortfarande inte ideal, men detta löser problemet med trasig kod.

// Input:
$my-list:
  'foo', // Foo
  'bar'; // Bar

$my-map: (
  'foo': 1, // Foo
  'bar': 2, // Bar
);

// Formatted (Prettier 1.11.1):
$my-list: "foo", / / Foo "bar"; // Bar

$my-map: (
  "foo": 1,
  / / Foo "bar": 2,
  / / Bar
);

// Formatted (Prettier 1.12.0):
$my-list: "foo",
  // Foo
    "bar"; // Bar

$my-map: (
  "foo": 1,
  // Foo
    "bar": 2,
  // Bar
);

Ändra inte exporterade variabelnamn till gemener i CSS-moduler (#4152 by @evilebottnawi)​

Prettier 1.11.1 ändrade felaktigt namnen på CSS-variabler exporterade från CSS-moduler till gemener. Detta orsakade problem vid import av variabeln från modulen på JavaScript-sidan.

/* Input: */
:export {
  myColor: red;
}

/* Formatted (Prettier 1.11.1): */
:export {
  mycolor: red;
}

Detta har åtgärdats i Prettier 1.12.0:

/* Formatted (Prettier 1.12.0): */
:export {
  myColor: red;
}

Hantera unicode-range korrekt (#4117 by @evilebottnawi)​

Prettier 1.11.1 formaterade unicode-range-regler felaktigt. Detta har åtgärdats i Prettier 1.12.0.

/* Input: */
@font-face {
  unicode-range: U+00-FF;
}

/* Formatted (Prettier 1.11.1): */
@font-face {
  unicode-range: U + 00-FF;
}

/* Formatted (Prettier 1.12.0): */
@font-face {
  unicode-range: U+00-FF;
}

HTML/Handlebars/Vue​

Stöd för kommentarer överst i HTML-dokument (#4141 av @evilebottnawi)​

Prettiers team fortsätter arbeta med vår HTML-formaterare som ännu inte är produktionsredo. Denna release inkluderar en fix där en kommentar överst i ett dokument (som t.ex. en htmlhint-kommentar) förhindrade korrekt formatering. Problemet är nu löst.

Åtgärda Handlebars else if (#4256 av @n8n8baby)​

Vår Handlebars-formaterare är inte heller redo för allmänt bruk, men en fix lades till under denna releasecykel så att else if-block skrivs ut korrekt. Prettier 1.11.1 konverterade dem felaktigt till if-satser.

Åtgärda självstängande style-taggar i vue (#4108 av @duailibe)​

Prettier 1.11.1 hanterade inte självstängande style- eller script-taggar korrekt i vue-filer; utskriften blev oväntad. Detta är fixat i Prettier 1.12.0.

<!-- Input: -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

<!-- Formatted (Prettier 1.11.1): -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />
<template><span : class= "$style.root" ><slot / ></span> </template> <style src=
  "./style.css" module / >;
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

<!-- Formatted (Prettier 1.12.0): -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

Diverse​

Playground: Stöd för rangeStart och rangeEnd (#4216 av @JamesHenry)​

--range-start och --range-end kan nu anges i playground tack vare arbete av @JamesHenry. Detta underlättar för Prettier-communityn genom att effektivisera felsökningsprocessen för buggar relaterade till markeringar i editorn.

Åtgärda utskrift av ignorerade filer med --debug-check (#4066 av @duailibe)​

Prettier 1.11.1 skrev ut innehållet i ignorerade filer vid användning av flaggan --debug-check. I Prettier 1.12.0 skrivs innehållet i ignorerade filer inte längre ut till stdout.

Till Prettiers fantastiska community av användare, bidragsgivare och maintainers - tack! Detta är något vi bara kan bygga tillsammans ❤️