Hvordan sette opp penere i Visual Studio Code

Det er viktig å skrive ren og lesbar kode, enten du jobber alene eller sammen med et team av utviklere. Mens mange faktorer bidrar til kodelesbarhet, er en av de viktigste konsistent kodeformatering.

Men her er problemet: Manuell kodeformatering kan være en absolutt smerte og svært utsatt for feil. Verktøy som Prettier gjør formatering av HTML, CSS, JavaScript og andre språk så mye enklere. Oppdag hvordan du installerer og bruker Prettier-utvidelsen for kodeformatering, samt noen avanserte konfigurasjonsinnstillinger.

Installerer Prettier

Før du fortsetter, sørg for at du har Node.js installert på datamaskinen. Du kan installere den nyeste versjonen fra offisiell Node.js-nedlastingsside. Det følger med nodepakkebehandleren (npm) innebygd, som du vil bruke til å administrere Node.js-pakkene dine.

Etter å ha bekreftet at Node.js er installert lokalt, start med å opprette en tom katalog for prosjektet ditt. Du kan navngi katalogen

penere-demo.

Deretter, cd inn i den katalogen ved hjelp av en kommandolinje, og kjør deretter følgende kommando for å initialisere et Node.js-prosjekt:

npm init -y

Denne kommandoen genererer en package.json-fil som inneholder standardinnstillingene.

For å installere Prettier-utvidelsen, kjør denne terminalkommandoen:

npm i --save-dev penere

De --save-dev flagget installeres penere som en utviklingsavhengighet, noe som betyr at det bare brukes under utvikling.

Nå som du har det installert, kan du begynne å utforske hvordan Prettier fungerer ved å bruke det på kommandolinjen.

Bruke Prettier via kommandolinjen

Start med å lage en script.js fil og fyll den med følgende kode:

funksjonsum(a, b) { komme tilbake a + b }
konst bruker = { Navn: "Kyle", alder: 27,
 isProgrammer: ekte,
 longKey: "Verdi",
 flere data: 3
}

For å formatere koden i denne script.js-filen via kommandolinjen, kjør følgende kommando:

npx penere --skriv script.js

Kommandoen formaterer JavaScript-koden i script.js til Prettiers standardstandard. Dette blir resultatet:

funksjonsum(a, b) {
komme tilbake a + b;
}
konst bruker = {
 Navn: "Kyle",
 alder: 27,
 isProgrammer: ekte,
 longKey: "Verdi",
 flere data: 3,
};

Du kan også formatere HTML-markering fra kommandolinjen. Opprett en index.html fil i samme katalog som script.js. Deretter limer du inn følgende dårlig formaterte HTML i filen:

"" alt=""klasse="vær-ikon stort">

klasse="currentHeaderTemp"><span>21span></div>
</div>
 </header>

For å formatere HTML, kjør denne kommandoen:

npx penere --skriv index.html

Denne kommandoen formaterer HTML-en til Prettiers standardstandard, noe som resulterer i følgende kode:

<Overskrift>
<div>
<imgsrc=""alt=""klasse="vær-ikon stort" />
<divklasse="currentHeaderTemp"><span>21span>div>
div>
Overskrift>

Du kan også bruke --Sjekk flagg for å sjekke om koden samsvarer med Prettiers standarder. Følgende eksempel kontrollerer script.js:

npx penere --sjekk script.js

Dette er nyttig hvis du vil ha en pre-commit-hook for å sikre at folk bruker Prettier og formaterer filene før de skyver dem til Git. Dette fungerer bra når bidra til åpen kildekode.

Integrering av penere i Visual Studio Code

Å bruke Prettier via kommandolinjen kan være en smerte. I stedet for å kjøre en kommando manuelt hver gang du vil formatere kode, kan du sette den opp til å formatere automatisk når du endrer en fil. Heldigvis har Visual Studio Code (VS Code) en innebygd måte å gjøre dette for deg.

Gå til Utvidelser fanen i VS-kode og søk etter Penere. Klikk på Penere - Kodeformater, installer den og aktiver den.

Gå inn i VS-kodeinnstillingene dine ved å navigere til Fil > Innstillinger > Innstillinger. Søk etter i søkefeltet Penere. Du finner massevis av alternativer for å hjelpe deg med å konfigurere Prettier-utvidelsen.

Vanligvis kan du klare deg med standardinnstillingene. Det eneste du kan vurdere å endre er semikolonene (du kan fjerne dem hvis du vil). Ellers er alt satt til standard, men du kan endre det slik du vil.

Sørg for å aktivere formatonsave alternativet slik at koden i hver fil automatisk formateres når du lagrer den filen. For å aktivere det, bare søk etter formatonsave og kryss av i boksen.

Hvis du ikke bruker VSCode eller utvidelsen ikke fungerer av en eller annen grunn, kan du last ned onchange-biblioteket. Dette kjører kommandoen for å formatere koden hver gang du endrer filen.

Hvordan ignorere filer når du formaterer med Prettier

Hvis du skulle løpe penere --skrive kommandoen på hele mappen din, ville den gå gjennom hver eneste av nodemodulene dine. Men du bør ikke kaste bort tid på å formatere andres kode!

For å omgå dette problemet, lag en .prettierignore fil og inkludere begrepet node_modules i filen. Hvis du skulle kjøre --skrive kommandoen på hele mappen, vil den omformatere alle filene bortsett fra de i node_modules mappe.

Du kan også ignorere filer med en bestemt utvidelse. For eksempel, hvis du vil ignorere alle HTML-filer, legg til *.html til .prettierignore.

Hvordan konfigurere penere

Du kan konfigurere hvordan du vil at Prettier skal fungere med forskjellige alternativer. En måte er å legge til en penere nøkkelen til din package.json fil. Verdien vil være et objekt som inneholder alle konfigurasjonsalternativene:

{
 ...
"skript": {
"test": "echo \"Feil: ingen test spesifisert\" && avslutt 1"
 },
 penere: {
// alternativer gå her
 }
}

Det andre alternativet (som vi anbefaler) er å lage en .pentierrc fil. Denne filen lar deg gjøre alle slags tilpasninger.

La oss si at du ikke liker semikolon. Du kan fjerne dem ved å plassere følgende objekt i filen:

{
"semi": ekte,
"overstyrer": [
 {
"filer": ".ts",
"alternativer": {
"semi": falsk
 }
 }
 ]
}

De overstyrer egenskap lar deg definere egendefinerte overstyringer for bestemte filer eller filutvidelser. I dette tilfellet sier vi at alle filer som slutter på .ts (det vil si typescript-filer) skal ikke ha noen semikolon.

Bruke Prettier With ESLint

ESLint er et lintingverktøy for å oppdage feil i JavaScript-kode samt formatere den. Hvis du bruker Prettier, vil du sannsynligvis ikke bruke ESLint til formatering også. For å bruke dem sammen, må du installere og konfigurere eslint-config-pennere. Dette verktøyet slår av alle ESLint-konfigurasjonene for ting som Prettier allerede håndterer.

Først må du installere det:

npm i --save-dev eslint-config-prettier

Deretter legger du den til utvidelseslisten i .eslintrc fil (sørg for at det er den siste tingen på listen):

{
"strekker": [
"noen-annen-konfigurasjon-du-bruker",
"penere"
 ],
"regler": {
"innrykk": "feil"
 }
}

Nå vil ESLint deaktivere alle regler som Prettier allerede tar seg av for å forhindre konflikter.

Rydd opp i kodebasen din med penere og ESLint

Prettier er et ideelt verktøy for å rydde opp i koden og håndheve konsekvent formatering i et prosjekt. Å sette den til å fungere med VS-kode betyr at den alltid er innen rekkevidde.

ESLint er et må-ha JavaScript-verktøy som går hånd i hånd med Prettier. Det gir massevis av funksjoner og tilpasningsalternativer som går utover grunnleggende formatering. Lær hvordan du bruker ESLint med JavaScript hvis du ønsker å bli en mer produktiv utvikler.