Hoppa till huvudinnehållet

Installera

Inofficiell Beta-översättning

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

Installera först Prettier lokalt:

npm install --save-dev --save-exact prettier

Skapa sedan en tom konfigurationsfil för att låta redigerare och andra verktyg veta att du använder Prettier:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Skapa sedan en .prettierignore-fil för att låta Prettier CLI och redigerare veta vilka filer som inte ska formateras. Här är ett exempel:

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
tips

Prettier följer regler angivna i .gitignore om den finns i samma katalog som körs från. Du kan också basera din .prettierignore på .eslintignore (om du har en sådan).

Ytterligare tips

Om ditt projekt inte är redo att formatera, till exempel HTML-filer än, lägg till *.html.

Formatera nu alla filer med Prettier:

npx prettier . --write
info

What is that npx thing? npx ships with npm and lets you run locally installed tools. We’ll leave off the npx part for brevity throughout the rest of this file!

varning

If you forget to install Prettier first, npx will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your package.json. And it’s faster, too.

prettier --write . är utmärkt för att formatera allt, men för ett stort projekt kan det ta lite tid. Du kan köra prettier --write app/ för att formatera en viss katalog, eller prettier --write app/components/Button.js för en specifik fil. Eller använd en glob som prettier --write "app/**/*.test.js" för att formatera alla tester i en katalog (se fast-glob för glob-syntax som stöds).

Om du har en CI-installation, kör följande som del av den för att säkerställa att alla använder Prettier. Detta undviker sammanfogningskonflikter och andra samarbetsproblem!

npx prettier . --check

--check fungerar som --write, men kontrollerar bara om filer redan är formaterade istället för att skriva över dem. prettier --write och prettier --check är de vanligaste sätten att köra Prettier.

Konfigurera din editor​

Formatering från kommandoraden är ett bra sätt att komma igång, men du får ut mesta möjliga av Prettier genom att köra det från din editor, antingen via kortkommandon eller automatiskt när du sparar en fil. När en rad blivit så lång under kodning att den inte får plats på skärmen - tryck bara på en knapp och se den magiskt brytas i flera rader! Eller när du klistrar in kod och indrag blir kaos, låt Prettier fixa det utan att lämna din editor.

Se Editor Integration för hur du konfigurerar din editor. Om din editor inte stöder Prettier kan du istället köra Prettier med en filövervakare.

notera

Hoppa inte över den vanliga lokala installationen! Editor-tillägg kommer att använda din lokala Prettier-version, vilket säkerställer att du använder rätt version i varje projekt. (Du vill inte att din editor av misstag orsakar massa ändringar för att den använder en nyare Prettier-version än ditt projekt!)

Att kunna köra Prettier från kommandoraden är dessutom en bra reservlösning och nödvändigt för CI-installationer.

ESLint (och andra linters)​

Om du använder ESLint, installera eslint-config-prettier för att få ESLint och Prettier att samarbeta smidigt. Det stänger av alla ESLint-regler som är onödiga eller kan konfliktera med Prettier. Det finns en liknande konfiguration för Stylelint: stylelint-config-prettier

(Se Prettier vs. Linters för att lära dig mer om formatering vs lintning, Integrating with Linters för mer djupgående information om att konfigurera dina linters, och Related projects för fler integrationsmöjligheter om det behövs.)

Git-hooks​

Förutom att köra Prettier från kommandoraden (prettier --write), kontrollera formatering i CI, och köra Prettier från din editor, gillar många att köra Prettier som ett pre-commit hook också. Detta säkerställer att alla dina commits är formaterade utan att behöva vänta på att din CI-build ska slutföras.

Till exempel kan du göra följande för att köra Prettier före varje commit:

  1. Installera husky och lint-staged:
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
  1. Lägg till följande i din package.json:
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
notera

Om du använder ESLint, se till att lint-staged kör det före Prettier, inte efter.

Se Pre-commit Hook för mer information.

Sammanfattning​

Sammanfattningsvis har vi lärt oss att:

  • Installera en exakt version av Prettier lokalt i ditt projekt. Det säkerställer att alla i projektet använder exakt samma Prettier-version. Även en patch-uppdatering av Prettier kan ge lite annorlunda formatering, så du vill inte att olika teammedlemmar ska använda olika versioner och formatera om varandras ändringar fram och tillbaka.

  • Lägg till en .prettierrc för att låta din editor veta att du använder Prettier.

  • Lägg till en .prettierignore för att låta din editor veta vilka filer som inte ska ändras, samt för att kunna köra prettier --write . för att formatera hela projektet (utan att förstöra filer du inte vill ändra, eller fastna på genererade filer).

  • Kör prettier --check . i CI för att säkerställa att ditt projekt förblir formaterat.

  • Kör Prettier från din editor för bästa upplevelse.

  • Använd eslint-config-prettier så att Prettier och ESLint fungerar bra tillsammans.

  • Konfigurera ett pre-commit hook för att säkerställa att varje commit är formaterad.