Hold koden ren med vakrere

Kodeformatering virker som et trivielt emne, men det er noe som kan påvirke kvaliteten og korrektheten til koden din, hvordan den blir versjonskontrollert og hvordan du samarbeider med andre. Hvis du ikke ønsker å sette deg fast i detaljer om hvor hver siste avstivning går, kan du prøve å outsource problemet til åpen kildekodeverktøy, Prettier.

Formatering av saker

Programvareutviklingsteam har kastet bort utallige timer gjennom historien og kranglet om maksimal linjelengde eller på hvilken linje en brace skal gå. Uansett hva personlig preferanse sier, er de fleste enige om minst én ting: kodeformatering skal være konsistent på tvers av et prosjekt.

Prettier er et verktøy designet for å oppnå dette. Gi den litt kode, og den vil gi tilbake den samme koden, formatert på en jevn måte. Prettier har teksteditorintegrasjon, et kommandolinjeverktøy og en online demo.

Snakker riktig språk

Først og fremst vil du vite om Prettier er kompatibelt med språket eller språkene du vanligvis jobber med. Prettier er for tiden fokusert på et kjernesett av språk, hovedsakelig viet til front-end webutvikling, inkludert:

• JavaScript
• HTML
• CSS
• Sass
• Markdown
• YAML

Det er også åpen støtte for flere språk via plugins.

Prøv vakrere ved hjelp av online lekeplass

Før du prøver å installere Prettier, kan det være lurt å sjekke ut det lekeplassen. Ved hjelp av et webgrensesnitt kan du lime inn noen eksempler på kode og observere hvordan Prettier vil forvandle den. Dette er en fin måte å få et inntrykk av hva verktøyet faktisk gjør, men det kan også fungere som din primære metode for å bruke Prettier, hvis dine krav er på den lettere siden.

Som standard skal lekeplassen se ut som to grunnleggende tekstredigeringspaneler, en til venstre for innspill, en til høyre som viser Prettiers utdata. Du ser noen eksempler på kode i utgangspunktet, men du kan bare fjerne alt dette og lime inn din egen.

Prøv for eksempel å skrive inn følgende JavaScript:

(funksjon ()
{
window.alert ('ok')
}())

Vakrere bør gjøre det om til:

(funksjon () {
window.alert ("ok");
})();

Legg merke til at endringene som Prettier gjør som standard inkluderer:

• Konvertering av enkelt siterte strenger til dobbelt siterte strenger
• Legge til semikolon
• Konvertering av innrykk til to mellomrom

Nederst til venstre er det en knapp som lar deg se alternativer. I det forrige eksemplet, prøv å justere fanebredden og bytte mellom - enkelt-sitat flagg under Felles, eller veksle mellom -no-semi flagg under JavaScript.

Konfigurere alternativer

Prettier er selvbeskrevet som “opinionated”, et bevisst designvalg som betyr at kontroll over detaljene ofres for enkelhet og konsistens. Den er designet for deg å sette opp, og deretter glemme det, i stedet for å være opptatt av alle siste formateringsdetaljer i koden din. (For et alternativ med mye mer detaljert kontroll over hver siste formateringsdetalj, prøv eslint.)

Forfatterne erkjenner imidlertid også at noen beslutninger har funksjonell innvirkning utover akkurat hvordan koden ser ut. Noen alternativer - inkludert noen for eldre formål - gjenstår, så du bør i det minste forstå hva de gjør, selv om du bruker Prettier i standardtilstand.

Den beste måten å administrere på Vakrere alternativer er å lagre dem i en konfigurasjonsfil. Det er mange måter å organisere dette på, men start med å opprette en fil med navnet .prettierrc.json i din lokale prosjektkatalog. Den kan inneholde hvilket som helst av de støttede alternativene i et standard JSON-objekt, f.eks.

{
"tabWidth": 8
}

Den samme konfigurasjonsfilen vil bli lest av Prettier, enten du kjører den via kommandolinjen eller en tekstredigerer som støttes.

Ved å bruke garn eller npm, bør installasjonen være grei. For garn:

$ garn global legger til penere

Og for npm:

$ npm install - global vakrere

Når du har installert Prettier globalt, bør du kunne skrive:

$ penere

Som standard får du et skjermbilde med hjelpetekst som bekrefter at verktøyet er installert og fungerer som det skal.

Rengjøring av en fil

For å formatere en fil, bruk en kommando som ligner på:

$ vakrere - skriv filnavn.js

Dette vil overskrive originalfilen, som ofte er den mest praktiske tilnærmingen. Alternativt kan det hende du bare vil ha penere handlinger på hver fil i et prosjekt:

$ penere - skriv.

Prettier vil kjøre på tvers av alle filer under den nåværende katalogen, og formatere alle de som den kjenner igjen.

Du kan også skrive ut resultatet til standard utdata, i stedet for å endre originalfilen, som lar deg lagre utdataene til en annen fil, eller omdirigere den andre steder:

$ vakrere test.js> test2.js

Kontrollere en fil

For å få Prettier til å rapportere om rensligheten til koden din uten å gjøre noen endringer, bruk --Sjekk flagg med enten et enkelt filnavn eller mange:

$ vakrere - sjekk.

Du får en utgangslinje for hver fil som ikke samsvarer med det forventede formatet, i henhold til Prettiers konfigurasjon:

Sjekker formatering ...
[advare] .prettierrc
[advare] .prettierrc.json
[advar] Problemer med kodestil som finnes i filene ovenfor. Har du glemt å kjøre Prettier?

Kommandolinjealternativer

Prettiers standardalternativer er tilgjengelige som kommandolinjealternativer, hvis du trenger dem. Her er et eksempel på hvordan - enkelt-sitat flagg påvirker utdata:

$ vakrere tmp.js
funksjonseksempel () {
console.log ("hei, verden");
}
$ penere - single-quote tmp.js
funksjonseksempel () {
console.log ('hei, verden');
}

Får hjelp

Kommandolinjeverktøyet gir informativ hjelp om ethvert alternativ via --hjelp flagg:

$ vakrere - hjelp etterfølgende komma
--trailing-komma 
Skriv ut etterfølgende komma når det er mulig når du bruker flere linjer.
Gyldige alternativer:
es5 Etterfølgende komma der det er gyldig i ES5 (objekter, matriser, etc.)
ingen Ingen etterfølgende kommaer.
alle etterfølgende kommaer der det er mulig (inkludert funksjonsargumenter).
Standard: es5

Ved hjelp av en tekstredigerer

Når du har installert Prettier, kan du bruke den i en rekke scenarier, avhengig av hvilket verktøysett du allerede bruker. Sjansen er stor for at du bruker en tekstredigerer. Prettier har bindinger for de fleste av de populære, så her får du hvordan tre av dem blir satt opp:

Sublim tekst

JsPrettier er et Sublime Text-plugin som gjør Prettier tilgjengelig i redigeringsprogrammet. Selv om det er flere forskjellige måter å installere JsPrettier på, anbefaler vi å bruke Package Control-metoden. Du må ha installert Prettier allerede, åpne deretter Sublime Text's Command Palette og velg "Package Control: Install Package":

Søk deretter etter “jsprettier” og klikk for å installere det:

Når JsPrettier er installert, kan du høyreklikke i en hvilken som helst åpen fil for å formatere den. Du kan også angi verdien på auto_format_on_save til ekte i JsPrettiers innstillinger som vil føre til at JsPrettier automatisk rydder opp i kompatible filer når du lagrer dem i Sublime Text.

Atom

Installasjonen for Atom er veldig lik Sublime Text: bruk redaktørens innebygde pakkebehandling for å installere vakrere atom:

Når det er installert, er bruken kjent: en snarvei eller et menyelement lar deg formatere en fil på forespørsel, mens Atom-innstillingen lar deg automatisk kjøre Prettier når en fil lagres.

Vim

Vim er en veldig kraftig, kommandolinjebasert redaktør som ikke passer for nybegynnere. Å få vakrere til å jobbe med vim er passende komplisert, men det er fortsatt bare noen få trinn:

mkdir -p ~ / .vim / pakke / plugins / start
git klon https://github.com/prettier/vim-prettier \
~ / .vim / pakke / plugins / start / vim-vakrere

Git er sannsynligvis den enkleste måten å laste ned de nødvendige filene, men noen måte å bli vim-penere inn i startkatalogen skal gjøre jobben.

Når Prettier er installert, kjører den automatisk når en fil er lagret i vi. Den kan også kjøres manuelt når som helst via Vakrere kommando:

Som skal resultere i en renset fil:

Integrer vakrere i prosjektet ditt

Ved å bruke en kodeformatering som Prettier kan du opprettholde en kodebase som er lettere å lese. Det kan også bidra til å gå bort fra debatter om hvilken bestemt stil du skal bruke når du koder - bare outsource disse beslutningene til Prettier!

Til slutt kan en git krok settes opp for å sikre at koden alltid blir ryddet opp når den er forpliktet til prosjektets depot. Enkeltutviklere kan ha fri til å formatere koden sin, men de vil alltid være rene og konsistente.

nano vs. Vim: De beste terminaltekstredigererne, sammenlignet

Leter du etter en terminal teksteditor for Linux? Hovedvalget er mellom Vim og nano! Slik sammenligner de.

Om forfatteren