Hoppa till huvudinnehållet

Prettier 1.7: JSX-justeringar, Pragma, TypeScript- och CSS-fixar

· 9 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 →

Den här versionen innehåller några felrättningar och justeringar för JSX, TypeScript, CSS och JavaScript-formatering, samt ett par nya funktioner.

Höjdpunkter​

JSX-förändringar​

Vi fick mycket feedback från communityn om de ändringar vi gjorde i JSX-formateringen i version 1.6.0 och har justerat formateringen för att bättre matcha communityns standarder och förväntningar.

I 1.6.0 lade vi till en andra stil för ternära uttryck (villkorsuttryck, a ? b : c), baserad på ett format som är populärt i communityn där parenteser används för att avgränsa JSX-innehåll:

const DinnerOptions = ({ willEatMeat, willEatEggs, willEatVegetables }) => (
  <div>
    <div>Let's get some dinner...</div>
    {willEatMeat ? (
      <FullMenu />
    ) : willEatEggs ? (
      <VegetarianMenu />
    ) : willEatVegetables ? (
      <VeganMenu />
    ) : (
      <BackupMenu />
    )}
  </div>
);

Innan detta lades till formaterade Prettier ternära uttryck endast med en konsekvent stil:

willEatMeat
  ? "Full Menu"
  : willEatEggs
    ? "Vegetarian Menu"
    : willEatVegetables ? "Vegan Menu" : "Backup Menu";

I 1.6.0 använde vi följande heuristik för att avgöra när den nya "JSX-läget för ternära uttryck" skulle användas:

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it
  OR
  * The ternary appears inside of some JSX

Denna heuristik ledde dock till vissa oväntade formateringsresultat: GitHub Diff som visar ett ternärt uttryck med internationaliseringssträngar inuti ett JSX-element som konverteras till JSX-lägets stil

I 1.7.0 har vi därför reviderat vår heuristik till att endast vara:

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it

Vi hoppas att denna ändring resulterar i färre överraskande ternära uttryck.

Ett stort tack till @duailibe som implementerade denna ändring samt flera andra rapporterade JSX-relaterade formateringsproblem.

Konsekvent versalanvändning i CSS​

Vi ägnade tid åt att finslipa vår CSS-formatering i denna version, och som en del av detta gjorde @lydell arbete med att normalisera versalanvändning.

Så nu kommer nästan allt i CSS skrivas ut med lower case.

/* Before */
DIV.Foo {
  HEIGHT: 12PX;
}

/* After */
div.Foo {
  height: 12px;
}

Oroa dig dock inte – Prettier kommer inte röra dina $scss-variables, [@less](https://github.com/less)-variables eller FunctionNames(). Fortsätt förprocessera!

Pragmastöd​

Det finns ett nytt alternativ kallat --require-pragma (requirePragma via API:t) som ändrar Prettiers beteende så att den endast formaterar om en fil om den har en speciell "pragma"-kommentar högst upp, som ser ut så här:

/**
 * @prettier
 */

eller

/**
 * @format
 */

Detta var @ajhyndmans idé och implementerades av @wbinnssmith.

Andra ändringar​

TypeScript​

Det fanns en bugg i Prettier 1.6.1 där ett fel kastades vid parsning av TypeScript-kod som använde never-typen, till exempel:

Observable.empty<never>();

Dessutom tog Prettier 1.6.1 felaktigt bort declare-nyckelordet från enum-deklarationer i *.d.ts-filer:

// In
declare const enum Foo {}

// Out
const enum Foo {}

Båda dessa problem har åtgärdats. Tack till @JamesHenry och @existentialism för dessa fixar som stödjer vår TypeScript-community!

Konfiguration​

Konfigurerbar konfigurationsprioritering​

Det finns ett nytt CLI-alternativ --config-precedence som konfigurerar hur Prettier ska prioritera konfigurationskällor. Giltiga värden är:

cli-override (standard) - CLI-alternativ har prioritet över konfigurationsfil

file-override - Konfigurationsfil har prioritet över CLI-alternativ

prefer-file - Om en konfigurationsfil hittas utvärderas den och andra CLI-alternativ ignoreras. Om ingen konfigurationsfil hittas utvärderas CLI-alternativ som vanligt.

Detta alternativ lägger till stöd för redigerarintegrationer där användare definierar sin standardkonfiguration men vill respektera projektspecifik konfiguration.

prettier.resolveConfig.sync​

Tidigare fanns det inget sätt via API:t att lösa konfiguration för en källfil synkront. Tack vare nya tillägg till cosmiconfig av @sudo-suhas kunde @ikatyang lägga till stöd för detta i Prettiers API.

PR:er som har slagits ihop i denna version​

Åtgärdade problem i den här versionen​

Tack till alla som bidragit till denna release, oavsett om det var genom att skapa ärenden, bidra med kod, granska kod eller ge generell feedback. Prettier är ett community-drivet projekt och kan fortsätta existera tack vare människor som ni. Tack!