Håll din kod ren med vackrare

Kodformatering verkar som ett trivialt ämne, men det kan påverka kvaliteten och riktigheten på din kod, hur den blir versionskontrollerad och hur du samarbetar med andra. Om du inte vill fastna i detaljer om vart varje sista klammer går, försök dock lägga ut problemet på verktyget öppen källkod, Prettier.

Formatera frågor

Mjukvaruutvecklingsteam har slösat bort otaliga timmar genom historien och argumenterat om maximal linjelängd eller på vilken linje en stag ska gå. Oavsett vad personliga preferenser säger, är de flesta överens om minst en sak: kodformatering ska vara konsekvent i ett projekt.

Prettier är ett verktyg som är utformat för att uppnå detta. Ge den lite kod så kommer den tillbaka samma kod, formaterad på ett konsekvent sätt. Prettier har textredigeringsintegration, ett kommandoradsverktyg och en online-demo.

Talar rätt språk

Först och främst vill du veta om Prettier är kompatibelt med det språk eller de språk som du vanligtvis arbetar med. Prettier fokuserar för närvarande på en kärnauppsättning av språk som främst ägnas åt front-end webbutveckling, inklusive:

• JavaScript
• HTML
• CSS
• Sass
• Prissänkning
• YAML

Det finns också öppet stöd för ytterligare språk via plugins.

Försök vackrare med online-lekplatsen

Innan du ens försöker installera Prettier kanske du vill kolla in det lekplatsen. Med hjälp av ett webbgränssnitt kan du klistra in någon exempelkod och observera hur Prettier kommer att omvandla den. Detta är ett utmärkt sätt att få ett intryck av vad verktyget egentligen gör, men det kan också fungera som din primära metod för att använda Prettier, om dina krav är på den lättare sidan.

Som standard ska lekplatsen se ut som två grundläggande textredigeringspaneler, en till vänster för din inmatning, en till höger som visar Prettiers utdata. Du kommer att se någon exempelkod från början, men du kan helt enkelt ta bort allt detta och klistra in det själv.

Prova till exempel att ange följande JavaScript:

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

Snyggare bör göra det till:

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

Observera som standard de ändringar som Prettier gör inkluderar:

• Konvertera enkelciterade strängar till dubbelciterade strängar
• Lägga till halvkolon
• Omvandla indrag till två mellanslag

Längst ner till vänster finns en knapp som låter dig visa alternativ. I föregående exempel kan du försöka justera flikbredden och växla mellan - enstaka offert flagga under Allmänning, eller växla mellan - ingen semi flagga under JavaScript.

Konfigurera alternativ

Prettier beskrivs själv som ”opinionated”, ett medvetet designval som innebär att kontroll över detaljerna offras för enkelhet och konsistens. Det är utformat för dig att ställa in, sedan glömma bort, snarare än att vara upptagen av alla sista formateringsdetaljer i din kod. (För ett alternativ med mycket mer detaljerad kontroll över varje sista formateringsdetalj, försök eslint.)

Emellertid erkänner författarna också att vissa beslut har funktionell inverkan utöver hur koden ser ut. Vissa alternativ - inklusive några för äldre ändamål - finns kvar, så du bör åtminstone förstå vad de gör, även om du använder Prettier i standardläget.

Det bästa sättet att hantera Snyggare alternativ är att spara dem i en konfigurationsfil. Det finns många sätt att organisera detta, men börja med att skapa en fil med namnet .prettierrc.json i din lokala projektkatalog. Den kan innehålla vilket som helst av de alternativ som stöds i ett standard JSON-objekt, t.ex.

{
"tabWidth": 8
}

Samma konfigurationsfil kommer att läsas av Prettier oavsett om du kör den via kommandoraden eller en textredigerare som stöds.

Med garn eller npm bör installationen vara enkel. För garn:

$ garn globalt lägga vackrare

Och för npm:

$ npm install - global vackrare

När du har installerat Prettier globalt bör du kunna skriva:

snyggare

Som standard får du en skärm med hjälptext som bekräftar att verktyget är installerat och fungerar korrekt.

Rengöring av en fil

För att formatera en fil, använd ett kommando som liknar:

$ snyggare - skriv filnamn.js

Detta skriver över originalfilen, vilket ofta är det mest praktiska tillvägagångssättet. Alternativt kanske du vill ha snyggare att agera på alla filer i ett projekt:

$ snyggare - skriv.

Prettier kör över alla filer under den aktuella katalogen och formaterar alla de som den känner igen.

Du kan också skriva ut resultatet till standardutdata istället för att ändra originalfilen, vilket gör att du kan spara utdata till en annan fil eller omdirigera den någon annanstans:

$ snyggare test.js> test2.js

Kontrollera en fil

För att få Prettier att rapportera om din kodes renhet utan att göra några ändringar, använd --kolla upp flagga med antingen ett enda filnamn eller många:

$ snyggare --kontroll.

Du får en utdatarad för varje fil som inte matchar det förväntade formatet, enligt Prettiers konfiguration:

Kontrollerar formatering ...
[varna] .prettierrc
[varna] .prettierrc.json
[varna] Problem med kodstilen som finns i ovanstående fil (er). Har du glömt att köra Prettier?

Kommandoradsalternativ

Prettiers standardalternativ finns som kommandoradsalternativ om du behöver dem. Här är ett exempel på hur - enstaka offert flagga påverkar produktionen:

$ snyggare tmp.js
funktionsexempel () {
console.log ("hej, värld");
}
$ snyggare - singel-offert tmp.js
funktionsexempel () {
console.log ('hej, värld');
}

Få hjälp

Kommandoradsverktyget ger informativ hjälp om valfritt alternativ via --hjälp flagga:

$ snyggare --hjälp efterkomma
--trailing-komma 
Skriv ut efterföljande kommatecken när det är möjligt när det är flera linjer.
Giltiga alternativ:
es5 Efterkommor är giltiga i ES5 (objekt, matriser, etc.)
ingen Inga efterföljande komma.
alla efterföljande komma där det är möjligt (inklusive funktionsargument).
Standard: es5

Använda en textredigerare

När du har installerat Prettier kan du använda den i en mängd olika scenarier, beroende på vilken verktygssats du redan använder. Chansen är stor att du använder en textredigerare. Prettier har bindningar för de flesta populära, så här får du tre av dem att ställa in:

Sublim text

JsPrettier är ett Sublime Text-plugin som gör Prettier tillgängligt i redigeraren. Även om det finns flera olika sätt att installera JsPrettier, rekommenderar vi att du använder metoden Package Control. Du måste ha installerat Prettier redan, öppna sedan Sublime Text's Command Palette och välj "Package Control: Install Package":

Sök sedan efter “jsprettier” och klicka för att installera det:

När JsPrettier har installerats kan du högerklicka i en öppen fil för att formatera den. Du kan också ställa in värdet på auto_format_on_save till Sann i JsPrettiers inställningar vilket kommer att resultera i att JsPrettier automatiskt rensar upp alla kompatibla filer när du sparar dem i Sublime Text.

Atom

Installationen för Atom liknar väldigt sublim text: använd helt enkelt redaktörens inbyggda pakethanterare för att installera vackrare-atom:

När installationen är klar är användningen bekant: med en genväg eller ett menyalternativ kan du formatera en fil på begäran, medan en Atom-inställning låter dig automatiskt köra snyggare när en fil sparas.

Vim

Vim är en mycket kraftfull, kommandoradsbaserad redigerare som inte är lämplig för nybörjare. Att få vackrare att arbeta med vim är lämpligt komplicerat, men det är fortfarande bara några steg:

mkdir -p ~ / .vim / pack / plugins / start
git klon https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-sötare

Git är förmodligen det enklaste sättet att ladda ner nödvändiga filer, men något sätt att bli vim-vackrare i den startkatalogen ska göra jobbet.

Efter installationen kommer Prettier att köras automatiskt när en fil sparas i vi. Det kan också köras manuellt när som helst via Sötare kommando:

Vilket bör resultera i en rensad fil:

Integrera vackrare i ditt projekt

Att använda en kodformatör som Prettier kan hjälpa till att upprätthålla en kodbas som är lättare att läsa. Det kan också hjälpa till att kringgå debatter om vilken stil som ska användas vid kodning - lägg bara ut dessa beslut till Prettier!

Slutligen kan en git krok ställas in för att säkerställa att koden alltid rensas när den är förpliktad till projektets förvar. Enskilda utvecklare kan ha frihet att formatera sin kod hur de än vill, men den centrala kopian kommer alltid att vara ren och konsekvent.

nano vs. Vim: De bästa terminaltextredigerarna, jämfört

Letar du efter en terminaltextredigerare för Linux? Huvudvalet är mellan Vim och nano! Så här jämför de.

Om författaren