Prettier instellen in Visual Studio Code

Schone en leesbare code schrijven is essentieel, of je nu alleen werkt of met een team van ontwikkelaars. Hoewel veel factoren bijdragen aan de leesbaarheid van code, is een van de belangrijkste de consistente codeopmaak.

Maar hier is het probleem: handmatige codeformattering kan een absolute pijn zijn en zeer foutgevoelig. Tools zoals Prettier maken het opmaken van HTML, CSS, JavaScript en andere talen zoveel gemakkelijker. Ontdek hoe u de Prettier-extensie installeert en gebruikt voor codeformattering, evenals enkele geavanceerde configuratie-instellingen.

Mooier installeren

Voordat u doorgaat, moet u ervoor zorgen dat Node.js op uw computer is geïnstalleerd. U kunt de nieuwste versie installeren vanaf de officiële Node.js-downloadpagina. Het komt met de knooppuntpakketbeheerder (npm) ingebouwd, die u zult gebruiken om uw Node.js-pakketten te beheren.

Nadat u hebt bevestigd dat Node.js lokaal is geïnstalleerd, begint u met het maken van een lege map voor uw project. U kunt de map een naam geven mooier-demo.

Cd vervolgens naar die map met behulp van een opdrachtregel en voer vervolgens de volgende opdracht uit om een ​​Node.js-project te initialiseren:

npm begin -y

Met deze opdracht wordt een bestand package.json gegenereerd met de standaardinstellingen.

Voer deze terminalopdracht uit om de Prettier-extensie te installeren:

npm i --save-dev mooier

De --save-dev flag installeert mooier als een dev-afhankelijkheid, wat betekent dat het alleen tijdens de ontwikkeling wordt gebruikt.

Nu je het hebt geïnstalleerd, kun je beginnen met het verkennen van hoe Prettier werkt door het op de opdrachtregel te gebruiken.

Prettier gebruiken via de opdrachtregel

Begin met het maken van een script.js bestand en vul het met de volgende code:

functiesom(een, b) { opbrengst een + b}
const gebruiker = { naam: "Kyle", leeftijd: 27,
 is Programmeur: WAAR,
 lange sleutel: "Waarde",
 meerData: 3
}

Voer de volgende opdracht uit om de code in dit script.js-bestand via de opdrachtregel te formatteren:

npx mooier --write script.js

De opdracht herformatteert de JavaScript-code in script.js naar de standaardstandaard van Prettier. Dit wordt het resultaat:

functiesom(een, b) {
opbrengst een + b;
}
const gebruiker = {
 naam: "Kyle",
 leeftijd: 27,
 is Programmeur: WAAR,
 lange sleutel: "Waarde",
 meerData: 3,
};

U kunt HTML-opmaak ook opmaken vanaf de opdrachtregel. Creëer een index.html bestand in dezelfde map als script.js. Plak vervolgens de volgende slecht opgemaakte HTML in het bestand:

"" alt=""klas="weerpictogram groot">

klas="currentHeaderTemp"><span>21span></div>
</div>
 </header>

Voer deze opdracht uit om de HTML op te maken:

npx mooier --write index.html

Met deze opdracht wordt de HTML opnieuw geformatteerd naar de standaardstandaard van Prettier, wat resulteert in de volgende code:

<koptekst>
<div>
<imgsrc=""alt=""klas="weerpictogram groot" />
<divklas="currentHeaderTemp"><span>21span>div>
div>
koptekst>

U kunt ook de --rekening vlag om te controleren of de code voldoet aan de normen van Prettier. Het volgende voorbeeld controleert script.js:

npx mooier --check script.js

Dit is handig als je een pre-commit hook wilt om ervoor te zorgen dat mensen Prettier gebruiken en de bestanden formatteren voordat ze naar Git gepusht worden. Dit werkt goed wanneer bijdragen aan open source.

Prettier integreren in Visual Studio-code

Prettier gebruiken via de opdrachtregel kan lastig zijn. In plaats van elke keer dat u code wilt formatteren handmatig een opdracht uit te voeren, kunt u deze instellen om automatisch te formatteren wanneer u een bestand wijzigt. Gelukkig heeft Visual Studio Code (VS Code) een ingebouwde manier om dit voor je te doen.

Ga naar de Extensies tabblad in VS Code en zoek naar Mooier. Klik op Prettier - Codeformatter, installeer het en schakel het vervolgens in.

Ga naar uw VS Code-instellingen door te navigeren naar Bestand > Voorkeuren > Instellingen. Zoek in het zoekvak naar Mooier. U vindt een heleboel opties om u te helpen bij het configureren van de Prettier-extensie.

Meestal kunt u rondkomen met de standaardinstellingen. Het enige dat u zou kunnen overwegen, zijn de puntkomma's (u kunt ze desgewenst verwijderen). Anders is alles standaard ingesteld, maar u kunt het naar wens wijzigen.

Zorg ervoor dat u de opmakenopslaan zodat de code in elk bestand automatisch wordt opgemaakt wanneer u dat bestand opslaat. Om het in te schakelen, zoekt u gewoon naar opmakenopslaan en vink het vakje aan.

Als u VSCode niet gebruikt of als de extensie om de een of andere reden niet werkt, dan kan dat download de onchange-bibliotheek. Hiermee wordt de opdracht uitgevoerd om de code op te maken wanneer u het bestand wijzigt.

Bestanden negeren bij het formatteren met Prettier

Als je zou rennen, hoe mooier --schrijven commando op uw hele map, het zou door elk van uw knooppuntmodules gaan. Maar u moet geen tijd verspillen aan het formatteren van andermans code!

Om dit probleem te omzeilen, maakt u een .mooinegeren bestand en voeg de term toe knooppunt_modules in het bestand. Als je de --schrijven commando op de hele map, het zou alle bestanden opnieuw formatteren behalve die in de knooppunt_modules map.

U kunt ook bestanden met een specifieke extensie negeren. Als u bijvoorbeeld alle HTML-bestanden wilt negeren, voegt u gewoon toe *.html naar .mooinegeren.

Prettier configureren

U kunt configureren hoe Prettier met verschillende opties moet werken. Een manier is om een ​​toe te voegen mooier sleutel tot uw pakket.json bestand. De waarde is een object dat alle configuratie-opties bevat:

{
 ...
"scripts": {
"test": "echo \"Fout: geen test gespecificeerd\" && exit 1"
 },
 mooier: {
// opties komen hier
 }
}

De tweede optie (die we aanbevelen) is om een .mooierrc bestand. Met dit bestand kunt u allerlei aanpassingen doen.

Laten we zeggen dat je niet van puntkomma's houdt. U kunt ze verwijderen door het volgende object in het bestand te plaatsen:

{
"halve": WAAR,
"overschrijft": [
 {
"bestanden": ".ts",
"opties": {
"halve": vals
 }
 }
 ]
}

De overschrijft eigenschap stelt u in staat aangepaste overschrijvingen voor bepaalde bestanden of bestandsextensies te definiëren. In dit geval zeggen we dat alle bestanden die eindigen op .ts (dat wil zeggen, typoscriptbestanden) mogen geen puntkomma's bevatten.

Prettier gebruiken met ESLint

ESLint is een linting-tool voor het detecteren van fouten in JavaScript-code en voor het formatteren ervan. Als je Prettier gebruikt, zou je ESLint waarschijnlijk ook niet willen gebruiken voor het formatteren. Om ze samen te gebruiken, moet u ze installeren en instellen eslint-config-mooier. Deze tool schakelt alle ESLint-configuraties uit voor dingen die Prettier al afhandelt.

Eerst moet je het installeren:

npm i --save-dev eslint-config-prettier

Voeg het vervolgens toe aan de uitbreidingslijst in het .eslintrc bestand (zorg ervoor dat dit het laatste in de lijst is):

{
"breidt zich uit": [
"een-andere-configuratie-die-je-gebruikt",
"mooier"
 ],
"reglement": {
"inspringen": "fout"
 }
}

Nu zal ESLint alle regels uitschakelen waar Prettier al voor zorgt om conflicten te voorkomen.

Ruim uw codebase op met Prettier en ESLint

Prettier is een ideaal hulpmiddel om uw code op te schonen en consistente opmaak binnen een project af te dwingen. Door het te laten werken met VS Code, is het altijd binnen handbereik.

ESLint is een onmisbare JavaScript-tool die hand in hand gaat met Prettier. Het biedt een heleboel functies en aanpassingsopties die verder gaan dan standaardopmaak. Leer hoe u ESLint met JavaScript kunt gebruiken als u een productievere ontwikkelaar wilt zijn.