Hoppa till huvudinnehållet

Prettier 1.8: Markdown-stöd

· 15 min att läsa
Lucas Azzola
Lucas Azzola
Inofficiell Beta-översättning

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

Denna release tillför stöd för Markdown, en ny flagga --insert-pragma, åtgärdar flera formateringsproblem, lägger till stöd för vissa nya experimentella operatorer och förbättrar vårt stöd för redigerarintegration.

Höjdpunkter​

Markdown-stöd​

Stöd för markdown (#2943) av @ikatyang​

Du kan nu köra Prettier på Markdown-filer! 🎉

Implementationen följer CommonMark-specifikationen mycket väl och bygger på det utmärkta paketet remark-parse.

Radbrytning

En av Prettiers kärnfunktioner är förmågan att bryta kod vid en angiven radlängd. Detta gäller även för Markdown, vilket innebär att du kan upprätthålla snygga och rena Markdown-filer med 80 teckens bredd utan att manuellt behöva justera radbrytningar när du lägger till eller tar bort ord.

Indata:

Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valourous visitation of a bygone vexation stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition! The only verdict is vengeance; a vendetta held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it's my very good honour to meet you and you may call me V.

Utdata:

Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim
and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity,
is a vestige of the vox populi, now vacant, vanished. However, this valourous
visitation of a bygone vexation stands vivified and has vowed to vanquish these
venal and virulent vermin vanguarding vice and vouchsafing the violently vicious
and voracious violation of volition! The only verdict is vengeance; a vendetta
held as a votive, not in vain, for the value and veracity of such shall one day
vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage
veers most verbose, so let me simply add that it's my very good honour to meet
you and you may call me V.

Obs: Vi överväger att lägga till ett alternativ för detta, se #3183 för diskussion. Uppdatering: Vi har lagt till ett alternativ i 1.8.2 som heter --no-prose-wrap

Obs för CJK-användare: Om din Markdown-renderare inte stöder CJK-radslut måste du använda ett plugin som markdown-it-perfect-newline-for-cjk, hexo-filter-fix-cjk-spacing etc. för att ta bort extra mellanslag.

// Source
一二三
四五六
七八九

// Rendered content with unsupported renderer
一二三 四五六 七八九

// Rendered content with supported renderer or via plugin
一二三四五六七八九

Kodformatering

Med hjälp av Prettiers generiska "multiparser" kommer Prettier nu att formatera kodeblock i Markdown! Vi använder språkkoden som anges med kodeblocket för att avgöra vilket språk det är och kan därmed formatera alla språk som Prettier stöder (inklusive Markdown självt, om du gillar det).

Indata:

```js
reallyUgly    (
javascript
  )
```

```css
.h1 {     color : red }
```

Utdata:

```js
reallyUgly(javascript);
```

```css
.h1 {
  color: red;
}
```

Obs: I vissa fall kanske du inte vill formatera din kod i Markdown. Precis som i andra språk kan du i Markdown använda en ignoreringskommentar före kodeblocket för att undanta det från formatering:

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

Listor

När du omarrangerar listobjekt kommer alla nummer att korrigeras automatiskt efter att du kört Prettier!

Markdown-listor

Obs: Du kan faktiskt välja bort detta genom att använda 1. för alla listobjekt om du vill optimera för renare diffar.

Tabeller

Tabeller kommer också automatiskt att justeras för att passa sitt innehåll. Detta skulle vara fullständigt ohanterligt utan ett automatiserat verktyg.

Markdown-tabeller

Markdown-i-JS

Genom att använda antingen md eller markdown märkta malliteraler kan du formatera Markdown-kod inuti JavaScript.

const markdown = md`
  # heading

  1. list item
`;

CLI​

Lägg till alternativ för att infoga @format i första docblock om det saknas (#2865) av @samouri​

I version 1.7 lade vi till ett alternativ som heter --require-pragma för att kräva att filer innehåller en /** @format */-pragma för att formateras. För att lägga till denna pragma till en stor uppsättning filer kan du nu använda flaggan --insert-pragma.

prettier --write "folder/**/*.js" --insert-pragma

Lägg till --loglevel-alternativ (#2992) av @ikatyang​

Denna smidiga funktion låter dig välja att använda (eller inte använda) Prettiers loggning. Vi har också städat upp loggningen avsevärt sedan 1.7.

$ prettier --loglevel=debug blarg
$ ./bin/prettier.js --loglevel=debug blarg
[debug] normalized argv: {"_":["blarg"],"bracket-spacing":false,"color":true,"debug-check":false,"debug-print-doc":false,"flow-parser":false,"insert-pragma":false,"jsx-bracket-same-line":false,"list-different":false,"require-pragma":false,"semi":false,"single-quote":false,"stdin":false,"use-tabs":false,"version":false,"with-node-modules":false,"write":false,"loglevel":"debug","ignore-path":".prettierignore","config-precedence":"cli-override"}
[error] No matching files. Patterns tried: blarg !**/node_modules/** !./node_modules/**

JavaScript​

Fixa indrag för JSDoc-kommentarer (#2470) av @maxdeviant​

Detta har länge varit ett känt problem med Prettier. När man formaterar kod som resulterar i en ändring av indragsnivån så hamnade JSDoc-kommentarerna feljusterade. Vi är glada att rapportera att detta nu är fixat!

// Before
function theFunction2(action$, store) {
  /*
     * comments
     */
  return true;
}

// After
function theFunction2(action$, store) {
  /*
   * comments
   */
  return true;
}

Skriv ut pipeline- och nullish-coalescing-operatorer (#3036) av @azz​

Vi har lagt till stöd för två nya föreslagna operatorer i Prettier: pipeline operator och nullish coalescing operator.

Pipeline operator är för närvarande ett förslag i stadium ett.

Detta förslag introducerar en ny operator |> som liknar F#, OCaml, Elixir, Elm, Julia, Hack och LiveScript, samt UNIX-rör (pipes). Det är ett bakåtkompatibelt sätt att effektivisera kedjade funktionsanrop på ett lättläst, funktionellt sätt, och ger ett praktiskt alternativ till att utöka inbyggda prototyper.

// Before
let result = exclaim(capitalize(doubleSay("hello")));

// After
let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;

Nullish coalescing operator är ytterligare ett förslag i stadium ett.

När man utför valfri egenskapsåtkomst i en nästad struktur tillsammans med den valfria kedjeoperatorn (optional chaining operator) är det ofta önskvärt att ange ett standardvärde om resultatet av den egenskapsåtkomsten är null eller undefined.

Denna operator liknar || med skillnaden att den endast utvärderar högersidan om vänstern är undefined eller null, inte "", 0, NaN, etc.

const foo = object.foo ?? "default";

Förbättrade radbrytningar för malliteralsuttryck (#3124) av @duailibe​

Detta var ytterligare ett känt problem med Prettier: när man skrev ut en malliteralsträng med uttryck inuti som överskred skrivbredden så bröts koden på konstiga ställen inuti uttrycken. Nu, om Prettier behöver infoga en radbrytning, ska det ske precis mellan ${ och }.

// Before
const description = `The value of the ${cssName} css of the ${this
  ._name} element`;

const foo = `mdl-textfield mdl-js-textfield ${className} ${content.length > 0
  ? "is-dirty"
  : ""} combo-box__input`;

// After
const description = `The value of the \${cssName} css of the \${
  this._name
} element`;

const foo = `mdl-textfield mdl-js-textfield ${className} ${
  content.length > 0 ? 'is-dirty' : ''
} combo-box__input`

JSX​

Inlinea inte avslutande } för attribut i pilfunktioner (#3110) av @duailibe​

För att ligga närmare Airbnbs stilguide, och eftersom det aldrig var meningen att det skulle skrivas ut på detta sätt, har vi flyttat } till nästa rad i JSX. Detta gör det enklare att se ändringar och gör det lättare att flytta kod genom att flytta rader i din editor.

// Before
<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)}
/>;

// After
<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
/>;

Andra ändringar​

JavaScript​

Få fabriksdetektering att hantera flera element (#3112) av @vjeux​

Det fanns en bugg i heuristiken som Prettier använder för att avgöra om ett uttryck är en fabrik eller inte. Den hanterar nu längre medlemsuttryck korrekt.

// Before
window.FooClient
  .setVars({
    locale: getFooLocale({ page }),
    authorizationToken: data.token
  })
  .initVerify("foo_container");

// After
window.FooClient.setVars({
  locale: getFooLocale({ page }),
  authorizationToken: data.token
}).initVerify("foo_container");

Hantera kommentarer mellan funktionsnamn och öppnande parentes (#2979) av @azz​

Att placera kommentarer på rätt ställe är en oändlig utmaning 😉. Den här fixen säkerställer att kommentarer bredvid funktionsnamn återges korrekt.

// Before
function f(/* comment*/ promise) {}

// After
function f /* comment*/(promise) {}

Stöd sekventiella CallExpressions i medlemskedjor (#2990) av @chrisvoll​

Medlemskedjor är en av Prettiers mest komplexa delar. Denna PR fixar ett problem där upprepade anrop ledde till att nästa metod inte flyttades till nästa rad.

// Before
wrapper
  .find("SomewhatLongNodeName")
  .prop("longPropFunctionName")().then(function() {
  doSomething();
});

// After
wrapper
  .find("SomewhatLongNodeName")
  .prop("longPropFunctionName")()
  .then(function() {
    doSomething();
  });

Ta hänsyn till tomma rader i långa medlemsanropskedjor (#3035) av @jackyho112​

Tidigare tog Prettier bort alla radbrytningar inom en medlemskedja. Nu behåller vi upp till en om den finns i källkoden. Detta är användbart för flytande API:er som du vill bryta upp över flera rader.

angular
  .module("AngularAppModule")

  // Constants.
  .constant("API_URL", "http://localhost:8080/api")

  // App configuration.
  .config(appConfig)
  .run(appRun);

Fixa problem där första argumentet lämnades efter vid radbrytningar (#3079) av @mutdmour​

Detta adresserar ett problem där vår speciella inline-beteende för objekt gjorde att indenteringen saknades i funktionsanropet.

// Before
db.collection("indexOptionDefault").createIndex({ a: 1 },
{
  indexOptionDefaults: true
},
function(err) {
  // code
});

// After
db.collection("indexOptionDefault").createIndex(
  { a: 1 },
  {
    indexOptionDefaults: true
  },
  function(err) {
    // code
  }
);

Bryt parenteser för binära uttryck i medlemsuttryck (#2958) av @duailibe​

Likaså fanns ett annat hörnfall där indentering saknades i logiska uttryck. Även detta är nu fixat.

// Before
const someLongVariable = (idx(
  this.props,
  props => props.someLongPropertyName
) || []
).map(edge => edge.node);

// After
const someLongVariable = (
  idx(this.props, props => props.someLongPropertyName) || []
).map(edge => edge.node);

Förhindra brytning av MemberExpression inuti NewExpression (#3075) av @duailibe​

Det finns så många sätt att bryta en rad. Vissa ser mycket sämre ut än andra. Brytning i detta fall såg riktigt konstig ut, så det är nu fixat!

// Before
function functionName() {
  if (true) {
    this._aVeryLongVariableNameToForceLineBreak = new this
      .Promise((resolve, reject) => {
        // do something
      });
  }
}

// After
function functionName() {
  if (true) {
    this._aVeryLongVariableNameToForceLineBreak = new this.Promise(
      (resolve, reject) => {
        // do something
      }
    );
  }
}

Fixa array-accessorer i metodkedjor (#3137) av @duailibe​

I en metodkedja delar vi upp rader genom att gruppera element tillsammans, och åtkomst till en array ska skrivas ut i slutet av en grupp istället för i början.

// Before
find('.org-lclp-edit-copy-url-banner__link')
  [0].getAttribute('href')
  .indexOf(this.landingPageLink)

// After
find('.org-lclp-edit-copy-url-banner__link')[0]
  .getAttribute('href')
  .indexOf(this.landingPageLink)

Flow och TypeScript​

Fixa indentering av objekttyper med intersection (#3074) av @duailibe​

Detta var en mindre justeringsbugg i intersection-typer och är nu fixad.

// Before
type intersectionTest = {
  propA: X
} & {
  propB: X
} & {
    propC: X
  } & {
    propD: X
  };

// After
type Props = {
  propA: X
} & {
  propB: X
} & {
  propC: X
} & {
  propD: X
};

Behåll parenteser runt TSAsExpression i ConditionalExpression (#3053) av @azz​

Vi missade ett fall där vi behöver behålla parenteserna med TypeScripts as-assertioner. Detta är nu fixat.

// Before
aValue as boolean ? 0 : -1;

// After
(aValue as boolean) ? 0 : -1;

JSX​

Komprimera flera JSX-mellanslag (#2973) av @karl​

Detta åtgärdar problemet där JSX-formatering ibland behövde köras två gånger för att bli stabil. Detta inträffade när du hade flera JSX-mellanslagselement eller JSX-mellanslag följt av ett vanligt mellanslag.

// Before
<div>
    {" "} <Badge src={notificationIconPng} />
</div>;

// After
<div>
  {" "}
  <Badge src={notificationIconPng} />
</div>

Skriv inte JSX-klammer på samma rad när den har efterföljande kommentarer (#3088) av @azz​

Detta var ett problem med flaggan --jsx-bracket-same-line. Det visade sig att man inte alltid kan placera klammerparentesen på samma rad...

// Input
<div
  // comment
>
  {foo}
</div>

// Before
<div>
// comment
  {foo}
</div>;

// After
<div
// comment
>
  {foo}
</div>;

CSS​

Bevara radbrytningar i grid-deklarationer (#3133) av @duailibe​

Prettier kommer nu att bevara radbrytningar från källkoden vid formatering av grid och grid-template-*-regler, eftersom dessa är viktiga att hålla på separata rader, samtidigt som övrig formatering fortfarande appliceras (t.ex. för siffror och citattecken).

/* Original Input */
div {
  grid:
    [wide-start] 'header header header' 200.000px
    [wide-end] "footer footer footer" .50fr
    / auto 50.000px auto;
}

/* Before */
div {
  grid: [wide-start] "header header header" 200px [wide-end]
    "footer footer footer" 0.5fr / auto 50px auto;
}

/* After */
div {
  grid:
    [wide-start] "header header header" 200px
    [wide-end] "footer footer footer" 0.5fr
    / auto 50px auto;
}

SCSS​

Formatera SCSS-kartor som CSS-regler (#3070) av @asmockler​

Det visade sig att SCSS-kartor blir mycket snyggare när de skrivs ut över flera rader.

// Before
$map: (color: [#111111](https://github.com/prettier/prettier/pull/111111), text-shadow: 1px 1px 0 salmon)

// After
$map: (
  color: [#111111](https://github.com/prettier/prettier/pull/111111),
  text-shadow: 1px 1px 0 salmon
);

CSS-in-JS​

Fixa formatering av styled(Foo).attrs(...)`` (#3073) av @existentialism​

Prettier kommer nu att formatera CSS i styled-components-kod som ser ut så här:

styled(Component).attrs({})`
  color: red;
`;

GraphQL​

Förhindra formatering av GraphQL-mallliteraler med uttryck (#2975) av @duailibe​

Prettier stöder inte formatering av JavaScript-uttryck i GraphQL. Se #2640 för spårning. Det fanns en bugg där formatering av ett uttryck ledde till ogiltig kod, så vi har helt avaktiverat formatering av GraphQL när den innehåller JavaScript-uttryck tills vi har fullt stöd.

// Before
(invalid code)

// After
graphql(schema, `{ query test { id }} ${fragment}`)

CLI​

Använd inte ANSI-koder om stdout inte är en TTY (#2903) av @Narigo​

Tidigare kunde det vara problematiskt att pipa utdata från --list-different till andra verktyg på grund av ANSI-färgkoder som visar om en fil ändrats. Denna PR inaktiverar färg när Prettiers utdata pipas till en annan process.

Konfiguration​

Använd relativa sökvägar med CLI (#2969) av @ahmedelgabri​

Detta fixar en bugg där sökvägar som börjar med ./ inte matchade mönster i .prettierignore.

## .prettierignore
path/to/*.js

Efter denna fix kommer inga filer att skrivas när följande exekveras:

$ prettier --write ./path/to/*.js

Lös filsökvägar relativt konfigurationsfil (#3037) av @azz​

Detta åtgärdar ett problem där .prettierrc-överskridanden under vissa förhållanden inte respekterades för absoluta sökvägar med resolveConfig-API:t.

Kärnfunktionalitet​

Respektera CJK-bredd och kombinerade tecken (#3003, #3015) av @ikatyang​

Kinesiska, japanska och koreanska tecken betraktas nu som två tecken breda.

// Before (exceeds print width when CJK characters are 2x monospace chars)
const x = ["中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文"];

// After
const x = [
  "中文",
   // ...
  "中文"
];

##3015 säkerställer också att kombinerande tecken (t.ex. Á) räknas som ett tecken.

Editorstöd​

Implementera getSupportInfo() och använd den för inferens (#3033) av @azz​

Vi har lagt till en ny funktion i API:et (prettier.getSupportInfo([version])) och CLI-flaggan --support-info. Denna kan användas för att fråga Prettier om vilka språk den aktuella versionen eller äldre versioner stöder. Den ger också användbar information som CodeMirror-ID:n, tmScopes etc. som kan automatisera delar av arbetet med uppslagstabeller i texteditorintegrationer.

Internt använder vi denna information för att styra vilka filändelser som aktiverar vilka parsers, samt stödja vanliga filer utan filändelser som .prettierrc, Jakefile etc.

## prettier knows that this file is JSON now.
$ prettier --write .prettierrc

Dela källelement relativt till deras språk (#3069) av @CiGit​

Detta åtgärdar ett problem i editorer som stöder områdesformatering, där formatering av ett objekt skulle få Prettier att krascha.

Tack! ❤️​

Tack till alla som bidrog till denna release, liksom de som rapporterade problem! Prettier har blivit en mycket stabil programvara som många litar på med sin kod. Vi tar den tilliten på allvar och åtgärdar sällsynta problem som bryter kod med högsta prioritet. Vi kan inte åtgärda dessa problem om vi inte vet om dem, så var inte rädd att skapa ett issue!