Inofficiell Beta-översättning

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

Grattis på Prettier-årsdagen! Det är rätt otroligt att Prettier släpptes för bara ett år sedan och redan fått så massiv spridning och så många bidragsgivare. För den här speciella utgåvan ska vi göra en liten återblick kring projektet.

Det är också en spännande utgåva i sig eftersom Prettier nu har partiellt stöd för .vue-filer och kärnkoden har omstrukturerats så att det finns ett riktigt plugin-API för att stödja olika språk!

Återblick

Ända sedan gofmt kom 2013 blev jag (@vjeux) besatt av idén om automatisk formatering. Jag började hela tiden se problem som skulle lösas av en automatisk formaterare: diskussioner om kodstil, manuell formatering, svårigheter att skriva codemod-verktyg…

När det förra december inte var en utan två personer som självständigt arbetade med en JavaScript-pretty-printer var det ett tecken! Pieter Vanderwerff byggde en i Reason baserad på Flow-infrastruktur och James Long i JavaScript. Jag agerade hejarklack genom att sätta upp samma testpaket för båda projekten samt köra deras pretty-printer på befintliga kodbaser och extrahera listor över saker som inte formaterades bra.

Tyvärr, efter semestern var båda tvungna att återgå till sina ordinarie jobb :( Jag bestämde mig för att kliva in och övertala min chef att låta mig arbeta med det heltid. James hade öppnat källkoden till sitt projekt (Prettier) och jag var mer bekant med JavaScript så jag valde att fokusera på det!

Här är en lista över saker som fungerat bra i projektet:

Lägg ned tid på versionsfakta

Versionsfakta har den intressanta egenskapen att de ofta delas, även om innehållet är dåligt. Alla verkar vilja veta när version 1.5.8 av någon mjukvara släpps. Det är ett utmärkt tillfälle att marknadsföra ditt projekt.

För Prettiers releaser la jag mycket tid på att förklara tankarna bakom alla ändringar och tog upp saker som annars skulle blivit separata blogginlägg (som detta!). Dessutom är man ofta lat och hittar ursäkter för att inte skriva blogginlägg, men man vill absolut släppa nya versioner - så det är en bra pådrivkraft.

Tydlig beslutsprocess

Stilregler är bland de mest omdiskuterade ämnena samtidigt som många beslut måste fattas. Jag försökte skapa en beslutsprocess som möjliggjorde framsteg.

Folk använder alla möjliga känslomässiga argument för att övertyga om att deras stil är bäst. Vi behövde något rent rationellt så att folk, även om de föredrog annat, inte kunde argumentera mot metodiken.

Den bästa lösningen jag hittade var att räkna förekomster i Facebooks kodbas. Det är enkelt för mig att köra och presentera relativa siffror (stil A används 5x mer än stil B) för att övertyga. Om en så stor kodbas skriven av tusentals utvecklare över åren har en tydlig vinnare, kanske den inte är optimal men troligen inte kontroversiell.

Allt kunde inte lösas så - vissa saker hade ingen tydlig vinnare eller algoritm för bra utskrift. Där var det viktigt med en eskalering där en person (jag) fattade slutgiltigt beslut. På så vis kunde vi göra framsteg utan konsensus, vilket skulle varit mycket svårt.

Öppen källkod som försökskaniner

En fullständig pretty printer är ett av de projekt där den måste vara nära perfekt för att introduceras i en stor kodbas som Facebook. Första intrycket är extremt viktigt och det är mycket svårt att skapa något som är korrekt (det får inte introducera ogiltig JavaScript eller kod som beter sig annorlunda) för alla specialfall.

Min ursprungliga plan var att arbeta ensam i ett gömställe bortom omvärlden i 6 månader tills allt var perfekt, och sedan få andra att använda det. Vad jag inte förväntade mig var att open source-världen inte hade samma kvalitetskrav och började använda det mycket tidigare. Riskerna med att använda det i ett sidoprojekt är helt annorlunda jämfört med miljontals kodrader på Facebook.

Det visade sig vara mycket fördelaktigt för projektet att få feedback under utvecklingsfasen tills det slutligen var klart för användning på Facebook.

Open source som bidragsgivare

Under de första 6 månaderna arbetade jag heltid med projektet men skrev bara hälften av commiterna. Det är i sig häpnadsväckande! Inte nog med att projektets genomströmning fördubblades, utan bidragsgivare arbetade även med saker jag inte skulle prioriterat: integrationer med alla textredigerare, en fuzzer för att hitta buggar, TypeScript-stöd, infrastruktur för flerspråkstolkning i samma fil med mera.

Även om vi inte använder alla dessa funktioner på Facebook, visade sig många vara användbara. CSS-in-JS-stöd gjorde det enkelt att formatera GraphQL-fragment i malliteraler. Det stora användarunderlaget bidrog också till att upptäcka ovanliga buggar som vi så småningom skulle stöta på, och många olika personer hjälpte till att fixa dem.

Det bästa är att jag slutade arbeta heltid med projektet för 6 månader sedan, men det fortsatte under @azzs ledning. Jag vill tacka alla som bidragit på olika sätt – det är otroligt spännande att skapa historia tillsammans!

Open source har gjort underverk för projektet, levererat enormt värde för Facebook (nästan alla våra JavaScript-filer är nu formaterade) och för hela branschen med sin omfattande användning.

Verktyg: Jest Snapshot-tester & Playground

Alla dessa bidrag möjliggjordes tack vare enkla processer för felrapportering, kodbidrag och granskning. De två mest inflytelserika verktygen var jest snapshot-tester och playground.

Snapshot-tester är fantastiska för en pretty printer. Att lägga till tester är enkelt: skapa en fil i testmappen med koden du vill formatera och kör jest – voilà! Vid ändringar ser du hur flera exempel formateras annorlunda, och får bedöma om det är förbättringar. För granskare är det perfekt att se före/efter för alla ändringar. Jag lägger numera mer vikt vid ögonblicksbilderna än själva implementeringen.

Playground är ett utmärkt sätt att skapa reproducerbara exempel eller testa Prettier utan att installera utvecklingsmiljö eller byta gren. Detta har visat sig ovärderligt för att få detaljerade, åtgärdsbara felrapporter.

Höjdpunkter

Stöd för Vue Single File Components (#3563) av @vjeux

Efterfrågan på Vue SFC (#2097) är stor. Vi har nu partiellt stöd: all HTML skrivs ut oförändrad, men nu formateras <script>- och <style>-taggarna med Prettier.

För att använda det: kör helt enkelt prettier på dina *.vue-filer!

Prettier Plugin API (#3536) av @azz

När Prettier för JavaScript har blivit stabil har vi på senare tid haft bidragsgivare som vill lägga till nya språk i Prettier, särskilt har vi haft pull requests för att lägga till stöd för Python och PHP. Vi vill behålla kärnpaketet prettier portabelt och underhållbart, men vi vill också ge folk möjlighet att köra Prettier på fler språk. Därför har vi introducerat ett plugin-API! Prettier-plugin kan bidra med parsers och/eller printers till Prettier-formateraren. De behandlas som förstklassiga medborgare och kan även bidra till inbäddningsstöd (t.ex. formatering av ditt språk inuti Markdown).

Att använda plugin är lika enkelt som att installera dem via npm/yarn och köra Prettier som vanligt – ingen ytterligare konfiguration behövs!

Det finns tre officiella plugin under utveckling:

• @prettier/plugin-python

• @prettier/plugin-php

• @prettier/plugin-swift

Alla tre dessa plugin är fortfarande under aktiv utveckling och är inte redo för produktionskod, men håll ett öga på dem eftersom de utvecklas!

Om du är intresserad av att hjälpa till att bygga dessa plugin, kolla deras repository-ärenden eller kör dem mot din egen kod och börja rapportera buggar! Likaså, om du är intresserad av att bygga ett nytt språk i Prettier och behöver hjälp att komma igång, skapa ett ärende i prettier-repot så hjälper vi dig.

Prettiers inbyggda språk har omstrukturerats för att uttryckas via plugin-API:et, så vi kan garantera att kärn-API:t förblir generiskt.

Se [dokumentationen][plugin api] för mer information.

Observera att eftersom detta är en ny och omfattande funktion släpper vi den med en beta-märkning i dokumentationen. Även om vi inte förväntar oss några större problem innebär det att vi kan göra bakåtkompatibla ändringar i nästa version.

Andra ändringar

TypeScript

Stöd för numeriska separatorer (#3580) av @azz

Numeriska separatorer är ett ECMAScript-förslag i stadium 3. Stöd har lagts till i TypeScript 2.7, och Prettier kommer nu att bevara dem.

// Before
SyntaxError: ',' expected. (1:10)
> 1 | var a = 1_000_000_000;
    |          ^
  2 | var b = 0b1101_0101_1001;
  3 | var c = 0xAE_FE_2F;

// After
var a = 1_000_000_000;
var b = 0b1101_0101_1001;
var c = 0xAE_FE_2F;

Flow

Skriv ut Flow-typkommentarer som kommentarer (#3449) av @duailibe

Flow typkommentarer är ett bra sätt att få typkontroll utan att behöva transpilera dina filer. Innan denna release skulle Prettier, med Flow-parsern, inte skriva ut typkommentarerna som kommentarer, vilket gjorde det omöjligt att använda funktionen. Nu kommer Prettier korrekt upptäcka om typkommentaren var en kommentar och skriva ut den på rätt sätt för /*: ... */-kommentarer. Arbete pågår för /*:: ... */-kommentarer.

// Input
let foo: string = "a";

// Before
let foo: string = "a";

// After
let foo: string = "a";

Skriv ut kommentarer efter parametrar i arrow-funktioner (#3444) av @duailibe

Om du använder Babylon-parsern finns det olika problem med Flow-kommentarer där kommentarer flyttas runt. Ett av dessa åtgärdades i denna release. Vi kommer nu närmare stöd för denna funktion.

// Before
const run = (cmd /*: string */ /*: Promise<void> */) => {};

// After
const run = (cmd /*: string */) /*: Promise<void> */ => {};

Skriv ut parenteser i FunctionTypeAnnotation när arrowParens är "always" (#3616) av @duailibe

I förra releasen lade vi till ett nytt arrowParens-alternativ. En plats där det förbisågs var i Flow-funktionstypsannotationer. Nu när arrowParens är inställt på always kommer vi att sätta parenteser runt enskilda argument.

// --arrow-parens always

// Before
type SomeType = {
  something: number => number
};

// After
type SomeType = {
  something: (number) => number
};

JSX

Inline-do-uttryck inuti JSX (#3607) av @vjeux

"Do expressions" är ett stage 1 ECMAScript-förslag som är särskilt användbart i JSX. Eftersom extra indenteringsnivå inte krävs har vi nu integrerat dem direkt i uttryckscontainern.

// Before
{
  do {
    // ...
  }
}

// After
{do {
 // ...
}}

Förhindra tillägg av mjuk radbrytning efter pilattribut med kommentarer (#3641) av @duailibe

Detta åtgärdar ett mindre problem där en extra radbrytning kunde dyka upp i JSX-attribut.

// --print-width 13 (for demonstration)

// Before
<span
  attr={
    // comment
    () =>
      true

  }
/>;

// After
<span
  attr={
    // comment
    () =>
      true
  }
/>;

Radbryt inte JSX-element som attribut i () (#3640) av @duailibe

JSX-specifikationen har en dold funktion som tillåter att skicka ett element som attribut till ett annat element. Prettier lade tidigare till parenteser runt, vilket orsakade ett syntaxfel. Detta är nu åtgärdat. Observera att medan vissa parsers hanterar denna funktion, tillåter inga JSX-transformeringar det ännu. Den första som kommer att stödja det är Babel 7 som för närvarande är i betaversion.

// Before
<Foo
  content=(
    <div>
      <div />
    </div>
  )
/>

// After
<Foo
  content=<div>
    <div />
  </div>
/>

SCSS

Skriv ut kommentarer inuti selektorer som de är (#3649) av @vjeux

Tyvärr stöder CSS-parsern vi använder för selektorer inte kommentarer. Det fanns därför ett fall där kommentarer inom selektorer kunde flyttas till rader med kommentarer. Detta har nu åtgärdats.

/* Before */

// Foo
.foo,
// Bar .bar {
    display: block;
}

/* After */

// Foo
.foo,
// Bar
.bar {
  display: block;
}

GraphQL

Uppdatera GraphQL-parser (#3605) av @vjeux

GraphQL-specifikationen utvecklas och Prettier stöder nu tre nya funktioner:

Möjligheten att annotera typer med strängbeskrivningar

"""
Type description
"""
type Foo {
  "some description"
  someProperty: String!

  """
  some really
  long description
  """
  someOtherProperty: [String!]!
}

Att utelämna {} när det inte finns något innehåll

extend enum Site @onEnum

Möjlighet att utöka alla typer

extend input InputType {
  other: Float = 1.23e4
}

Markdown

Ersätt radbrytningar med hårda radbrytningar i multiparser (#3611) av @ikatyang

När JavaScript var inbäddat i ett Markdown-citatblock (>) försvann citattecknet. Detta har nu korrigerats.

<!-- before -->

> ````md
> <!-- prettier-ignore -->
> ```js
ugly   ( code ) ;
```
> ````

<!-- after -->

> ````md
> <!-- prettier-ignore -->
> ```js
> ugly   ( code ) ;
> ```
> ````

Anpassa citattecken i Markdown-länktitlar till singleQuote-alternativet (#3481) av @j-f1

Tidigare användes " för alla länktitlar, nu respekteras singleQuote-alternativet. Vi använder parenteser () om titeln innehåller både ' och ".

<!-- --single-quote -->

<!-- Before -->

[ref]: https://prettier.io "Prettier"
[other-ref]: https://example.com "Shakespeare's \"Romeo and Juliet\" is a famous play"

<!-- after -->

[ref]: https://prettier.io 'Prettier'
[other-ref]: https://example.com (Shakespeare's "Romeo and Juliet" is a famous play)

Skriv ut imageReference utan alt-text i Markdown (#3643) av @duailibe

Vi har fixat ett specialfall med bildreferenser utan alt-text som fick Prettier att krascha.

<!-- before -->
TypeError: doc is null

<!-- after -->
![][logo]

[logo]: https://github.com/prettier/prettier-logo/blob/master/images/prettier-logo-light.png?raw=true

Respektera tabWidth för listindrag (#3694) av @ikatyang

Vi använde tidigare tvångsvis 2 mellanslag för listindrag, nu tar vi hänsyn till tadWidth.

<!-- --tab-width 4 -->

<!-- before -->
* one
  * two

<!-- after -->
* one
    * two

API

Lägg till options-fält i getSupportInfo() (#3433) av @ikatyang

prettier.getSupportInfo().options kommer nu att innehålla en array med de alternativ som Prettier stöder.

Sök endast efter .editorconfig upp till VCS-katalogen (#3559) av @josephfrazier

Det kan vara förvirrande att diagnostisera problem där Prettier formaterar kod olika mellan två personer med samma repository. Eftersom Prettier stöder .editorconfig-filer och vi tidigare sökte hela vägen upp till ~/.editorconfig, kunde detta oavsiktligt ändra kodformateringen. Vi tittar nu endast upp till projektets rotkatalog.

CLI

Se till att all CLI-loggning går via en logger (#3515) av @azz

Alternativet --loglevel respekterades inte i vissa fall, nu respekteras det för all CLI-loggning.

# Before
$ prettier --loglevel silent --write test.js
test.js 91ms

# After
$ prettier --loglevel silent --write test.js

Skriv ut filer som de är om de ignoreras (#3618) av @duailibe

Vi har förbättrat hur CLI:n hanterar ignorerade filer. Tidigare när en fil ignorerades via .prettierignore, gav CLI:n ingen utdata, vilket påverkade redigerarintegrationer. Nu fungerar det så här:

• Med --write: Läs eller skriv inte till den ignorerade filen.

• Utan --write: Läs den ignorerade filen och skriv ut den oförändrad.

Redigerarintegrationer

Lägg till PostCSS-tillägg i getSupportInfo() (#3454) av @ardevelop

Vissa redigerarintegrationer använder Prettiers getSupportInfo-funktion för att dynamiskt stödja alla språk. Detta lägger till stöd för *.pcss-filer.

Lägg till "JSON med kommentarer" i getSupportInfo() (#3496) av @thorn0

På samma sätt kommer "JSON med kommentarer" nu att identifieras.

---

🎂