Hoe code te formatteren met Prettier in Visual Studio Code

Inleiding

Het formateren van code consistent is een uitdaging, maar moderne ontwikkelgereedschappen maken het mogelijk om consistentie te behouden in de codebasis van je team.

In dit artikel zet je Prettier in om automatisch je code te formateren in Visual Studio Code, ook wel bekend als VS Code.

Voor demonstratiedoeleinden, hier is de voorbeeldcode die je gaat formateren:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Als je bekend bent met codeformattering, zou je missers kunnen opmerken:

• A mix of single and double quotes.
• De eerste eigenschap van het person object zou op zijn eigen regel moeten staan.
• De console-opdracht binnen de functie zou moeten worden geïndenteerd.
• Je mag misschien wel of niet de optionele haakjes rond de parameter van de pijplijnfunctie.

Inhoudsopgave

• Het gebruik van de opdracht “document formateren”
• Codeformattering bij opslaan
• Wijzigen van de Prettier configuratie-instellingen
• Het maken van een Prettier configuratiebestand

Vereisten

Om deze tutorial te volgen, heb je het volgende nodig:

• Download en installeer Visual Studio Code.
• Om met Prettier in Visual Studio Code te werken, moet je de extensie installeren. Om dit te doen, zoek je naar Prettier - Code Formatter in het uitbreidingspaneel van VS Code. Als je het voor het eerst installeert, zie je een installeren knop in plaats van de uitschakelen knop die hier wordt getoond:

Stap 1 – Gebruik de Format Document-opdracht

Met de Prettier extensie geïnstalleerd, kun je nu gebruik maken van het om je code te formatteren. Laten we beginnen met het verkennen van het gebruik van de Format Document opdracht. Deze opdracht zorgt ervoor dat je code consistenter wordt met geformatteerde spaties, regel-afwrapping en aanhalingstekens.

Om het commandopaletje te openen, kunt u COMMAND + SHIFT + P gebruiken op macOS of CTRL + SHIFT + P op Windows.

In het commandopaletje, zoek naar format en kies vervolgens Format Document.

U wordt misschien gevraagd om welke indeling te gebruiken. Om dit te doen, klik op de Configure knop:

Kies vervolgens Prettier – Code Formatter.

Uw code is nu opgemaakt met spaties, regellengte en consistente aanhalingstekens:

const name = "James";

const person = { first: name };

console.log(person);

const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};

sayHelloLinting("James");

Dit werkt ook op CSS-bestanden. U kunt iets met inconsistente inspringing, accolades, nieuwe regels en puntkomma’s omzetten in goed opgemaakte code. Bijvoorbeeld:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Zal worden omgezet in:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

Nu we deze opdracht hebben onderzocht, laten we eens kijken hoe dit kan worden geïmplementeerd om automatisch te draaien.

Stap 2 — Code opmaken bij opslaan

Tot nu toe moest je een opdracht uitvoeren om je code handmatig te formatteren. Om dit proces te automatiseren, kun je in VS Code een instelling kiezen om je bestanden automatisch te formatteren wanneer je opslaat. Dit zorgt er ook voor dat code niet wordt gecheckt in versiebeheer die niet is gefomateerd.

Om deze instelling te wijzigen, druk op COMMAND + , op macOS, of CTRL + , op Windows om het Instellingen menu te openen. Zodra het menu geopend is, zoek naar Editor: Format On Save en zorg ervoor dat deze optie is aangevinkt:

Zodra dit is ingesteld, kun je je code gewoon schrijven en wordt deze automatisch gefomateerd wanneer je het bestand opslaat.

Stap 3 – Wijzigen van de Prettier configuratie-instellingen

Prettier doet standaard veel dingen voor je, maar je kunt ook de instellingen aanpassen.

Open het Instellingen menu. Zoek vervolgens naar Prettier. Dit brengt alle instellingen naar voren die je kunt wijzigen:

Hier zijn enkele van de meest voorkomende instellingen:

• Enkele aanhalingstekens – Kies tussen enkele en dubbele aanhalingstekens.
• Puntkomma’s – Kies of je puntkomma’s aan het einde van regels wilt opnemen of niet.
• Tab-breedte – Geef aan hoeveel spaties je wilt dat een tab invoegt.

De nadelen van het gebruik van de ingebouwde instellingenmenu in VS Code is dat het geen consistentie garandeert tussen ontwikkelaars in uw team.

Stap 4 – Het maken van een Prettier configuratiebestand

Als u instellingen in uw VS Code wijzigt, kan iemand anders een totaal andere configuratie op hun machine hebben. U kunt consistente opmaak binnen uw team afdwingen door een configuratiebestand voor uw project te maken.

Maak een nieuw bestand aan met de naam .prettierrc.extension met een van de volgende extensies:

• yml
• yaml
• json
• js
• toml

Hier is een voorbeeld van een eenvoudig configuratiebestand met behulp van JSON:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Voor meer specifieke informatie over de configuratiebestanden, bekijk de Prettier Docs. Nadat u een van deze heeft gemaakt en erin heeft gecheckt, kunt u ervoor zorgen dat elke teamlid dezelfde opmaakregels volgt.

Conclusie

Het hebben van consistente code is een goede praktijk. Het is vooral voordelig bij het werken aan een project met meerdere samenwerkers. Het eens worden over een reeks configuraties helpt bij de leesbaarheid en het begrip van de code. Er kan meer tijd worden besteed aan het oplossen van uitdagende technische problemen in plaats van te worstelen met opgeloste problemen zoals code-inspringing.

Prettier zorgt voor consistentie in de opmaak van uw code en maakt het proces automatisch.