Visual Studio Code, populärt känd som VS Code, är en av de mest använda kodredigerarna. VS Code har inbyggt stöd för Node.js, JavaScript och TypeScript. Du kan dock använda olika tillägg för att göra den tillgänglig för de flesta andra språk och körtider.
Microsoft är företaget som utvecklade denna gratis och öppen källkodsredigerare.
VS-koden är populär på grund av dessa funktioner;
- Intellisense: VS Code ger autokompletterande kod och syntaxmarkering.
- Cross-platform: Du kan använda denna kodredigerare på Linux, Windows och macOS operativsystem.
- Tillgänglighet för olika tillägg: Tillgängligheten av olika tillägg kan också omvandla VS Code till en integrerad utvecklingsmiljö (IDE).
- Flerspråksstöd: Du kan använda det här verktyget med nästan alla programmeringsspråk genom VS Code-tillägg.
- Integrerad terminal: Den inbyggda terminalen i VS Code tillåter utvecklare att köra Git-kommandon direkt från kodredigeraren. Du kan alltså utföra, trycka och dra ändringar från denna editor.
Innehållsförteckning
Autoformatering i VS-kod
Förutsättningar
- VS-kod: Denna kodredigerare är gratis att ladda ner. Om du inte har det installerat på din maskin, ladda ner det från den officiella webbplatsen, beroende på ditt operativsystem.
- Välj språk som ska användas: Du måste bestämma vilket språk som ska användas eftersom det finns olika formaterare för olika språk.
- En formatterare: VS Code använder tillägg för kodformatering. Vi kommer att använda Prettier i den här artikeln. Du är dock fri att använda vilken formatering som helst som passar språket du använder.
Autoformatering är en funktion som automatiskt formaterar block/kodrader eller en fil i kodredigeraren baserat på specifika regler och riktlinjer. Den här funktionen är baserad på en konfigurationsfil som anger formateringsregler för indrag, radbrytningar och avstånd.
När funktionen för automatisk formatering är aktiverad kommer alla dessa regler att tillämpas på alla filer i din kodbas när du skriver den.
Du kan dock även inaktivera autoformatering för ett specifikt kodblock om du vill att det ska sticka ut från resten. För att uppnå detta kan du slå in kodbiten i ett kommentarsblock som anger vilka regler som ska tillämpas.
Fördelar med automatisk formatering av koder i VS-kod
- Sparar tid: Att skriva kod och formatering kan vara tidskrävande. Automatisk formatering sparar tid, och du kan därmed fokusera mer på skrivprocessen och syntaxen.
- Konsistens: Även om källkoden inte visas på klientsidan bör det finnas en viss konsekvens. Automatisk formatering är praktiskt, särskilt för stora projekt med flera bidragsgivare.
- Följer bästa praxis: Funktionen för automatisk formatering är praktisk för att upprätthålla konsekventa indrag, avstånd och namnkonventioner.
- För enkel kodläsning: Välformaterad kod är lätt att följa under kodgranskning. Nya utvecklare som går med i din organisation kommer lätt att förstå välformaterad kod.
Hur man aktiverar Auto Format i VS-kod och anpassar den
Följ dessa steg för att aktivera automatisk formatering:
När Prettier är installerat på din VS-kod kan du aktivera funktionen för automatisk formatering.
Vi använder en enkel HTML-fil för en inloggningssida för att visa hur man aktiverar automatisk formatering.
Vi kommer att använda denna kod:
<!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>
Även om ovanstående kod är funktionell är den svår att läsa och följa med eftersom den inte är indragen som förväntat. Vi kommer att använda Prettier för att autoformatera koden.
Följ dessa steg.
3. Skriv Formatter i sökfältet och välj Prettier på fliken Editor:Default Formatter.
4. Leta reda på Editor: Format på Spara och markera rutan.
5. Spara din HTML-fil, välj indata på ditt HTML-dokument, högerklicka och välj Formatera dokument.
6. Kontrollera om ditt dokument har formaterats. Detta tillägg kommer automatiskt att formatera all annan kod du skriver på din VS-kod.
6. Justera Prettier Configuration-inställningar: Prettier är inställd för att utföra många saker som standard. Men du kan fortfarande anpassa den för att passa dina behov. Gå till Inställningar på din VS-kod, sök efter Prettier och justera inställningarna efter eget tycke.
7. Skapa en snyggare konfigurationsfil: De inställningar du har konfigurerat på din maskin kan skilja sig från andra om du arbetar som ett team. En snyggare konfigurationsfil säkerställer att du har en konsekvent kodstil för ditt projekt. Skapa en .prettierrc-fil med tillägget .json för att konfigurera dina projektinställningar. Vi kan lägga till den här koden i JSON-filen för demonstrationsändamål;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Ovanstående kodblock specificerar fyra saker, avslutande kommatecken, tabbbredden, användningen av semikolon och om enkla eller dubbla citattecken ska användas. I detta fall;
- Ett avslutande kommatecken kommer bara att läggas till när koden är transpilerad till es5.
- Tabbredd, antalet utrymmen för varje flik, är inställd på 4.
- Semi anger om du ska lägga till semikolon eller inte i din kod i slutet av uttalanden. Vi har angett det som falskt, vilket innebär att semikolon inte kommer att läggas till.
- Du kan antingen använda enkla eller dubbla citattecken i din kod. Vi har specificerat att vi ska använda enstaka citat för detta projekt.
Du kan kolla in Prettier docs för att förstå hur du skapar konsekventa konfigurationsinställningar.
Bästa metoder för automatisk formatering i VS-kod
Använd rätt formaterad
Även om vi har använt Prettier i den här artikeln i demonstrationssyfte, betyder det inte att det gäller alla språk. Det finns hundratals formateringstillägg för VS Code, och det är upp till dig att avgöra vad som passar dina behov. Till exempel, formatterare som Prettier och Beautify passar HTML och CSS. Å andra sidan kan du använda Black eller Python-tillägg för att formatera din Python-kod.
Använd en konsekvent kodstil
Som du har sett kan du anpassa inställningarna för formateraren. Om du arbetar som ett team, se till att du har samma konfigurationer för att skapa en konsekvent kodstil. Det bästa tillvägagångssättet är att skapa en .prettierrc.extension-fil för att inkludera alla konfigurationer för ditt projekt.
Använd linters
Du kan använda linters för att leta efter stilöverträdelser, syntaxfel och programmeringsfel i din kod. Genom att kombinera linters med automatisk formatering sparar du mycket tid och ansträngning för att göra din kod läsbar och felsöka.
Använd kortkommandon
VS Code har hundratals genvägar för att spara tid vid formatering. Du kan till och med anpassa dessa kommandon till något minnesvärt.
Kontrollera din kod innan du bestämmer dig
Även om linting och autoformatering kan fixa vissa problem med din kod; du måste fortfarande granska din kod innan du anger kommandot commit.
Genvägar för kodformatering
VS Code är en kodredigerare för flera plattformar som du kan använda på Windows, Mac och Linux-baserade system som Ubuntu. Du kan använda följande genvägar för att antingen formatera hela dokumentet eller specifikt markerade områden i din kod;
Windows
- Skift + Alt + F-kombinationen formaterar hela dokumentet.
- Kombinationen Ctrl + K, Ctrl + F formaterar ett avsnitt av din kod som du har valt. Till exempel en div.
Mac OS
- Skift + Alternativ + F-kombinationen formaterar hela dokumentet.
- Kombinationen Ctrl + K, Ctrl + F formaterar ett avsnitt av din kod som du har valt. Till exempel en div.
Ubuntu
- Kombinationen Ctrl + Shift + I formaterar hela dokumentet.
- Kombinationen Ctrl + K, Ctrl + F formaterar ett avsnitt av din kod som du har valt. Till exempel en div.
Observera dock att vissa av dessa genvägar kan misslyckas om du har anpassat din VS-kod med olika genvägar.
Du kan kontrollera dina VS-kodgenvägar genom att använda dessa steg;
- Öppna VS-kod och klicka på Arkiv-objektet i det övre vänstra hörnet.
- Bläddra till Inställningar
- Klicka på Kortkommandon för att se alla kortkommandon du kan använda.
Slutsats
Automatisk formatering kan spara mycket tid när du aktiverar det. Valet av tillägg kommer att variera beroende på vilket språk du använder. Du kan installera flera kodformaterare beroende på vilka programmeringsspråk du använder för dina projekt.
Kontrollera alltid dokumentationen för den formatterare du väljer för din kod. Detta säkerställer att du förstår de språk som den stöder och hur du gör det bästa av det.
Kolla in vår artikel om de bästa VS-kodtilläggen som utvecklare bör använda.