Code opmaken met Prettier in Visual Studio Code

Wanneer je code schrijft, is het vaak lastig om deze visueel netjes en consistent te houden. Inspringing, enkele of dubbele aanhalingstekens en puntkomma’s lijken onbelangrijk wanneer je nadenkt over de complexe logica van moderne webapplicaties.

Daar komt de Prettier Code Formatter goed van pas. Prettier is een aanpasbare codeformatter die meerdere talen ondersteunt en met de meeste code-editors integreert. In dit artikel leer je hoe je Prettier gebruikt in Visual Studio Code.

De werkomgeving instellen

We gaan ervan uit dat je Visual Studio Code al hebt geïnstalleerd en een codebestand hebt dat opmaak nodig heeft. Hier is een voorbeeldfragment:

const name = "Hostman";
const service ={first: name
}
console.log(service);
const printName = (fName) => {
console.log(`This is ${fName}`)
}
printName ('Hostman');

Deze code bevat enkele veelvoorkomende problemen:

• Inconsistente aanhalingstekens

• Ontbrekende inspringing

• Onjuiste regeleinden

Als je het uitvoert, werkt het prima, want JavaScript vereist geen specifieke opmaak.
Maar voor een menselijke lezer is dit moeilijk te volgen.

We moeten een extensie installeren die automatisch inspringingen, puntkomma’s en andere elementen toevoegt om de code beter leesbaar te maken.

1. Open het tabblad Extensions in het VS Code-menu (of druk op Ctrl + Shift + X in Windows).

    

2. Zoek naar Prettier — deze extensie heeft meer dan 20 miljoen installaties.

    

3. Klik op Installeren om deze aan je editor toe te voegen.

Er is ook een alternatieve methode. Druk op Ctrl + P om het snelstartvenster te openen en voer het volgende commando uit:

ext install esbenp.prettier-vscode

Dit commando installeert de Prettier-extensie direct.

Nu kun je het hulpmiddel gebruiken om snel code te formatteren in VS Code.

Automatische opmaak

Stel dat je een bericht op Slack krijgt van de projectmanager: de bijgewerkte Hostman Cloud Server-pagina moet dringend live. Alles werkt goed, maar de code-opmaak laat te wensen over. Gelukkig heb je nu de Prettier-extensie, die dit probleem snel en eenvoudig oplost.

1. Druk op Ctrl + Shift + P om de Command Palette te openen.
2. Zoek en voer het commando Format Document With uit.

3. Selecteer Prettier in de keuzelijst.

Je code wordt nu automatisch opgemaakt met de juiste spaties, inspringing, regeleinden en consistente aanhalingstekens. Hier is een voorbeeld:

const name = "Hostman";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("Hostman");

Dit hulpmiddel is bijzonder handig en ondersteunt een snelle configuratie voor verschillende programmeertalen. Als je bijvoorbeeld automatische opmaak uitvoert op een Python-bestand, zal VS Code vragen om autopep8 te installeren. Deze tool formatteert Python-code automatisch volgens de officiële stijlgids PEP 8, met behulp van pycodestyle om inconsistenties te detecteren. Autopep8 kan de meeste problemen die door pycodestyle worden gemeld automatisch corrigeren.

Om handmatig formatteren te vermijden, kun je automatische opmaak bij opslaan inschakelen:

1. Open de Instellingen (Ctrl + , in Windows).

    

2. Zoek naar Editor: Format On Save.

    

3. Vink het selectievakje aan om formatteren bij opslaan te activeren.

Dat is alles! Je code wordt voortaan automatisch geformatteerd telkens wanneer je het bestand opslaat.

Aangepaste opmaakregels instellen

Ontwikkelaars kunnen hun opmaakregels op twee manieren aanpassen:

1. Door de instellingen direct te wijzigen in de extensieconfiguratie.
2. Door een afzonderlijk configuratiebestand aan te maken.

In de extensie-instellingen kun je veelgebruikte parameters wijzigen, zoals:

1. het aantal spaties voor inspringing,
2. of er een puntkomma aan het einde van elke regel moet worden toegevoegd.

Deze methode is snel, maar de configuratie is alleen van toepassing op jouw lokale omgeving. Om dezelfde instellingen te delen met het hele team, kun je beter een gedeeld configuratiebestand aanmaken. Zo blijft de opmaak in alle projecten binnen Visual Studio Code consistent.

Een .prettierrc-configuratiebestand kan verschillende extensies gebruiken: .yml, .yaml, .json, .js of .toml. Hier is een eenvoudig voorbeeld in JSON-indeling:

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

Conclusie

Prettier is een hulpmiddel dat de ontwikkeling aanzienlijk versnelt door automatisch opmaakregels toe te passen — of deze nu standaard of aangepast zijn.
Met een configuratiebestand heeft je team één uniforme set opmaakregels. Iedereen kan zich dan concentreren op ontwikkeling zonder zich zorgen te maken over stijlverschillen. Dankzij Prettier kunnen komma’s, inspringing en aanhalingstekens in slechts enkele klikken worden gecorrigeerd tijdens het refactoren, waardoor je met meer rust en efficiëntie kunt programmeren.