Houd uw code schoon met Prettier

Code-opmaak lijkt een triviaal onderwerp, maar het is iets dat van invloed kan zijn op de kwaliteit en correctheid van uw code, hoe deze versiebeheer krijgt en hoe u samenwerkt met anderen. Als je echter niet wilt verzanden in details over waar elke laatste beugel naartoe gaat, probeer het probleem dan uit te besteden aan de open-source tool, Prettier.

Formatteren is belangrijk

Softwareontwikkelingsteams hebben in de loop van de geschiedenis talloze uren verspild met discussiëren over de maximale lijnlengte of op welke lijn een beugel moet gaan. Wat de persoonlijke voorkeur ook mag zijn, de meeste mensen zijn het over ten minste één ding eens: de opmaak van code moet consistent zijn binnen een project.

Prettier is een tool die is ontworpen om dit te bereiken. Geef het wat code en het zal dezelfde code teruggeven, op een consistente manier opgemaakt. Prettier heeft integratie van teksteditor, een opdrachtregelprogramma en een online demo.

De juiste taal spreken

Allereerst wil je weten of Prettier compatibel is met de taal of talen waarmee je doorgaans werkt. Prettier is momenteel gefocust op een aantal kerntalen die voornamelijk zijn gewijd aan front-end webontwikkeling, waaronder:

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

Er is ook open ondersteuning voor extra talen via plug-ins.

Probeer het mooier uit met de online speeltuin

Voordat je Prettier zelfs probeert te installeren, wil je misschien eerst even kijken de speeltuin. Met behulp van een webinterface kunt u een voorbeeldcode plakken en zien hoe Prettier deze zal transformeren. Dit is een geweldige manier om een ​​indruk te krijgen van wat de tool werkelijk doet, maar het kan ook fungeren als uw primaire methode om Prettier te gebruiken, als uw vereisten aan de lichtere kant zijn.

Standaard zou de speelplaats eruit moeten zien als twee basisteksteditorpanelen, een aan de linkerkant voor uw invoer en een aan de rechterkant met de uitvoer van Prettier. In eerste instantie ziet u enkele voorbeeldcode, maar u kunt deze allemaal verwijderen en zelf plakken.

Probeer bijvoorbeeld het volgende JavaScript in te voeren:

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

Prettier zou het moeten veranderen in:

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

Merk standaard op dat de wijzigingen die Prettier aanbrengt, onder meer zijn:

• Tekenreeksen met enkele aanhalingstekens omzetten in tekenreeksen met dubbele aanhalingstekens
• Puntkomma's toevoegen
• Inspringingen omzetten in twee spaties

Linksonder zit een knop waarmee je opties kunt bekijken. Probeer in het vorige voorbeeld de breedte van de tab aan te passen door de --alleenstaande citaat vlag onder Gemeenschappelijk, of het omschakelen van de --geen-half vlag onder JavaScript.

Opties configureren

Prettier wordt zelf omschreven als "eigenwijs", een bewuste ontwerpkeuze die inhoudt dat controle over de details wordt opgeofferd voor eenvoud en consistentie. Het is zo ontworpen dat u het kunt instellen en vervolgens kunt vergeten, in plaats van u bezig te houden met elk laatste opmaakdetail van uw code. (Probeer voor een alternatief met veel fijnere controle over elk laatste opmaakdetail eslint.)

De auteurs erkennen echter ook dat sommige beslissingen een functionele impact hebben die verder gaat dan alleen hoe de code eruitziet. Sommige opties, waaronder enkele voor legacy-doeleinden, blijven bestaan, dus u moet op zijn minst begrijpen wat ze doen, zelfs als u Prettier in de standaardstatus gebruikt.

De beste manier van managen Mooier opties is om ze op te slaan in een configuratiebestand. Er zijn veel manieren om dit te organiseren, maar begin met het maken van een bestand met de naam .prettierrc.json in uw lokale projectdirectory. Het kan elk van de ondersteunde opties in een standaard JSON-object bevatten, bijv.

{
"tabWidth": 8
}

Hetzelfde configuratiebestand wordt door Prettier gelezen, of u het nu via de opdrachtregel of een ondersteunde teksteditor uitvoert.

Als u garen of npm gebruikt, moet de installatie eenvoudig zijn. Voor garen:

$ garen wereldwijd mooier toevoegen

En voor npm:

$ npm install --global mooier

Zodra u Prettier wereldwijd heeft geïnstalleerd, zou u het volgende moeten kunnen typen:

$ mooier

Standaard krijgt u een scherm met helptekst te zien die bevestigt dat de tool is geïnstalleerd en correct werkt.

Een bestand opschonen

Om een ​​bestand opnieuw te formatteren, gebruikt u een commando dat lijkt op:

$ mooier - schrijf bestandsnaam.js

Hierdoor wordt het originele bestand overschreven, wat vaak de handigste methode is. Als alternatief wilt u misschien gewoon mooier reageren op elk bestand in een project:

$ mooier - schrijf.

Prettier zal alle bestanden in de huidige directory doorlopen en alle bestanden formatteren die het herkent.

U kunt het resultaat ook afdrukken naar standaarduitvoer, in plaats van het originele bestand te wijzigen, waardoor u de uitvoer naar een ander bestand kunt opslaan of het ergens anders kunt omleiden:

$ mooier test.js> test2.js

Een bestand controleren

Om Prettier te laten rapporteren over de reinheid van uw code zonder daadwerkelijk wijzigingen aan te brengen, gebruikt u de --controleren vlag met een enkele bestandsnaam of veel:

$ mooier - check.

U krijgt een regel met uitvoer voor elk bestand dat niet overeenkomt met het verwachte formaat, volgens de configuratie van Prettier:

Opmaak controleren ...
[waarschuwen] .prettierrc
[waarschuwen] .prettierrc.json
[waarschuwen] Problemen met codestijlen gevonden in de bovenstaande bestanden. Vergeten om Prettier te runnen?

Command Line-opties

De standaardopties van Prettier zijn beschikbaar als opdrachtregelopties, als u ze nodig heeft. Hier is een voorbeeld van hoe de --alleenstaande citaat vlag beïnvloedt output:

$ mooier tmp.js
functie voorbeeld () {
console.log ("hallo, wereld");
}
$ mooier --single-quote tmp.js
functie voorbeeld () {
console.log ('hallo, wereld');
}

Hulp krijgen

De Command Line-tool biedt informatieve hulp bij elke optie via het --helpen vlag:

$ mooier --help komma
--spoor-komma 
Druk waar mogelijk komma's af bij meerdere regels.
Geldige opties:
es5 Aflopende komma's waar geldig in ES5 (objecten, arrays, etc.)
geen Geen volgkomma's.
alle volgkomma's waar mogelijk (inclusief functieargumenten).
Standaard: es5

Met behulp van een teksteditor

Nadat u Prettier heeft geïnstalleerd, kunt u deze in verschillende scenario's gebruiken, afhankelijk van de toolset die u al gebruikt. De kans is groot dat u een teksteditor gebruikt. Prettier heeft bindingen voor de meeste populaire, dus hier is hoe je er drie kunt instellen:

Sublieme tekst

JsPrettier is een Sublime Text-plug-in die Prettier beschikbaar maakt in de editor. Hoewel er verschillende manieren zijn om JsPrettier te installeren, raden we aan om de methode Pakketbeheer te gebruiken. U moet Prettier al hebben geïnstalleerd, vervolgens het opdrachtpalet van Sublime Text openen en "Pakketbeheer: pakket installeren" selecteren:

Zoek vervolgens naar "jsprettier" en klik om het te installeren:

Nadat JsPrettier is geïnstalleerd, kunt u met de rechtermuisknop in een geopend bestand klikken om het te formatteren. U kunt ook de waarde van instellen auto_format_on_save naar waar in de instellingen van JsPrettier, wat ertoe zal leiden dat JsPrettier automatisch alle compatibele bestanden opruimt wanneer u ze opslaat in Sublime Text.

Atoom

Installatie voor Atom lijkt erg op Sublime Text: gebruik gewoon de ingebouwde pakketbeheerder van de editor om te installeren mooier-atoom:

Eenmaal geïnstalleerd, is het gebruik bekend: een snelkoppeling of menu-item stelt u in staat om een ​​bestand op aanvraag te formatteren, terwijl u met een Atom-instelling Prettier automatisch kunt starten wanneer een bestand wordt opgeslagen.

Vim

Vim is een zeer krachtige, op de opdrachtregel gebaseerde editor die niet geschikt is voor beginners. Prettier aan het werk krijgen met vim is behoorlijk gecompliceerd, maar het zijn nog maar een paar stappen:

mkdir -p ~ / .vim / pack / plugins / start
git kloon https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-prettier

Git is waarschijnlijk de gemakkelijkste manier om de benodigde bestanden te downloaden, maar elk middel om vim-mooier in die startmap te krijgen zou het werk moeten doen.

Eenmaal geïnstalleerd, zal Prettier automatisch starten wanneer een bestand wordt opgeslagen in vi. Het kan ook op elk moment handmatig worden uitgevoerd via de Mooier opdracht:

Wat zou moeten resulteren in een opgeschoond bestand:

Integreer Prettier in uw project

Het gebruik van een code-opmaak zoals Prettier kan helpen om een ​​codebasis te behouden die gemakkelijker te lezen is. Het kan ook helpen om debatten te omzeilen over welke specifieke stijl je moet gebruiken bij het coderen - besteed die beslissingen gewoon uit aan Prettier!

Ten slotte kan een git hook worden ingesteld om ervoor te zorgen dat code altijd wordt opgeruimd wanneer deze wordt vastgelegd in de opslagplaats van uw project. Individuele ontwikkelaars kunnen vrij zijn om hun code te formatteren zoals ze willen, maar de centrale kopie zal altijd schoon en consistent zijn.

nano vs. Vim: de beste terminalteksteditors, vergeleken

Op zoek naar een terminalteksteditor voor Linux? De belangrijkste keuze is tussen Vim en nano! Hier is hoe ze vergelijken.

Over de auteur