De beste VS Code HTML-snarveiene

Visual Studio Code (VS Code) tilbyr mange verdifulle funksjoner og snarveier for å forenkle HTML-utvikling. Disse funksjonene er nyttige og lar utviklere bruke mindre tid på å skrive kode. Selv om du kanskje ikke bruker alle de tilgjengelige snarveiene, kan det gå langt å lære de viktigste. Denne artikkelen dekker noen av de mest praktiske snarveiene du bør vurdere ved HTML-koding.

Emmet-forkortelser

VS Code støtter Emmet. Dette verktøyet gjør det enklere å skrive CSS- og HTML-kode gjennom snarveier. Den grunnleggende HTML-strukturen utvides hvis du skriver et utropstegn (!) og deretter trykker Tab.

Emmet introduserer utvidelsesmuligheter som reduserer tiden det tar å kode ved hjelp av HTML i Visual Studio Code. Du kan bruke dette i andre redaktører også. Å skrive stenografiuttrykk resulterer i komplette strukturer i HTML.

• Grunnleggende Emmet-forkortelser : Disse forkortelsene utvider noen ofte brukte elementer. Hvis du skriver div og deretter trykker Tab utvides til , mens p utvides til

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

• Nestede elementer : > kan brukes til å spesifisere underordnede elementer. For eksempel utvides div>h1 til , og skaper egentlig et element med

  element innenfor.

• Multiplikasjon : Multiplikasjon genererer flere elementer. Å legge til *3 til en ordnet liste genererer en liste med tre elementer.
• Attributter : Legg til attributter til HTML-elementer innenfor hakeparenteser. For eksempel blir [href=”#”] , og skaper et ankerelement med et href-attributt.
• CSS-lignende syntaks : Syntaksen er inspirert av CSS-velgere, noe som gjør den kjent og intuitiv for nettutviklere.
• Matematiske uttrykk : Du kan utføre noen grunnleggende matematiske operasjoner i forkortelser. For eksempel vil div>ul>li.item$*3 utvides til en

  element som inneholder en ordnet liste med tre listeelementer med klassenavn item1, item2 og item3.

Forkortelser utvides ved å skrive og deretter trykke på Tab- knappen. Hvis det er et par gyldige forklaringer for forkortelsen din, kan du bla gjennom dem ved å trykke på Tab- alternativet igjen. Emmet-forkortelser er ikke spesifikke for VS-kode. Du kan bruke dem i andre redaktører som støtter Emmet.

Tag-innpakning

Velg en linje eller kommando, og trykk deretter Ctrl+Shift+G hvis du bruker Linux eller Windows. Hvis du bruker Mac, bruk Cmd+Shift+G . Denne snarveien omslutter innholdet som er valgt med en HTML-tag.

Dette er en praktisk funksjon i VS Code. Det er nyttig når du må omslutte innholdet med tagger eller når du trenger å strukturere koden. Valget kan være en enkelt linje, flere linjer eller en kodeblokk.

Et annet alternativ er å høyreklikke den valgte koden og deretter velge Wrap med forkortelse i kontekstmenyen. Når du utløser kommandoen for taggbryting, kommer en melding der du kan velge ønsket HTML-tagnavn. Hvis du skriver inn div , for eksempel, a

element omslutter den valgte koden.

Tag-innpakning hjelper til med markering og strukturering av kode uten å manuelt skrive inn åpnings- og lukketaggene. Dette sparer mye tid og reduserer forekomsten av syntaksfeil.

Formatering

Formatering av HTML-kode er en god måte å opprettholde konsistens og lesbarhet i prosjekter. I VS Code lar innebygde formateringsalternativer handlingen skje automatisk i HTML etter forhåndsdefinerte regler.

Hurtigtasten som brukes til å formatere HTML er Shift+Alt+F for Windows og Linux. Shift+Option+F fungerer på macOS. 

Snarveien kan formatere et helt HTML-dokument eller en del av koden. Når du trykker på den, brukes formateringsreglene. Innrykksavstand og linjeskift justeres deretter.

Du kan også automatisk formatere kode i VS-kode .

Kommenterer

Du kan kommentere eller fjerne kommentarer enten på en enkelt linje eller på flere kodelinjer som er valgt samtidig. Hvis en kommentar allerede eksisterer, fjerner snarveien kommentaren, og hvis den ikke er kommentert, legges kommentarer til. Kommentarer i HTML er omsluttet av tagger.

Kodenavigering

Dette refererer til kapasiteten til å flytte mellom de forskjellige delene av kodebasen eller hoppe direkte til definisjoner i HTML-attributtene eller -taggene. Bruke Ctrl+]- alternativet på Linux og Windows for å navigere gjennom tagger. Mac-brukere kan bruke Cmd+] for å gå til elementets avsluttende tag. For å hoppe til åpningstaggen, trykk Ctrl+[ for Windows og Linux eller Cmd +[ for Mac.

For å hoppe til definisjonen av et attributt eller tag, bruk F12- tasten. Den identifiserer kodebasens tilsvarende lukke- eller åpningstag for å finne riktig plassering.

Du vil fortsatt få tilgang til definisjonen når du holder kontrolltasten nede og klikker på et HTML-attributt eller -tag på Windows. Trykk Kommando+klikk på macOS for samme handling. Dette eliminerer behovet for å søke etter stedet manuelt.

Zen-modus

Denne modusen er distraksjonsfri. Det gjør det lettere for utviklere å fokusere helt på kode ved å skjule knapper og verktøylinjer. Aktiver denne modusen ved å bruke Ctrl+KZ- snarveien på Windows og Cmd+KZ på Mac. Alternativt kan du gå til Vis og deretter Utseende . Slå på Zen-modus her.

Kommandopalett

Dette er en mye brukt funksjon i VS Code og er spesielt nyttig for nybegynnere. Den representerer hver konfigurasjon, snarvei og funksjonalitet og er i form av en liste.

Alt du trenger å gjøre er å skrive inn det du vil ha gjort i kommandopaletten. Du vil motta forskjellige kommandoer for å hjelpe deg.

For å få tilgang til kommandopaletten , bruk Ctrl+Shift+P- snarveien for Windows. Mac-snarveien er Cmd+Shift+P .

Søk etter filer

Hvis det er tekst du trenger i de gjeldende prosjektfilene, kan du få tilgang til den ved å klikke på søkeikonet i sidefeltet. Alternativt kan du bruke Ctrl+Shift+F- snarveien på Windows eller Cmd+Shift+F på Mac.

Slett det forrige ordet

Når du holder nede på tilbaketasten for å slette et ord, kan du ved et uhell slette andre deler. For å begrense slettingen til forrige ord, bruk Ctrl+Backspace- snarveien på Windows eller Cmd+Backspace på Mac.

Kopier linje

Under utviklingen trenger programmerere noen ganger å kopiere og lime inn linjer til andre prosjektdeler. Små endringer kan deretter gjøres på linjene etter behov. En hurtigtast er en god måte å fremskynde denne prosessen, spesielt hvis du gjør dette regelmessig.

Windows-snarveien er Shift+alt+opp eller Shift+alt+ned . For Mac er snarveien Opt+shift+up eller Opt+shift+down .

Åpne lukket redaktør på nytt

Hvis du håndterer et stort HTML-prosjekt med mange filer, kan det bli frustrerende hvis du ved et uhell lukker en fane. Heldigvis kan du bruke en snarvei for å åpne den siste lukkede fanen i VS Code

For å åpne et lukket redigeringsprogram igjen, bruk Ctrl+Shift+T- snarveien på Windows eller Cmd+Shift+T på Mac. Du kan åpne flere lukkede faner ved å bruke denne snarveien.

Akselerer koding med HTML-snarveier

Mange snarveier gjør bruk av VS-kode relativt enklere. Selv om det er flere alternativer enn det som står i artikkelen, er de ovennevnte noen av de vanligste som nybegynnere og erfarne brukere kan finne nyttige. Med VS Codes popularitet kan det å dra nytte av alle funksjonene gjøre det morsommere. Velg snarveier som du vanligvis bruker for å få opp kodehastigheten.

Deretter bør du lære hvordan du sammenligner to filer i VS Code .

Vanlige spørsmål

Spørsmål: Kan HTML-snarveier tilpasses i VS-kode?

A: Ja. Du kan tilpasse HTML-snarveier i VS Code ved å endre bruker- eller arbeidsområdeinnstillingene.

Spørsmål: Kan jeg lage mine egne tilpassede HTML-snarveier i VS-kode?

A: Ja. Du kan lage egendefinerte HTML-snutter eller snarveier i VS-kode ved å definere dem i bruker- eller arbeidsområdeinnstillinger. Dette lar deg lage snarveier for ofte brukte kodemønstre eller tilpassede elementer.