Visual Studio Code (VS Code) tilbyder mange værdifulde funktioner og genveje til at forenkle HTML-udvikling. Disse funktioner er praktiske og giver udviklere mulighed for at bruge mindre tid på at skrive kode. Selvom du måske ikke bruger alle de tilgængelige genveje, kan det gå langt at lære de vigtigste. Denne artikel dækker nogle af de mest praktiske genveje til at overveje, når HTML-kodning.
VS Code understøtter Emmet. Dette værktøj gør det nemmere at skrive CSS- og HTML-kode gennem genveje. Den grundlæggende HTML-struktur udvides, hvis du skriver et udråbstegn (!) og derefter trykker på Tab.
Emmet introducerer udvidelsesmuligheder, der reducerer den tid, det tager at kode ved hjælp af HTML i Visual Studio Code. Du kan også bruge dette i andre editorer. At skrive stenografiske udtryk resulterer i komplette strukturer i HTML.
. Hvis du skriver ul>li*3 , udvides den til en liste med tre elementer.
element indeni.
element, der indeholder en ordnet liste med tre listeelementer med klassenavne item1, item2 og item3.
Forkortelser udvides ved at skrive og derefter trykke på Tab- knappen. Hvis der er et par gyldige forklaringer på din forkortelse, skal du skifte mellem dem ved at trykke på fanebladet igen . Emmet-forkortelser er ikke specifikke for VS-kode. Du kan bruge dem i andre editorer, der understøtter Emmet.
Vælg en linje eller kommando, og tryk derefter på Ctrl+Shift+G, hvis du bruger Linux eller Windows. Hvis du bruger Mac, skal du bruge Cmd+Shift+G . Denne genvej omslutter det valgte indhold med et HTML-tag.
Dette er en praktisk funktion i VS Code. Det er nyttigt, når du skal omslutte indholdsindholdet med tags, eller når du skal strukturere din kode. Valget kan være en enkelt linje, flere linjer eller en kodeblok.
En anden mulighed er at højreklikke på din valgte kode og derefter vælge Ombryd med forkortelse i kontekstmenuen. Når du udløser kommandoen for tagombrydning, kommer der en prompt op, hvor du kan vælge et ønsket HTML-tagnavn. Hvis du indtaster div , for eksempel, en
element ombryder den valgte kode.
Tag-indpakning hjælper med at markere og strukturere kode uden manuelt at indtaste åbnings- og lukketags. Dette sparer en masse tid og reducerer forekomsten af syntaksfejl.
Formatering af HTML-kode er en god måde at bevare konsistens og læsbarhed i projekter. I VS Code tillader indbyggede formateringsmuligheder, at handlingen sker automatisk i HTML efter foruddefinerede regler.
Tastaturgenvejen, der bruges til at formatere HTML, er Shift+Alt+F til Windows og Linux. Shift+Option+F virker på macOS.
Genvejen kan formatere et helt HTML-dokument eller en del af koden. Når du trykker på den, anvendes formateringsreglerne. Indrykningsafstand og linjeskift justeres i overensstemmelse hermed.
Du kan også automatisk formatere kode i VS Code .
Du kan kommentere eller fjerne kommentarer enten på en enkelt linje eller på flere kodelinjer som valgt på samme tid. Hvis der allerede findes en kommentar, fjerner genvejen kommentaren, og hvis den ikke er kommenteret, tilføjes kommentarer. Kommentarer i HTML er indesluttet i tags.
Dette refererer til kapaciteten til at bevæge sig mellem de forskellige dele af kodebasen eller springe direkte til definitioner i HTML-attributterne eller tags. Brug af Ctrl+]- indstillingen på Linux og Windows til at navigere gennem tags. Mac-brugere kan bruge Cmd+] til at gå til elementets afsluttende tag. For at springe til åbningsmærket skal du trykke på Ctrl+[ for Windows og Linux eller Cmd +[ for Mac.
For at springe til definitionen af en attribut eller et tag, skal du bruge F12- tasten. Den identificerer kodebasens tilsvarende lukke- eller åbningstag for at finde den korrekte placering.
Du vil stadig få adgang til definitionen, når du holder kontroltasten nede og klikker på en HTML-attribut eller et tag på Windows. Tryk på Kommando+klik på macOS for den samme handling. Dette eliminerer behovet for at søge efter placeringen manuelt.
Denne tilstand er distraktionsfri. Det gør det nemmere for udviklere at fokusere helt på kode ved at skjule knapper og værktøjslinjer. Aktiver denne tilstand ved at bruge Ctrl+KZ -genvejen på Windows og Cmd+KZ på Mac. Alternativt kan du gå til Vis og derefter Udseende . Slå Zen-tilstand til her.
Dette er en meget brugt funktion i VS Code og er især nyttig for begyndere. Den repræsenterer enhver konfiguration, genvej og funktionalitet og er i form af en liste.
Alt du skal gøre er at skrive, hvad du vil have gjort i kommandopaletten. Du vil modtage forskellige kommandoer til at hjælpe dig.
For at få adgang til kommandopaletten skal du bruge genvejen Ctrl+Shift+P til Windows. Mac-genvejen er Cmd+Shift+P .
Hvis der er tekst, du skal bruge i de aktuelle projektfiler, kan du få adgang til den ved at klikke på søgeikonet i sidebjælken. Alternativt kan du bruge Ctrl+Shift+F -genvejen på Windows eller Cmd+Shift+F på Mac.
Når du holder tilbagetasten nede for at slette et ord, kan du ved et uheld slette andre dele. For at begrænse sletningen til det forrige ord skal du bruge genvejen Ctrl+Backspace på Windows eller Cmd+Backspace på Mac.
Under udviklingen skal programmører nogle gange kopiere og indsætte linjer til andre projektdele. Små ændringer kan derefter foretages på ledningerne efter behov. En tastaturgenvej er en god måde at fremskynde denne proces, især hvis du gør dette regelmæssigt.
Windows-genvejen er Shift+alt+op eller Shift+alt+ned . For Mac er genvejen Opt+shift+up eller Opt+shift+down .
Hvis du håndterer et kæmpe HTML-projekt med mange filer, kan det blive frustrerende, hvis du ved et uheld lukker en fane. Heldigvis kan du bruge en genvej til at åbne den sidste lukkede fane i VS Code
For at genåbne en lukket editor skal du bruge Ctrl+Shift+T -genvejen på Windows eller Cmd+Shift+T på Mac. Du kan åbne flere lukkede faner ved hjælp af denne genvej.
Mange genveje gør det relativt nemmere at bruge VS-kode. Selvom der er flere muligheder end hvad der er i artiklen, er ovenstående nogle af de mest almindelige, som begyndere og erfarne brugere kan finde nyttige. Med VS Codes popularitet kan det gøre det sjovere at udnytte alle funktionerne. Vælg genveje, som du almindeligvis bruger til at opfange kodningshastigheden.
Dernæst skal du lære, hvordan du sammenligner to filer i VS Code .
Sp: Kan HTML-genveje tilpasses i VS-kode?
A: Ja. Du kan tilpasse HTML-genveje i VS Code ved at ændre dine bruger- eller arbejdsområdeindstillinger.
Q: Kan jeg oprette mine egne tilpassede HTML-genveje i VS-kode?
A: Ja. Du kan oprette tilpassede HTML-uddrag eller genveje i VS-kode ved at definere dem i bruger- eller arbejdsområdeindstillinger. Dette giver dig mulighed for at oprette genveje til ofte brugte kodemønstre eller brugerdefinerede elementer.
Her finder du de 10 bedste tastaturgenveje i Windows 10, som kan hjælpe dig i arbejdet, skolen og mere. Læs videre for at lære, hvordan du bruger dem effektivt.
Når du arbejder væk fra dit skrivebord, kan du få adgang til din pc ved hjælp af Windows Remote Desktop Connection. Denne guide hjælper dig med at aktivere og konfigurere indgående fjernskrivebordsforbindelser.
Opdag hvordan du tilpasser museindstillinger i Windows 10 for optimal brugeroplevelse. Juster kontrolfunktioner og hastighed effektivt.
Når du installerer en printer, bør din Windows 10-pc registrere din printer automatisk; trådløst på dit hjemmenetværk, eller tilsluttet printeren direkte til
Lær, hvordan du ændrer din standard Google-konto, og nyd nemheden ved at logge på én enkelt konto. Find hurtigt svar her!
Windows 10 indeholder flere mekanismer til at lære om hardware og software i dit system. For at få de mest detaljerede oplysninger, skal du bruge System Information-værktøjet.
Følg denne guide til, hvordan du ændrer din baggrund og får dit skrivebord til at se positivt unikt ud på Windows 11. Oplev tilpasningsmuligheder for at gøre din Windows 11 unik.
Printere er den perfekte måde at oprette fysiske versioner af elektroniske kvitteringer, fakturaer, formularer, breve og meget mere. Lær hvordan du annullerer udskriftsjobs effektivt.
Denne blog hjælper læsere med at deaktivere Copilot-funktionen på Windows, hvis de ikke ønsker at bruge AI-modellen.
Hvis du vil have Boogie Down Emote In Fortnite Gratis, så skal du aktivere et ekstra lag af beskyttelse, altså 2F-godkendelse. Læs dette for at vide, hvordan du gør det!
