De bedste VS Code HTML-genveje

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.

Emmet forkortelser

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.

• Grundlæggende Emmet-forkortelser : Disse forkortelser udvider nogle almindeligt anvendte elementer. Hvis du skriver div og derefter trykker på Tab , udvides til , mens p udvides til

  . Hvis du skriver ul>li*3 , udvides den til en liste med tre elementer.

• Indlejrede elementer : > kan bruges til at angive underordnede elementer. For eksempel udvides div>h1 til , hvilket i det væsentlige skaber et element med

  element indeni.

• Multiplikation : Multiplikation genererer flere elementer. Tilføjelse af *3 til en ordnet liste genererer en liste med tre elementer.
• Attributter : Tilføj attributter til HTML-elementer inden for firkantede parenteser. For eksempel bliver [href="#"] til , hvilket skaber et ankerelement med en href-attribut.
• CSS-lignende syntaks : Syntaksen er inspireret af CSS-vælgere, hvilket gør den velkendt og intuitiv for webudviklere.
• Matematiske udtryk : Du kan udføre nogle grundlæggende matematiske operationer inde i forkortelser. For eksempel vil div>ul>li.item$*3 udvides til en

  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.

Tag indpakning

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

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 .

Kommenterer

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.

Kode navigation

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.

Zen-tilstand

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.

Kommandopalet

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 .

Søg filer

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.

Slet det forrige ord

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.

Kopiér linje

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 .

Åbn lukket editor igen

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.

Accelerer kodning med HTML-genveje

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 .

Ofte stillede spørgsmål

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.