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.
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.
. Om du skriver ul>li*3 expanderas den till en lista med tre objekt.
element inom.
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.
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 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 .
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.
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.
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.
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 .
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.
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.
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 .
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.
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 .
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.
Upptäck hur du enkelt ställer in, går med i och värdar Zoom-möten. Läs våra tips för att använda Zoom samt dess funktioner för att säkerställa effektiva och säkra möten.
Vill du spela in Microsofts teams möte? Läs inlägget för att lära dig hur du spelar in det med och utan Microsoft 365 Enterprise-konto.
Vill du hålla din Facebook-profil privat? Lär dig hur du kan skydda din integritet med dessa steg.
Lär dig att skriva spanska n med Tilde (ñ) på tangentbordet. Den här artikeln ger dig kortkommandon och metoder för både Windows och Mac.
Upptäck hur du lägger till och använder dina egna anpassade bakgrunder i Microsoft Teams-möten för att skapa en mer personlig och professionell atmosfär.
Så här kan du få ut det mesta av Microsoft Rewards i Windows, Xbox, Mobile, shopping och mycket mer.
Med Google Maps kan du mäta avståndet mellan två punkter. Lär dig att använda verktyget effektivt på olika enheter.
Skapa professionella försättssidor i Google Dokument genom att använda förbyggda mallar eller skapa dem från grunden. Följ vår detaljerade steg-för-steg-guide för att optimera dina dokument.
Den här bloggen kommer att hjälpa läsare att inaktivera Copilot-funktionen på Windows om de inte vill använda AI-modellen.
Lär dig hur du kopplar JBL-hörlurar med din dator, mobil enhet eller surfplatta på ett enkelt sätt. Få tips för att förbättra din anslutning och upplevelse.
![Ta reda på hur du gör försättssidor i Google Dokument [Enkla steg]](https://blog.webtech360.com/resources3/images10/image-336-1008140654862.jpg "Ta reda på hur du gör försättssidor i Google Dokument [Enkla steg]")
