Hold din kode ren med pænere

Kodeformatering virker som et trivielt emne, men det kan påvirke kvaliteten og rigtigheden af ​​din kode, hvordan den bliver versionskontrolleret, og hvordan du samarbejder med andre. Hvis du ikke vil sætte dig fast i detaljer om, hvor hver sidste afstivning går, kan du prøve at outsource problemet til open source-værktøj, Prettier.

Formatering af spørgsmål

Softwareudviklingsteam har spildt utallige timer gennem historien og diskuteret om maksimal linjelængde, eller på hvilken linje en bøjle skal gå. Uanset hvad personlig præference siger, er de fleste enige om mindst én ting: kodeformatering skal være ensartet på tværs af et projekt.

Prettier er et værktøj designet til at opnå dette. Giv den noget kode, og den giver den samme kode tilbage, formateret på en ensartet måde. Prettier har teksteditorintegration, et kommandolinjeværktøj og en online demo.

Taler det rigtige sprog

Først og fremmest vil du vide, om Prettier er kompatibelt med det sprog eller de sprog, du typisk arbejder med. Prettier er i øjeblikket fokuseret på et kernesæt af sprog, der hovedsagelig er dedikeret til front-end webudvikling, herunder:

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

Der er også åben understøttelse af yderligere sprog via plugins.

Prøv smukkere ved hjælp af online legeplads

Før du selv prøver at installere Prettier, kan du måske tjekke ud legepladsen. Ved hjælp af en webgrænseflade kan du indsætte nogle eksempler på kode og observere, hvordan Prettier transformerer den. Dette er en fantastisk måde at få et indtryk af, hvad værktøjet rent faktisk gør, men det kan også fungere som din primære metode til brug af Prettier, hvis dine krav er på den lettere side.

Som standard skal legepladsen se ud som to grundlæggende teksteditorpaneler, en til venstre for dit input, en til højre, der viser Prettiers output. Du ser oprindeligt en prøvekode, men du kan bare fjerne alt dette og indsætte i din egen.

Prøv for eksempel at indtaste følgende JavaScript:

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

Pænere skal gøre det til:

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

Bemærk som standard de ændringer, som Prettier foretager, inkluderer:

• Konvertering af enkeltciterede strenge til dobbeltciterede
• Tilføjelse af semikolon
• Konvertering af indrykninger i to mellemrum

Nederst til venstre er der en knap, der giver dig mulighed for at se muligheder. I det foregående eksempel kan du prøve at justere fanebredden ved at skifte mellem - enkelt tilbud flag under almindeligeeller skifte mellem - ingen semi flag under JavaScript.

Konfiguration af indstillinger

Prettier er selvbeskrevet som "opinionated", et bevidst designvalg, der betyder, at kontrol med detaljerne ofres for enkelhed og konsistens. Det er designet til dig at konfigurere og derefter glemme alt om snarere end at forblive optaget af alle de sidste formateringsdetaljer i din kode. (For et alternativ med meget mere detaljeret kontrol over hver sidste formateringsdetalje, prøv eslint.)

Forfatterne erkender imidlertid også, at nogle beslutninger har funktionel indvirkning ud over, hvordan koden ser ud. Nogle muligheder - herunder nogle til ældre formål - forbliver, så du skal i det mindste forstå, hvad de gør, selvom du bruger Prettier i standardtilstand.

Den bedste måde at styre på Smukkere muligheder er at gemme dem i en konfigurationsfil. Der er mange måder at organisere dette på, men start med at oprette en fil med navnet .prettierrc.json i dit lokale projektmappe. Det kan indeholde en hvilken som helst af de understøttede muligheder i et standard JSON-objekt, f.eks.

{
"tabWidth": 8
}

Den samme konfigurationsfil læses af Prettier, uanset om du kører den via kommandolinjen eller en understøttet teksteditor.

Brug af garn eller npm skal installationen være ligetil. Til garn:

$ garn global tilføjer pænere

Og for npm:

$ npm install - global pænere

Når du har installeret Prettier globalt, skal du kunne skrive:

$ pænere

Som standard får du en skærm med hjælpetekst, der bekræfter, at værktøjet er installeret og fungerer korrekt.

Rengøring af en fil

For at omformatere en fil skal du bruge en kommando svarende til:

$ smukkere - skriv filnavn.js

Dette overskriver den originale fil, hvilket ofte er den mest bekvemme tilgang. Alternativt vil du måske bare have pænere handling på hver fil i et projekt:

$ pænere - skriv.

Prettier kører på tværs af alle filer under den aktuelle mappe og formaterer alle dem, som den genkender.

Du kan også udskrive resultatet til standardoutput i stedet for at ændre den originale fil, som giver dig mulighed for at gemme output til en anden fil eller omdirigere det andetsteds:

$ smukkere test.js> test2.js

Kontrol af en fil

For at få Prettier til at rapportere om renhed af din kode uden at foretage ændringer, skal du bruge --kontrollere flag med enten et enkelt filnavn eller mange:

$ pænere - check.

Du får en outputlinje for hver fil, der ikke matcher det forventede format, i henhold til Prettiers konfiguration:

Kontrollerer formatering ...
[advar] .prettierrc
[advar] .prettierrc.json
[advar] Problemer med kodestil, der findes i ovenstående fil (er). Glemt at køre Prettier?

Kommandolinjevalg

Prettiers standardindstillinger er tilgængelige som kommandolinjemuligheder, hvis du har brug for dem. Her er et eksempel på, hvordan - enkelt tilbud flag påvirker output:

$ smukkere tmp.js
funktionseksempel () {
console.log ("hej, verden");
}
$ smukkere - enkelt citat tmp.js
funktionseksempel () {
console.log ('hej verden');
}

Få hjælp

Kommandolinjeværktøjet giver informativ hjælp til enhver mulighed via --Hjælp flag:

$ pænere - hjælp efterfølgende komma
--trailing-komma 
Udskriv efterfølgende kommaer, hvor det er muligt, når det er flere linjer.
Gyldige muligheder:
es5 Efterfølgende kommaer, hvor de er gyldige i ES5 (objekter, arrays osv.)
ingen Ingen efterfølgende kommaer.
alle efterfølgende kommaer, hvor det er muligt (inklusive funktionsargumenter).
Standard: es5

Brug af en teksteditor

Når du har installeret Prettier, kan du bruge det i en række forskellige scenarier, afhængigt af hvilket værktøjssæt du allerede bruger. Chancerne er, at du bruger en teksteditor. Prettier har bindinger til de fleste af de populære, så her kan du få tre af dem oprettet:

Sublim tekst

JsPrettier er et Sublime Text-plugin, der gør Prettier tilgængelig i editoren. Selvom der er flere forskellige måder at installere JsPrettier på, anbefaler vi at bruge metoden Package Control. Du bliver nødt til at have installeret Prettier allerede, åbn derefter Sublime Text's Command Palette og vælg "Package Control: Install Package":

Søg derefter efter “jsprettier”, og klik for at installere det:

Når JsPrettier er installeret, kan du højreklikke på en hvilken som helst åben fil for at formatere den. Du kan også indstille værdien på auto_format_on_save til sand i JsPrettiers indstillinger, som vil resultere i, at JsPrettier automatisk rydder op i kompatible filer, når du gemmer dem i Sublime Text.

Atom

Installation til Atom ligner meget Sublime Text: Brug blot editorens indbyggede pakkehåndtering til at installere smukkere-atom:

Når det er installeret, er brugen velkendt: en genvej eller et menupunkt giver dig mulighed for at formatere en fil efter behov, mens en Atom-indstilling lader dig automatisk køre Prettier, hver gang en fil gemmes.

Vim

Vim er en meget kraftig, kommandolinjebaseret editor, der ikke er egnet til begyndere. At få pænere til at arbejde med vim er passende kompliceret, men det er stadig kun et par trin:

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

Git er sandsynligvis den nemmeste måde at downloade de nødvendige filer på, men ethvert middel til at blive vim-smukkere i den startmappe skulle gøre jobbet.

Når Prettier er installeret, kører den automatisk, når en fil er gemt i vi. Det kan også køres manuelt når som helst via Pænere kommando:

Hvilket skal resultere i en renset fil:

Integrer smukkere i dit projekt

Brug af en kodeformater som Prettier kan hjælpe med at opretholde en kodebase, der er lettere at læse. Det kan også hjælpe med at undgå debatter om, hvilken bestemt stil der skal bruges ved kodning - bare outsource disse beslutninger til Prettier!

Endelig kan en git hook oprettes for at sikre, at koden altid bliver renset, når den er forpligtet til dit projekts lager. Individuelle udviklere kan frit formatere deres kode, uanset hvad de ønsker, men den centrale kopi vil altid være ren og konsistent.

nano vs. Vim: De bedste terminalteksteditorer sammenlignet

Leder du efter en terminal teksteditor til Linux? Det vigtigste valg er mellem Vim og nano! Sådan sammenligner de dem.

Om forfatteren