Inställningar

Inofficiell Beta-översättning

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

Prettier levereras med ett antal formateringsalternativ.

För att lära dig mer om Prettiers inställning till alternativ – se Alternativfilosofi.

Om du ändrar några inställningar rekommenderas det att göra det via en konfigurationsfil. På så sätt vet Prettier CLI, editorintegrationer och andra verktyg vilka inställningar du använder.

Experimentella Ternära Uttryck

Prova Prettiers nya ternära formatering innan det blir standardbeteendet.

Giltiga alternativ:

• true - Använd "curious ternaries" med frågetecknet efter villkoret.

• false - Behåll standardbeteendet för ternära uttryck; ha frågetecknet på samma rad som konsekvensdelen.

Default	CLI Override	API Override
false	--experimental-ternaries	experimentalTernaries: <bool>

Experimentell Operatorplacering

Giltiga alternativ:

• "start" - När binära uttryck bryter rader, placera operatorer i början av nya rader.

• "end" - Standardbeteende; när binära uttryck bryter rader, placera operatorer i slutet av föregående rader.

Default	CLI Override	API Override
"end"	--experimental-operator-position <start|end>	experimentalOperatorPosition: "<start|end>"

Radbredd

Ange den radlängd som formateraren ska bryta vid.

varning

För bättre läsbarhet rekommenderar vi att inte använda mer än 80 tecken:

I kodstilsguider sätts ofta regler för maximal radlängd till 100 eller 120. Men när människor skriver kod strävar de inte efter att nå maximalt antal tecken per rad. Utvecklare använder ofta blanksteg för att dela upp långa rader för bättre läsbarhet. I praktiken blir den genomsnittliga radlängden ofta betydligt kortare än maxgränsen.

Prettiers printWidth-alternativ fungerar inte på samma sätt. Det är inte en hård övre gräns för radlängd. Det är ett sätt att tala om för Prettier ungefär hur långa du vill att raderna ska vara. Prettier kommer att skapa både kortare och längre rader, men strävar generellt efter att följa angiven radbredd.

Kom ihåg att datorer är dumma. Du måste uttryckligen tala om för dem vad de ska göra, medan människor kan göra egna (underförstådda) bedömningar, till exempel om när en rad ska brytas.

Med andra ord, använd inte printWidth som om det vore ESLints max-len – de är inte samma sak. max-len anger bara den högsta tillåtna radlängden, men inte den generellt önskvärda längden, vilket är vad printWidth specificerar.

Default	CLI Override	API Override
80	--print-width <int>	printWidth: <int>

Att sätta max_line_length i en .editorconfig-fil kommer att konfigurera Prettiers radbredd, såvida det inte åsidosätts.

(Om du inte vill ha radbrytning vid formatering av Markdown kan du ställa in alternativet Prosa Radbrytning för att inaktivera det.)

Tabbredd

Ange antalet mellanslag per indenteringnivå.

Default	CLI Override	API Override
2	--tab-width <int>	tabWidth: <int>

Att sätta indent_size eller tab_width i en .editorconfig-fil kommer att konfigurera Prettiers tabbredd, såvida det inte åsidosätts.

Tabbar

Indentera rader med tabbar istället för mellanslag.

Default	CLI Override	API Override
false	--use-tabs	useTabs: <bool>

Att sätta indent_style i en .editorconfig-fil kommer att konfigurera Prettiers användning av tabbar, såvida det inte åsidosätts.

(Tabbar kommer att användas för indentering men Prettier använder mellanslag för att justera element, som i ternära uttryck. Detta beteende kallas SmartTabs.)

Semikolon

Skriv ut semikolon i slutet av satser.

Giltiga alternativ:

• true - Lägg till ett semikolon i slutet av varje sats.

• false - Lägg endast till semikolon i början av rader som kan orsaka ASI-fel.

Default	CLI Override	API Override
true	--no-semi	semi: <bool>

Citattecken

Använd enkla citattecken istället för dubbla.

Observera:

• JSX-citattecken ignorerar detta alternativ – se jsx-single-quote.

• Om en typ av citattecken förekommer oftare än den andra kommer det mindre använda citattecknet att användas för att formatera strängen - Exempel: "I'm double quoted" blir "I'm double quoted" medan "This \"example\" is single quoted" blir 'This "example" is single quoted'.

Se motiveringen för strängar för mer information.

Default	CLI Override	API Override
false	--single-quote	singleQuote: <bool>

Citattecken för egenskaper

Bestämmer när egenskaper i objekt ska ha citattecken.

Giltiga alternativ:

• "as-needed" - Lägg endast till citattecken kring objektegenskaper där det krävs.

• "consistent" - Om minst en egenskap i ett objekt kräver citattecken, sätt citattecken kring alla egenskaper.

• "preserve" - Behåll citatteckens användning som i originalkoden.

Default	CLI Override	API Override
"as-needed"	--quote-props <as-needed|consistent|preserve>	quoteProps: "<as-needed|consistent|preserve>"

Observera att Prettier aldrig tar bort citattecken från numeriska egenskapsnamn i Angular-uttryck, TypeScript eller Flow eftersom skillnaden mellan sträng- och numeriska nycklar är viktig i dessa språk. Se: Angular, TypeScript, Flow. Prettier tar heller inte bort citattecken från numeriska egenskaper i Vue (se problemet).

JSX-citattecken

Använd enkla citattecken istället för dubbla i JSX.

Default	CLI Override	API Override
false	--jsx-single-quote	jsxSingleQuote: <bool>

Avslutande kommatecken

Standardvärde ändrades från es5 till all i v3.0.0

Lägg till avslutande kommatecken där det är möjligt i flerradiga kommaseparerade strukturer. (En enradig array får till exempel aldrig avslutande kommatecken.)

Giltiga alternativ:

• "all" - Avslutande kommatecken överallt där det är möjligt (inklusive funktionsparametrar och anrop). Kräver en motor som stöder ES2017 (Node.js 8+ eller modern webbläsare) eller nedtranspilering. Aktiverar även avslutande kommatecken i typparametrar i TypeScript (stöds sedan TypeScript 2.7).

• "es5" - Avslutande kommatecken där de är giltiga enligt ES5 (objekt, arrayer etc.). Tillåter avslutande kommatecken i typparametrar i TypeScript och Flow.

• "none" - Inga avslutande kommatecken.

Default	CLI Override	API Override
"all"	--trailing-comma <all|es5|none>	trailingComma: "<all|es5|none>"

Mellanrum i klammerparenteser

Lägg till mellanrum mellan klammerparenteser i objektliteraler.

Giltiga alternativ:

• true - Exempel: { foo: bar }.

• false - Exempel: {foo: bar}.

Default	CLI Override	API Override
true	--no-bracket-spacing	bracketSpacing: <bool>

Objektradbrytning

Först tillgänglig i v3.5.0

Konfigurera hur Prettier bryter objektliteraler när de skulle kunna få plats på en rad eller sträcka sig över flera rader.

Som standard formaterar Prettier objekt som flerradiga om det finns en radbrytning före första egenskapen. Författare kan använda denna heuristik för att kontextuellt förbättra läsbarheten, men det har vissa nackdelar. Se Flerradiga objekt.

Giltiga alternativ:

• "preserve" - Behåll som flerradigt om det finns radbrytning mellan inledande klammer och första egenskapen.

• "collapse" - Få plats på en rad när möjligt.

Default	CLI Override	API Override
"preserve"	--object-wrap <preserve|collapse>	objectWrap: "<preserve|collapse>"

Klammerrad

Placera > för ett flerradigt HTML-element (HTML, JSX, Vue, Angular) i slutet av sista raden istället för att stå ensamt på nästa rad (gäller inte självslutande element).

Giltiga alternativ:

• true - Exempel:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

• false - Exempel:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

Default	CLI Override	API Override
false	--bracket-same-line	bracketSameLine: <bool>

[Föråldrat] JSX-klammer

fara

Detta alternativ är föråldrat sedan v2.4.0, använd --bracket-same-line istället.

Placera > för ett flerradigt JSX-element i slutet av sista raden istället för att stå ensamt på nästa rad (gäller inte självslutande element).

Giltiga alternativ:

• true - Exempel:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

• false - Exempel:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

Default	CLI Override	API Override
false	--jsx-bracket-same-line	jsxBracketSameLine: <bool>

Parenteser för pilfunktioner

Först tillgänglig i v1.9.0, standardvärdet ändrades från avoid till always i v2.0.0

Inkludera parenteser runt en ensam parameter i pilfunktion.

Giltiga alternativ:

• "always" - Alltid inkludera parenteser. Exempel: (x) => x

• "avoid" - Utelämna parenteser när möjligt. Exempel: x => x

Default	CLI Override	API Override
"always"	--arrow-parens <always|avoid>	arrowParens: "<always|avoid>"

Vid första anblick kan det verka bättre att undvika parenteser på grund av mindre visuellt störande element. Men när Prettier tar bort parenteser blir det svårare att lägga till typannoteringar, extra argument eller standardvärden, samt att göra andra ändringar. Konsekvent användning av parenteser ger en bättre utvecklarupplevelse vid redigering av verkliga kodbaser, vilket motiverar alternativets standardvärde.

Område

Formatera endast ett segment av en fil.

Dessa två alternativ kan användas för att formatera kod som börjar och slutar vid ett visst teckenoffset (inklusive respektive exklusiv). Området kommer att sträcka sig:

• Bakåt till början av första raden som innehåller det valda uttrycket.

• Framåt till slutet av det valda uttrycket.

Default	CLI Override	API Override
0	--range-start <int>	rangeStart: <int>
Infinity	--range-end <int>	rangeEnd: <int>

Parser

Ange vilken parser som ska användas.

Prettier härleder automatiskt parsern från indatafilens sökväg, så du bör inte behöva ändra denna inställning.

Både babel- och flow-parsrar stöder samma uppsättning JavaScript-funktioner (inklusive Flow-typannoteringar). De kan skilja sig åt i vissa edge cases, så om du stöter på ett sådant kan du prova flow istället för babel. Nästan samma sak gäller för typescript och babel-ts. babel-ts kan stödja JavaScript-funktioner (förslag) som ännu inte stöds av TypeScript, men den är mindre tillåtande när det gäller ogiltig kod och mindre beprövad än typescript-parsern.

Giltiga alternativ:

• "babel" (via @babel/parser) Kallades "babylon" fram till v1.16.0

• "babel-flow" (samma som "babel" men aktiverar explicit Flow-tolkning för att undvika tvetydighet) Först tillgänglig i v1.16.0

• "babel-ts" (liknar "typescript" men använder Babel och dess TypeScript-plugin) Först tillgänglig i v2.0.0

• "flow" (via flow-parser)

• "typescript" (via @typescript-eslint/typescript-estree) Först tillgänglig i v1.4.0

• "espree" (via espree) Först tillgänglig i v2.2.0

• "meriyah" (via meriyah) Först tillgänglig i v2.2.0

• "acorn" (via acorn) Först tillgänglig i v2.6.0

• "css" (via postcss) Först tillgänglig i v1.7.1

• "scss" (via postcss-scss) Först tillgänglig i v1.7.1

• "less" (via postcss-less) Först tillgänglig i v1.7.1

• "json" (via @babel/parser parseExpression) Först tillgänglig i v1.5.0

• "json5" (samma parser som "json", men skriver ut som json5) Först tillgänglig i v1.13.0

• "jsonc" (samma parser som "json", men skriver ut som "JSON med kommentarer") Först tillgänglig i v3.2.0

• "json-stringify" (samma parser som "json", men skriver ut som JSON.stringify) Först tillgänglig i v1.13.0

• "graphql" (via graphql/language) Först tillgänglig i v1.5.0

• "markdown" (via remark-parse) Först tillgänglig i v1.8.0

• "mdx" (via remark-parse och @mdx-js/mdx) Först tillgänglig i v1.15.0

• "html" (via angular-html-parser) Först tillgänglig i 1.15.0

• "vue" (samma parser som "html", men formaterar även vue-specifik syntax) Först tillgänglig i 1.10.0

• "angular" (samma parser som "html", men formaterar även angular-specifik syntax via angular-estree-parser) Först tillgänglig i 1.15.0

• "lwc" (samma parser som "html", men formaterar även LWC-specifik syntax för omslutna template-attribut) Först tillgänglig i 1.17.0

• "mjml" (samma parser som "html", men formaterar även MJML-specifik syntax) Först tillgänglig i 3.6.0

• "yaml" (via yaml och yaml-unist-parser) Först tillgänglig i 1.14.0

Default	CLI Override	API Override
None	--parser <string>	parser: "<string>"

Obs: standardvärdet var "babylon" fram till v1.13.0.

Obs: det anpassade parser-API:t togs bort i v3.0.0. Använd plugins istället (hur du migrerar).

Filsökväg

Ange filnamnet för att avgöra vilken parser som ska användas.

Till exempel kommer följande att använda CSS-parsern:

cat foo | prettier --stdin-filepath foo.css

Det här alternativet är endast användbart i CLI:n och API:t. Det är inte meningsfullt att använda det i en konfigurationsfil.

Default	CLI Override	API Override
None	--stdin-filepath <string>	filepath: "<string>"

Kräv pragma

Först tillgänglig i v1.7.0

Prettier kan begränsa sig till att endast formatera filer som innehåller en speciell kommentar, kallad pragma, högst upp i filen. Detta är mycket användbart vid gradvis övergång av stora, oformaterade kodbaser till Prettier.

En fil med följande som första kommentar kommer att formateras när --require-pragma anges:

/**
 * @prettier
 */

eller

/**
 * @format
 */

Default	CLI Override	API Override
false	--require-pragma	requirePragma: <bool>

Infoga pragma

Först tillgänglig i v1.8.0

Prettier kan infoga en speciell @format-markör högst upp i filer för att ange att filen har formaterats med Prettier. Detta fungerar bra tillsammans med alternativet --require-pragma. Om det redan finns ett docblock högst upp i filen lägger detta alternativ till en ny rad med @format-markören.

Observera att "tillsammans" inte betyder "samtidigt". När båda alternativen används samtidigt har --require-pragma prioritet, så --insert-pragma ignoreras. Tanken är att under en gradvis införande av Prettier i en stor kodbas använder utvecklarna i övergångsprocessen --insert-pragma medan resten av teamet och automatiserade verktyg använder --require-pragma för att endast bearbeta filer som redan övergått. Funktionen är inspirerad av Facebooks adoptionsstrategi.

Default	CLI Override	API Override
false	--insert-pragma	insertPragma: <bool>

Kontrollera ignorera-pragma

Först tillgänglig i v3.6.0

Prettier kan tillåta enskilda filer att välja bort formatering om de innehåller en speciell kommentar (pragma) högst upp i filen.

Att kontrollera dessa markörer medför en liten initial kostnad under formatering, så det är inte aktiverat som standard.

En fil med följande som första kommentar kommer inte att formateras när --check-ignore-pragma anges:

/**
 * @noprettier
 */

eller

/**
 * @noformat
 */

Default	CLI Override	API Override
false	--check-ignore-pragma	checkIgnorePragma: <bool>

Prosa-omslutning

Först tillgänglig i v1.8.2

Som standard ändrar Prettier inte radbrytningar i markdown-text eftersom vissa tjänster använder renderare som är känsliga för radbrytningar, t.ex. GitHub-kommentarer och BitBucket. För att Prettier ska bryta prosa vid utskriftsbredden, ändra detta alternativ till "always". Om du vill att Prettier ska tvinga alla prosa-block till en enda rad och förlita sig på mjuk radbrytning i redigeraren/visaren kan du använda "never".

Giltiga alternativ:

• "always" - Bryt prosa om den överskrider utskriftsbredden.

• "never" - Slå samman varje prosa-block till en enda rad.

• "preserve" - Gör ingenting, lämna prosa oförändrad. Först tillgänglig i v1.9.0

Default	CLI Override	API Override
"preserve"	--prose-wrap <always|never|preserve>	proseWrap: "<always|never|preserve>"

HTML-känslighet för blanktecken

Först tillgänglig i v1.15.0. Först tillgänglig för Handlebars i 2.3.0

Ange global känslighet för blanktecken i HTML, Vue, Angular och Handlebars. Se formatering känslig för blanktecken för mer information.

Giltiga alternativ:

• "css" - Respekterar standardvärdet för CSS-egenskapen display. För Handlebars behandlas samma som strict.

• "strict" - Blanktecken (eller frånvaro av) runt alla taggar anses vara signifikanta.

• "ignore" - Blanktecken (eller frånvaro av) runt alla taggar anses vara insignifikanta.

Default	CLI Override	API Override
"css"	--html-whitespace-sensitivity <css|strict|ignore>	htmlWhitespaceSensitivity: "<css|strict|ignore>"

Indrag för script- och style-taggar i Vue-filer

Först tillgänglig i v1.19.0

Huruvida koden inuti <script>- och <style>-taggar i Vue-filer ska indragas eller inte.

Giltiga alternativ:

• false - Indra inte script- och style-taggar i Vue-filer.

• true - Indra script- och style-taggar i Vue-filer.

Default	CLI Override	API Override
false	--vue-indent-script-and-style	vueIndentScriptAndStyle: <bool>

Radslut

Först tillgänglig i v1.15.0, standardvärde ändrat från auto till lf i v2.0.0

Av historiska skäl finns två vanliga typer av radslut i textfiler: \n (eller LF för Line Feed) och \r\n (eller CRLF för Carriage Return + Line Feed). Den förstnämnda är vanlig på Linux och macOS, medan den senare är vanlig på Windows. Wikipedia förklarar varför.

När personer från olika operativsystem samarbetar i ett projekt kan en delad git-depå lätt få blandade radslut. Windows-användare kan också av misstag ändra radslut från LF till CRLF i tidigare incheckade filer, vilket skapar stora git diff och försvårar historikgranskning (git blame).

Så här säkerställer du att din git-depå endast innehåller Linux-stil radslut i filer som formateras av Prettier:

1. Se till att Prettiers endOfLine-alternativ är satt till lf (standard sedan v2.0.0)

2. Konfigurera en pre-commit hook som kör Prettier

3. Kör Prettier i din CI-pipeline med --check flagga. Om du använder Travis CI, sätt autocrlf-alternativet till input i .travis.yml.

4. Lägg till * text=auto eol=lf i depåns .gitattributes-fil. Du kan behöva be Windows-användare att klona om din depå efter denna ändring för att säkerställa att git inte har konverterat LF till CRLF vid utcheckning.

Alla moderna textredigerare i alla operativsystem kan korrekt visa radslut med \n (LF). Äldre versioner av Notepad för Windows kan dock visa sådana rader hopklämda eftersom de endast hanterar \r\n (CRLF).

Giltiga alternativ:

• "lf" – Endast Line Feed (\n), vanligt på Linux/macOS och i git-depåer

• "crlf" - Carriage Return + Line Feed-tecken (\r\n), vanligt på Windows

• "cr" - Endast Carriage Return-tecken (\r), används mycket sällan

• "auto" - Behåll befintliga radslut (blandade värden inom en fil normaliseras genom att titta på vad som används efter första raden)

Default	CLI Override	API Override
"lf"	--end-of-line <lf|crlf|cr|auto>	endOfLine: "<lf|crlf|cr|auto>"

Om du sätter end_of_line i en .editorconfig-fil kommer detta att konfigurera Prettiers radslut, såvida det inte åsidosätts.

Inbäddad språkformatering

Först tillgänglig i v2.1.0

Styr om Prettier formaterar inbäddad kod inom citattecken i filen.

När Prettier identifierar fall där det ser ut som att du har placerat kod den kan formatera inom en sträng i en annan fil (t.ex. i en märkt mall i JavaScript med en tagg som heter html eller i kodblock i Markdown), kommer den som standard att försöka formatera den koden.

Ibland är detta beteende oönskat, särskilt när du kanske inte avsett att strängen skulle tolkas som kod. Det här alternativet låter dig växla mellan standardbeteendet (auto) och att helt inaktivera funktionen (off).

Giltiga alternativ:

• "auto" – Formatera inbäddad kod om Prettier automatiskt kan identifiera den.

• "off" - Formatera aldrig inbäddad kod automatiskt.

Default	CLI Override	API Override
"auto"	--embedded-language-formatting=<off|auto>	embeddedLanguageFormatting: "<off|auto>"

Enskilt attribut per rad

Först tillgänglig i v2.6.0

Tvinga fram enskilt attribut per rad i HTML, Vue och JSX.

Giltiga alternativ:

• false - Tvinga inte fram enskilt attribut per rad.

• true - Tvinga fram enskilt attribut per rad.

Default	CLI Override	API Override
false	--single-attribute-per-line	singleAttributePerLine: <bool>