De bästa VS Code HTML-genvägarna

Visual Studio Code (VS Code) erbjuder många värdefulla funktioner och genvägar för att förenkla HTML-utveckling. Dessa funktioner är praktiska och tillåter utvecklare att lägga mindre tid på att skriva kod. Även om du kanske inte använder alla tillgängliga genvägar, kan det gå långt att lära sig de viktigaste. Den här artikeln tar upp några av de mest praktiska genvägarna att tänka på vid HTML-kodning.

Emmet förkortningar

VS Code stöder Emmet. Detta verktyg gör det lättare att skriva CSS- och HTML-kod genom genvägar. Den grundläggande HTML-strukturen expanderar om du skriver ett utropstecken (!) och sedan trycker på Tab.

Emmet introducerar expansionsmöjligheter som minskar tiden det tar att koda med HTML i Visual Studio Code. Du kan använda detta i andra redigerare också. Att skriva stenografiuttryck resulterar i fullständiga strukturer i HTML.

• Grundläggande Emmet-förkortningar : Dessa förkortningar utökar några vanliga element. Om du skriver div och sedan trycker på Tab expanderas till , medan p expanderar till

  . Om du skriver ul>li*3 expanderas den till en lista med tre objekt.

• Kapslade element : > kan användas för att ange underordnade element. Till exempel expanderar div>h1 till , vilket i huvudsak skapar ett element med

  element inom.

• Multiplikation : Multiplikation genererar flera element. Att lägga till *3 till en ordnad lista genererar en lista med tre poster.
• Attribut : Lägg till attribut till HTML-element inom hakparenteser. Till exempel, [href=”#”] blir , vilket skapar ett ankarelement med ett href-attribut.
• CSS-liknande syntax : Syntaxen är inspirerad av CSS-väljare, vilket gör den bekant och intuitiv för webbutvecklare.
• Matematiska uttryck : Du kan utföra några grundläggande matematiska operationer i förkortningar. Till exempel kommer div>ul>li.item$*3 att expandera till en

  element som innehåller en ordnad lista med tre listobjekt med klassnamn item1, item2 och item3.

Förkortningar utökas genom att skriva och sedan trycka på Tab- knappen. Om det finns ett par giltiga förklaringar till din förkortning, cykla dem genom att trycka på Tab- alternativet igen. Emmet-förkortningar är inte specifika för VS-koden. Du kan använda dem i andra redigerare som stöder Emmet.

Tagglindning

Välj en rad eller ett kommando och tryck sedan på Ctrl+Skift+G om du använder Linux eller Windows. Om du använder Mac, använd Cmd+Shift+G . Denna genväg omsluter det valda innehållet med en HTML-tagg.

Detta är en bekväm funktion i VS Code. Det är användbart när du måste bifoga innehållsinnehållet med taggar eller när du behöver strukturera din kod. Valet kan vara en enstaka rad, flera rader eller ett kodblock.

Ett annat alternativ är att högerklicka på din valda kod och sedan välja Wrap med förkortning i snabbmenyn. När du utlöser kommandot för tagglindning kommer en prompt upp där du kan välja ett önskat HTML-taggnamn. Om du anger div , till exempel, a

element omsluter den valda koden.

Tagg-inpackning hjälper till att markera och strukturera kod utan att manuellt skriva in öppnings- och stängningstaggarna. Detta sparar mycket tid och minskar förekomsten av syntaxfel.

Formatering

Formatering av HTML-kod är ett bra sätt att upprätthålla konsekvens och läsbarhet i projekt. I VS Code tillåter inbyggda formateringsalternativ att åtgärden sker automatiskt i HTML enligt fördefinierade regler.

Kortkommandot som används för att formatera HTML är Shift+Alt+F för Windows och Linux. Skift+Alternativ+F fungerar på macOS. 

Genvägen kan formatera ett helt HTML-dokument eller en del av koden. När du trycker på den tillämpas formateringsreglerna. Indragsavstånd och radbrytningar justeras därefter.

Du kan också formatera kod automatiskt i VS Code .

Kommenterar

Du kan kommentera eller avkommentera antingen på en enda rad eller på flera kodrader som valts samtidigt. Om en kommentar redan finns tar genvägen bort kommentaren, och om den inte är kommenterad läggs kommentarer till. Kommentarer i HTML är inneslutna i taggar.

Kodnavigering

Detta syftar på förmågan att flytta mellan de olika delarna av kodbasen eller hoppa direkt till definitioner i HTML-attributen eller -taggarna. Använd alternativet Ctrl+] på Linux och Windows för att navigera genom taggar. Mac-användare kan använda Cmd+] för att gå till elementets avslutande tagg. För att hoppa till öppningstaggen, tryck på Ctrl+[ för Windows och Linux eller Cmd +[ för Mac.

För att hoppa till definitionen av ett attribut eller tagg, använd F12- tangenten. Den identifierar kodbasens motsvarande stängnings- eller öppningstagg för att hitta rätt plats.

Du kommer fortfarande åt definitionen när du håller ned kontrolltangenten och klickar på ett HTML-attribut eller -tagg i Windows. Tryck på Kommando+klicka på macOS för samma åtgärd. Detta eliminerar behovet av att söka efter platsen manuellt.

Zen-läge

Detta läge är distraktionsfritt. Det gör det lättare för utvecklare att fokusera på kod helt genom att dölja knappar och verktygsfält. Aktivera det här läget med genvägen Ctrl+KZ på Windows och Cmd+KZ på Mac. Alternativt, gå till Visa och sedan Utseende . Aktivera Zen-läget här.

Kommandopalett

Detta är en mycket använd funktion i VS Code och är särskilt användbar för nybörjare. Den representerar varje konfiguration, genväg och funktionalitet och är i form av en lista.

Allt du behöver göra är att skriva vad du vill göra i kommandopaletten. Du kommer att få olika kommandon för att hjälpa dig.

För att komma åt kommandopaletten använder du genvägen Ctrl+Skift+P för Windows. Mac-genvägen är Cmd+Shift+P .

Sök efter filer

Om det finns text du behöver i de aktuella projektfilerna kan du komma åt den genom att klicka på sökikonen i sidofältet. Alternativt kan du använda genvägen Ctrl+Skift+F på Windows eller Cmd+Skift+F på Mac.

Ta bort det föregående ordet

När du håller ned backstegsfältet för att radera ett ord kan du av misstag radera andra delar. För att begränsa raderingen till föregående ord, använd genvägen Ctrl+Backsteg på Windows eller Cmd+Backsteg på Mac.

Kopiera rad

Under utvecklingen behöver programmerare ibland kopiera och klistra in rader till andra projektdelar. Små förändringar kan sedan göras på ledningarna efter behov. En kortkommando är ett bra sätt att påskynda denna process, särskilt om du gör det regelbundet.

Windows-genvägen är Skift+alt+upp eller Skift+alt+ner . För Mac är genvägen Opt+shift+up eller Opt+shift+down .

Öppna den stängda redigeraren igen

Om du hanterar ett stort HTML-projekt med många filer kan det bli frustrerande om du av misstag stänger en flik. Tack och lov kan du använda en genväg för att öppna den sista stängda fliken i VS Code

För att öppna en stängd redigerare igen, använd genvägen Ctrl+Skift+T på Windows eller Cmd+Skift+T på Mac. Du kan öppna flera stängda flikar med denna genväg.

Accelerera kodning med HTML-genvägar

Många genvägar gör det relativt lättare att använda VS-kod. Även om det finns fler alternativ än vad som står i artikeln, är ovanstående några av de vanligaste som nybörjare och erfarna användare kan ha nytta av. Med VS Codes popularitet kan dra nytta av alla funktioner göra det roligare. Välj genvägar som du vanligtvis använder för att få upp kodningshastigheten.

Därefter bör du lära dig hur du jämför två filer i VS Code .

Vanliga frågor

F: Är HTML-genvägar anpassningsbara i VS-kod?

A: Ja. Du kan anpassa HTML-genvägar i VS Code genom att ändra dina användar- eller arbetsytainställningar.

F: Kan jag skapa mina egna anpassade HTML-genvägar i VS Code?

A: Ja. Du kan skapa anpassade HTML-snuttar eller genvägar i VS Code genom att definiera dem i användar- eller arbetsyteinställningar. Detta låter dig skapa genvägar för ofta använda kodmönster eller anpassade element.