Visual Studio Code, populært kendt som VS Code, er en af de mest brugte kodeeditorer. VS Code har indbygget understøttelse af Node.js, JavaScript og TypeScript. Du kan dog bruge forskellige udvidelser til at gøre det tilgængeligt for de fleste andre sprog og kørselstider.
Microsoft er virksomheden, der udviklede denne gratis og open source-kodeeditor.
VS-kode er populær på grund af disse funktioner;
- Intellisense: VS-kode giver autofuldførelse af kode og syntaksfremhævning.
- Cross-platform: Du kan bruge denne kodeeditor på Linux-, Windows- og macOS-operativsystemer.
- Tilgængelighed af forskellige udvidelser: Tilgængeligheden af forskellige udvidelser kan også transformere VS Code til et integreret udviklingsmiljø (IDE).
- Understøttelse af flere sprog: Du kan bruge dette værktøj med næsten alle programmeringssprog gennem VS-kodeudvidelser.
- Integreret terminal: Den indbyggede terminal i VS Code giver udviklere mulighed for at udføre Git-kommandoer direkte fra kodeeditoren. Du kan således begå, skubbe og trække ændringer fra denne editor.
Indholdsfortegnelse
Auto-formatering i VS-kode
Forudsætninger
- VS-kode: Denne kodeeditor er gratis at downloade. Hvis du ikke har det installeret på din maskine, skal du downloade det fra det officielle websted, afhængigt af dit operativsystem.
- Vælg det sprog, du vil bruge: Du skal beslutte dig for, hvilket sprog du vil bruge, da der er forskellige formatere til forskellige sprog.
- En formatter: VS Code bruger udvidelser til kodeformatering. Vi vil bruge Prettier i denne artikel. Du kan dog frit bruge enhver formatering, der passer til det sprog, du bruger.
Autoformatering er en funktion, der automatisk formaterer blokke/kodelinjer eller en fil på kodeeditoren baseret på specifikke regler og retningslinjer. Denne funktion er baseret på en konfigurationsfil, der specificerer formateringsregler for indrykning, linjeskift og mellemrum.
Når autoformateringsfunktionen er aktiveret, vil alle disse regler blive anvendt på alle filerne i din kodebase, mens du skriver den.
Du kan dog også deaktivere autoformatering for en bestemt kodeblok, hvis du vil have den til at skille sig ud fra resten. For at opnå dette kan du pakke kodestykket ind i en kommentarblok, der specificerer de regler, der skal anvendes.
Fordele ved automatisk formatering af koder i VS-kode
- Sparer tid: Det kan være tidskrævende at skrive kode og formatere. Automatisk formatering sparer dig tid, og du kan dermed fokusere mere på skriveprocessen og syntaks.
- Konsistens: Selvom kildekoden ikke vises på klientsiden, bør der være en vis konsistens. Automatisk formatering er praktisk, især for store projekter med flere bidragydere.
- Overholder bedste praksis: Funktionen til automatisk formatering er praktisk til at håndhæve konsekvente indrykning, mellemrum og navnekonventioner.
- For nem kodelæsning: Velformateret kode er nem at følge under kodegennemgange. Nye udviklere, der tilslutter sig din organisation, vil nemt forstå velformateret kode.
Sådan aktiverer du Auto Format i VS-kode og tilpasser den
Følg disse trin for at aktivere automatisk formatering:
Når Prettier er installeret på din VS-kode, kan du aktivere autoformateringsfunktionen.
Vi bruger en simpel HTML-fil af en login-side til at demonstrere, hvordan man aktiverer automatisk formatering.
Vi vil bruge denne kode:
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
Selvom ovenstående kode er funktionel, er den svær at læse og følge med, da den ikke er indrykket som forventet. Vi vil bruge Prettier til at autoformatere koden.
Følg disse trin.
3. Skriv Formatter i søgefeltet, og vælg Prettier på fanen Editor:Default Formatter.
4. Find Editor: Formater på Gem og sæt kryds i boksen.
5. Gem din HTML-fil, vælg input på dit HTML-dokument, højreklik og vælg Formater dokument.
6. Tjek, om dit dokument er blevet formateret. Denne udvidelse vil automatisk formatere al den anden kode, du skriver på din VS-kode.
6. Juster Prettier Configuration-indstillinger: Prettier er sat op til at udføre mange ting som standard. Du kan dog stadig tilpasse den, så den passer til dine behov. Gå til Indstillinger på din VS-kode, søg efter Smukkere, og juster indstillingerne efter din smag.
7. Opret en smukkere konfigurationsfil: De indstillinger, du har konfigureret på din maskine, kan afvige fra andre, hvis du arbejder som et team. En smukkere konfigurationsfil vil sikre, at du har en ensartet kodestil til dit projekt. Opret en .prettierrc-fil med .json-udvidelsen for at konfigurere dine projektindstillinger. Vi kan tilføje denne kode til JSON-filen til demonstrationsformål;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Ovenstående kodeblok specificerer fire ting, efterfølgende kommaer, tabulatorbredden, brugen af semikolon og om der skal bruges enkelte eller dobbelte anførselstegn. I dette tilfælde;
- Et efterfølgende komma vil kun blive tilføjet, når koden er transpileret til es5.
- Tabbredde, antallet af mellemrum for hver fane, er indstillet til 4.
- Semi angiver, om du skal tilføje semikolon eller ej til din kode i slutningen af udsagn. Vi har sat det som falsk, hvilket betyder, at semikolon ikke vil blive tilføjet.
- Du kan enten bruge enkelte eller dobbelte anførselstegn i din kode. Vi har specificeret, at vi skal bruge enkelte tilbud til dette projekt.
Du kan tjekke smukkere dokumenter for at forstå, hvordan du opretter ensartede konfigurationsindstillinger.
Bedste praksis for autoformat i VS-kode
Brug den rigtige formatering
Selvom vi har brugt Prettier i denne artikel til demonstrationsformål, betyder det ikke, at det gælder for alle sprog. Der findes hundredvis af formateringsudvidelser til VS Code, og det er op til dig at bestemme, hvad der passer til dine behov. For eksempel passer formatere som Prettier og Beautify til HTML og CSS. På den anden side kan du bruge Black eller Python-udvidelser til at formatere din Python-kode.
Brug en konsekvent kodestil
Som du har set, kan du tilpasse indstillingerne for formateren. Hvis du arbejder som et team, skal du sikre dig, at du har de samme konfigurationer for at skabe en ensartet kodestil. Den bedste fremgangsmåde er at oprette en .prettierrc.extension-fil for at inkludere alle konfigurationer til dit projekt.
Brug linters
Du kan bruge linters til at tjekke for stilovertrædelser, syntaksfejl og programmeringsfejl i din kode. Ved at kombinere linters med automatisk formatering vil du spare en masse tid og kræfter på at gøre din kode læsbar og fejlfinde.
Brug tastaturgenveje
VS Code har hundredvis af genveje for at spare dig tid i formatering. Du kan endda tilpasse disse kommandoer til noget mindeværdigt.
Tjek din kode, før du forpligter dig
Selvom fnug og automatisk formatering kan løse nogle problemer på din kode; du skal stadig gennemgå din kode, før du indtaster commit-kommandoen.
Genveje til kodeformatering
VS Code er en multiplatform-kodeeditor, som du kan bruge på Windows, Mac og Linux-baserede systemer såsom Ubuntu. Du kan bruge følgende genveje til enten at formatere hele dokumentet eller specifikke fremhævede områder af din kode;
Windows
- Shift + Alt + F-kombinationen formaterer hele dokumentet.
- Kombinationen Ctrl + K, Ctrl + F formaterer en sektion af din kode, som du har valgt. For eksempel en div.
macOS
- Shift + Option + F-kombination formaterer hele dokumentet.
- Kombinationen Ctrl + K, Ctrl + F formaterer en sektion af din kode, som du har valgt. For eksempel en div.
Ubuntu
- Kombinationen Ctrl + Shift + I formaterer hele dokumentet.
- Kombinationen Ctrl + K, Ctrl + F formaterer en sektion af din kode, som du har valgt. For eksempel en div.
Bemærk dog, at nogle af disse genveje kan mislykkes, hvis du har tilpasset din VS-kode med forskellige genveje.
Du kan tjekke dine VS-kodegenveje ved at bruge disse trin;
- Åbn VS-kode, og klik på Fil-elementet i øverste venstre hjørne.
- Rul til Præferencer
- Klik på Tastaturgenveje for at se alle de genveje, du kan bruge.
Konklusion
Automatisk formatering kan spare dig for meget tid, når du aktiverer det. Valget af en udvidelse vil variere afhængigt af det sprog, du bruger. Du kan installere flere kodeformatere afhængigt af de programmeringssprog, du bruger til dine projekter.
Tjek altid dokumentationen for den formatter, du vælger til din kode. Dette vil sikre, at du forstår de sprog, den understøtter, og hvordan du får det bedste ud af det.
Tjek vores artikel om de bedste VS Code-udvidelser udviklere bør bruge.