Sådan opsætter du smukkere i Visual Studio Code

Det er vigtigt at skrive ren og læsbar kode, uanset om du arbejder alene eller sammen med et team af udviklere. Mens mange faktorer bidrager til kodelæsbarhed, er en af ​​de vigtigste konsekvent kodeformatering.

Men her er problemet: manuel kodeformatering kan være en absolut smerte og meget tilbøjelig til at fejle. Værktøjer som Prettier gør formatering af HTML, CSS, JavaScript og andre sprog så meget nemmere. Opdag, hvordan du installerer og bruger Prettier-udvidelsen til kodeformatering, samt nogle avancerede konfigurationsindstillinger.

Installerer smukkere

Før du fortsætter, skal du sikre dig, at du har Node.js installeret på din computer. Du kan installere den nyeste version fra officielle Node.js downloads side. Det følger med node pakke manager (npm) indbygget, som du skal bruge til at administrere dine Node.js-pakker.

Efter at have bekræftet, at Node.js er installeret lokalt, start med at oprette en tom mappe til dit projekt. Du kan navngive mappen smukkere-demo.

Derefter, cd ind i den mappe ved hjælp af en kommandolinje, og kør derefter følgende kommando for at initialisere et Node.js-projekt:

npm init -y

Denne kommando genererer en package.json-fil, der indeholder standardindstillingerne.

For at installere Prettier-udvidelsen skal du køre denne terminalkommando:

npm i --save-dev smukkere

Det --save-dev flag installerer smukkere som en dev-afhængighed, hvilket betyder, at det kun bruges under udvikling.

Nu hvor du har det installeret, kan du begynde at udforske, hvordan Prettier fungerer ved at bruge det på kommandolinjen.

Brug Prettier via kommandolinjen

Start med at oprette en script.js fil og udfylde den med følgende kode:

fungeresum(a, b) { Vend tilbage a + b }
konst bruger = { navn: "Kyle", alder: 27,
 isProgrammer: rigtigt,
 longKey: "Værdi",
 flere data: 3
}

For at formatere koden i denne script.js-fil via kommandolinjen, skal du køre følgende kommando:

npx smukkere --skriv script.js

Kommandoen omformaterer JavaScript-koden i script.js til Prettiers standardstandard. Dette bliver resultatet:

fungeresum(a, b) {
Vend tilbage a + b;
}
konst bruger = {
 navn: "Kyle",
 alder: 27,
 isProgrammer: rigtigt,
 longKey: "Værdi",
 flere data: 3,
};

Du kan også formatere HTML-markering fra kommandolinjen. Opret en index.html fil i samme mappe som script.js. Indsæt derefter følgende dårligt formaterede HTML i filen:

"" alt=""klasse="vejr-ikon stort">

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

For at formatere HTML, skal du køre denne kommando:

npx smukkere --skriv index.html

Denne kommando omformaterer HTML til Prettiers standardstandard, hvilket resulterer i følgende kode:

<header>
<div>
<imgsrc=""alt=""klasse="vejr-ikon stort" />
<divklasse="currentHeaderTemp"><span>21span>div>
div>
header>

Du kan også bruge --kontrollere flag for at kontrollere, om koden er i overensstemmelse med Prettiers standarder. Følgende eksempel kontrollerer script.js:

npx smukkere --tjek script.js

Dette er nyttigt, hvis du vil have en pre-commit hook for at sikre, at folk bruger Prettier og formaterer filerne, før de skubbes til Git. Dette fungerer godt når bidrager til open source.

Integrering af smukkere i Visual Studio Code

Det kan være besværligt at bruge Prettier via kommandolinjen. I stedet for manuelt at køre en kommando, hver gang du vil formatere kode, kan du indstille den til at formatere automatisk, når du ændrer en fil. Heldigvis har Visual Studio Code (VS Code) en indbygget måde at gøre dette for dig.

Gå til Udvidelser fanen i VS Code og søg efter Kønnere. Klik på Pænere - Kodeformater, installer det, og aktiver det derefter.

Gå ind i dine VS-kodeindstillinger ved at navigere til Fil > Præferencer > Indstillinger. I søgefeltet, søg efter Kønnere. Du finder et væld af muligheder for at hjælpe dig med at konfigurere Prettier-udvidelsen.

Typisk kan du klare dig med standardindstillingerne. Det eneste, du kan overveje at ændre, er semikolonerne (du kan fjerne dem, hvis du vil). Ellers er alt sat til standard, men du kan ændre det, som du vil.

Sørg for at aktivere formatonsgemme mulighed, så koden i hver fil automatisk formateres, når du gemmer filen. For at aktivere det, søg bare efter formatonsgemme og sæt kryds i boksen.

Hvis du ikke bruger VSCode, eller udvidelsen af ​​en eller anden grund ikke virker, kan du download onchange-biblioteket. Dette kører kommandoen til at formatere koden, når som helst du ændrer filen.

Sådan ignoreres filer, når du formaterer med smukkere

Hvis du skulle køre den smukkere --skrive kommando på hele din mappe, ville den gå gennem hvert eneste af dine nodemoduler. Men du skal ikke spilde tid på at formatere andres kode!

For at omgå dette problem skal du oprette en .prettierignore fil og inkludere udtrykket node_modules i filen. Hvis du skulle køre --skrive kommandoen på hele mappen, vil den omformatere alle filerne undtagen dem i node_modules folder.

Du kan også ignorere filer med en bestemt udvidelse. For eksempel, hvis du vil ignorere alle HTML-filer, skal du blot tilføje *.html til .prettierignore.

Sådan konfigureres smukkere

Du kan konfigurere, hvordan du vil have Prettier til at arbejde med forskellige muligheder. En måde er at tilføje en smukkere nøglen til din package.json fil. Værdien vil være et objekt, der indeholder alle konfigurationsmulighederne:

{
 ...
"scripts": {
"prøve": "echo \"Fejl: ingen test angivet\" && afslut 1"
 },
 smukkere: {
// muligheder gå her
 }
}

Den anden mulighed (som vi anbefaler) er at oprette en .smukke fil. Denne fil giver dig mulighed for at lave alle mulige tilpasninger.

Lad os sige, at du ikke kan lide semikolon. Du kan fjerne dem ved at placere følgende objekt i filen:

{
"semi": rigtigt,
"tilsidesætter": [
 {
"filer": ".ts",
"muligheder": {
"semi": falsk
 }
 }
 ]
}

Det tilsidesætter egenskab giver dig mulighed for at definere brugerdefinerede tilsidesættelser for bestemte filer eller filtypenavne. I dette tilfælde siger vi, at alle filer, der ender på .ts (det vil sige typescript-filer) bør ikke have semikolon.

Bruger smukkere med ESLint

ESLint er et fnugværktøj til at opdage fejl i JavaScript-kode samt formatere den. Hvis du bruger Prettier, vil du sandsynligvis ikke også bruge ESLint til formatering. For at bruge dem sammen, skal du installere og konfigurere eslint-config-pænere. Dette værktøj slår alle ESLint-konfigurationer fra for ting, som Prettier allerede håndterer.

Først skal du installere det:

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

Tilføj det derefter til udvider-listen i .eslintrc fil (sørg for, at det er den sidste ting på listen):

{
"forlænger": [
"noget-andre-konfiguration-du-bruger",
"smukke"
 ],
"regler": {
"indryk": "fejl"
 }
}

Nu vil ESLint deaktivere alle regler, som Prettier allerede tager sig af for at forhindre konflikter.

Ryd op i din kodebase med smukkere og ESLint

Prettier er et ideelt værktøj til at rydde op i din kode og håndhæve ensartet formatering i et projekt. Hvis du indstiller den til at fungere med VS Code, betyder det, at den altid er inden for rækkevidde.

ESLint er et must-have JavaScript-værktøj, der går hånd i hånd med Prettier. Det giver et væld af funktioner og tilpasningsmuligheder, der går ud over grundlæggende formatering. Lær, hvordan du bruger ESLint med JavaScript, hvis du vil være en mere produktiv udvikler.