Prettier 1.9: JSX-fragment, EditorConfig och parenteser för pilar

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 introducerar ett alternativ för parenteser i pilsnärtsfunktionsargument, stöd för den nya JSX-fragmentsyntaxen (<>), stöd för .editorconfig-filer samt förbättringar för vårt GraphQL- och Markdown-stöd.

Höjdpunkter

JavaScript

Alternativ för parenteser i pilsnärtsfunktionsargument (#3324) av @rattrayalex och @suchipi

Vid utskrift av pilsnärtsfunktioner utelämnade Prettier tidigare parenteser runt argument när de inte var strikt nödvändiga, så här:

// no parens
foo => {};

// parens
(foo: Number) => {};

// parens
({ foo }) => {}

// parens
(foo = 5) => {}

Detta ledde till den mest kommenterade tråden i vår ärendespårare. Prettier har nu alternativet --arrow-parens (arrowParens i konfigurationen) som för närvarande kan anta två värden:

• "avoid" - (standard) bevara beteendet som utelämnar parenteser när möjligt

• "always" - inkluderar alltid parenteser

JSX-fragmentsyntax (#3237) av @duailibe

Prettier kommer nu att känna igen och formatera JSX med den nya fragmentsyntaxen, som visas i koden nedan:

function MyComponent() {
  return (
    <>
      <Children1 />
      <Children2 />
      <Children3 />
    </>
  );
}

Åtgärda långsam formatering av långa texter i JSX (#3268, #3273) av @duailibe

Vi fick rapporter om att formatering av JSX-filer med mycket lång text (~1000 rader) var extremt långsam och upptäckte två prestandaflaskhalsar i vår fill-primitive, som skriver ut text tills den når utskriftsbredden och sedan infogar en radbrytning.

Markdown

Alternativ för att bevara radbrytningar i text (#3340) av @ikatyang

Efter lanseringen av vårt Markdown-stöd fick vi feedback om att radbrytning för att respektera utskriftsbredden kunde påverka vissa renderare som är känsliga för radbrytningar. I 1.8.2 lanserade vi alternativet proseWrap: false som skrev ut stycken på en enda rad, där användare förlitade sig på redigerares "mjuk radbrytning".

I 1.9 introducerar vi alternativet proseWrap: "preserve" som respekterar textens ursprungliga radbrytningar och låter användarna bestämma var texten ska brytas.

[VARNING] proseWrap med booleskt värde är föråldrat - använd "always", "never" eller "preserve" istället.

[BREAKING CHANGE] proseWrap-alternativet är nu som standard "preserve" eftersom vissa renderare är känsliga för radbrytningar.

GraphQL

Stöd för interpolation på toppnivå (#3370) av @lydell

När stödet för GraphQL släpptes saknade Prettier interpolation och hoppade därför över formatering om interpolationer fanns, eftersom interpolationer gör formatering mycket svårare. Även om detta fungerar bra i de flesta fall missade användare av Apollo Client ibland Prettiers GraphQL-stöd, eftersom Apollo Client använder interpolation för att dela fragment mellan frågor. Den goda nyheten är att endast interpolationer på toppnivå är tillåtna, vilket var betydligt enklare att lägga till stöd för i Prettier.

I version 1.9 formaterar vi GraphQL-frågor med interpolation på toppnivå:

gql`
  query User {
    user(id: "Bob") {
      ...UserDetails
    }
  }

  ${UserDetailsFragment}
`

(Prettier kommer fortfarande att hoppa över formatering om interpolationen finns inuti en fråga, mutation eller liknande.)

Bevara avsiktliga radbrytningar i GraphQL (#3252) av @duailibe

Prettier kommer nu att respektera avsiktliga radbrytningar inuti GraphQL-frågor (men begränsat till 1), där det tidigare tog bort dem.

query User {
  name

  age
}

CSS

Gör inte element- och attributnamn i selektorer till gemener (#3317) av @lydell

CSS är mestadels skiftlägesokänsligt, så Prettier har en tid konverterat text till gemener för att bibehålla konsekvens. Det visade sig att vi förbisett en detalj i CSS-specifikationen. Element- och attributnamn i selektorer beror på märkningsspråket: I HTML är de skiftlägesokänsliga, men i SVG (XML) är de inte det. Tidigare konverterade Prettier felaktigt element- och attributnamn till gemener, men nu gör vi inte det längre.

Konfiguration

Lägg till stöd för EditorConfig (#3255) av @josephfrazier

Det har tagit tid, men Prettier kommer nu äntligen att respektera din .editorconfig-fil. Detta inkluderar:

• indent_style

• indent_size/tab_width

• max_line_length

prettier-CLI:n respekterar .editorconfig som standard, men du kan välja bort det med --no-editorconfig.
API:t respekterar dock inte .editorconfig som standard, för att undvika potentiella problem med redigerarintegrationer (se här för detaljer). För att aktivera stödet, lägg till editorconfig: true i prettier.resolveConfig-alternativen.

Andra ändringar

JavaScript

Bryt inte enkla element i JSX (#3250) av @duailibe

Prettier kommer inte längre att bryta ett element utan attribut, vilket behåller element som <br /> som en enhet.

Bryt inte identifierare i malliterals uttryck (#3299) av @duailibe

I föregående version testade vi en ny strategi för att bryta malliterals med uttryck inuti för att respektera utskriftsbredden. Vi har fått feedback om att det i vissa fall faktiskt föredrogs att överskrida utskriftsbredden istället för att bryta i flera rader.

Från och med nu kommer malliterals-uttryck som innehåller en enda identifierare inte längre att brytas:

const foo = `Hello ${username}. Today is ${month} ${day}. You have ${newMessages} new messages`.

Åtgärda formatering av kommentarer inuti pilsnärtsfunktioner (#3334) av @jackyho112

Åtgärdar ett gränsfall där Prettier flyttade kommentarer på ett sätt som störde verktyg som Webpack:

const API = {
  loader: () => import('./test' /* webpackChunkName: "test" */),
};

// would get formatted to

const API = {
  loader: (/* webpackChunkName: "test" */) => import("./test")
};

Åtgärda utskrift av kommentarer kring dekoratörer och klasegenskaper (#3382) av @azz

Det fanns ett fall där kommentarer mellan en dekoratör och en klass-egenskap flyttades till en ogiltig position.

// Before
class Something {
  @decorator
  static // comment
  property = 1;
}

// After
class Something {
  @decorator
  // comment
  static property = 1;
}

Flow

Bryt inte på tomma typparametrar (#3281) av @Vjeux

Den kommer inte längre att bryta tomma typparametrar (foo: Type<>).

Lägg till stöd för flow mixins när babylon används (#3391) av @bakkot

Vi tog av misstag bort flow mixins, detta har åtgärdats men gäller endast för babylon-parsern.

// Before
class Foo extends Bar {}

// After
class Foo extends Bar mixins Baz {}

TypeScript

Skriv inte ut avslutande kommatecken efter objektrest-spridning (#3313) av @duailibe

Detta var inkonsekvent med JavaScript och Flow, Prettier kommer inte längre skriva ut avslutande kommatecken i följande fall när TypeScript-parsern används:

const {
  bar,
  baz,
  ...rest
} = foo;

Skriv ut parenteser runt typassertioner för dekoratörer (#3329) av @azz

Vi utelämnade parenteser runt typassertioner inuti dekoratörer:

@(bind as ClassDecorator)
class Decorated {}

Markdown

Bryt inte inlineCode (#3230) av @ikatyang

Prettier kommer inte bryta text inuti inlineCode vilket innebär att den endast bryter före eller efter den.

Inget extra blanksteg mellan icke-CJK och CJK-skiljetecken och vice versa (#3244, #3249) av @ikatyang

Åtgärdar fall där Prettier lade till extra blanksteg som i följande exempel:

扩展运算符（spread ）是三个点（`...`）。

This is an english paragraph with a CJK quote " 中文 ".

Escapa all text som liknar emphasis (#3246) av @ikatyang

Åtgärdar fallet där \_\_text\_\_ skulle formateras som __text__.

Hantera skiljeteckensvarianter (#3254) av @ikatyang

Prettier tar nu hänsyn till inte bara ASCII-skiljetecken utan även Unicode.

Stöd för TOML front matter (#3290) av @ikatyang

Vi stödde redan YAML i front matter för Markdown-filer och har nu lagt till TOML-formatet eftersom vissa statiska webbplatsgeneratorer stödjer det.

+++
date: '2017-10-10T22:49:47.369Z'
title: 'My Post Title'
categories: ['foo', 'bar']
+++

This is the markdown body of my post.

Indentera endast den första icke-listanoden i kryssrutslistposter (#3297) av @ikatyang

Åtgärdar en bugg där den indenterade rader efter en lista när den inte borde:

* parent list item

     * child list item

* [x] parent task list item

     * [x] child task list item

skulle bli:

* parent list item

  * child list item

* [x] parent task list item

      * [x] child task list item

Bevara icke-brytande blanksteg (#3327) av @ikatyang

Icke-brytande blanksteg är användbara för att hålla ord separerade av mellanslag ihop på samma rad (t.ex. siffror och enheter eller produktnamn med flera ord). Prettier konverterade felaktigt dessa till vanliga mellanslag.

Bryt inte före speciellt prefix (#3347) av @ikatyang

Åtgärdar en bugg där Prettier kunde bryta text om den överskred utskriftsbredden precis före en siffra följt av . vilket skulle tolkas som en numrerad lista:

She grew up in an isolated village in the 19th century and met her father aged
29. Oh no, why are we in a numbered list now?

Utelämna semikolon i enkla JSX-uttryck (#3330) av @sapegin

Prettier kommer att utelämna semikolon (före och efter) inuti kodexempel om det är ett enkelt JSX-uttryck:

No semi:

<!-- prettier-ignore -->
```jsx
<div>Example</div>
```