VSCode: Udvidelser, Emmet og genveje
Installér vigtige udvidelser, brug Emmet-forkortelser til straks at skrive HTML og CSS, og lær tastaturgenveje, der gør redigeringen hurtigere.
VSCode: Udvidelser, Emmet og genveje er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvorfor VSCode?
Visual Studio Code er den mest populære kodeeditor til frontendudvikling. Den er gratis, har åben kildekode, er hurtig og har et enormt udvidelsesøkosystem. De fleste frontendteams vælger den som standard.
Vigtige udvidelser
Uundværlige udvidelser til frontendudvikling: ESLint (kodekontrol direkte i editoren), Prettier (automatisk formatering), GitLens (git blame direkte i editoren), Path Intellisense (automatisk fuldførelse af filstier) og Auto Rename Tag (omdøb matchende HTML-tags).
Sprogspecifikke udvidelser
Til TypeScript: TypeScript and JavaScript Language Features (indbygget). Til React: ES7+ React/Redux snippets. Til Vue: Volar (officiel). Til Tailwind: Tailwind CSS IntelliSense.
Hvad er Emmet?
Emmet er indbygget i VSCode. Skriv en forkortelse, og tryk på Tab for at udvide den til fuld HTML eller CSS. Det gør det markant hurtigere at skrive opmærkning.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>Almindelige Emmet-forkortelser
Lær disse Emmet-genveje: ! → HTML-grundskabelon, div.container → div med en klasse, ul>li*5 → liste med 5 elementer, input:email → input til e-mail, form:post → formular med method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Vigtige tastaturgenveje
De genveje, der sparer mest tid: Ctrl/Cmd+P (hurtig åbning af filer), Ctrl/Cmd+Shift+P (kommandopaletten), Alt+Click (flere markører), Ctrl/Cmd+D (vælg næste forekomst) og Ctrl/Cmd+/ (slå kommentar til eller fra).
Redigering med flere markører
Alt+klik tilføjer markører. Ctrl+Alt+Up/Down tilføjer markører ovenfor eller nedenfor. Ctrl+D vælger den næste forekomst af markeringen. Med flere markører sker alle redigeringer samtidig — praktisk til at omdøbe variabler i små omfang.
Integreret terminal
Åbn terminalen i VSCode med Ctrl+` (backtick). Du kan opdele den for at køre udviklingsserveren i én rude og køre test i en anden uden at forlade editoren.
Arbejdsområdets indstillinger
Opret en .vscode/settings.json-fil i dit projekt for at angive projektspecifikke indstillinger, der tilsidesætter brugerindstillingerne. Commit denne fil, så alle på teamet får den samme oplevelse: formatering ved lagring, tabulatorstørrelse og linealkolonner.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense og automatiske importer
VSCode's IntelliSense giver automatisk fuldførelse, parametertip og dokumentation ved markøren. I TypeScript-projekter importerer den også symboler automatisk, når du accepterer en fuldførelse — du behøver ikke tilføje importen manuelt.
Gå til definition og referencer
Ctrl+klik (eller F12) på et symbol for at gå til dets definition. Shift+F12 viser alle referencer. Ctrl+Shift+F søger på tværs af alle filer. De er uundværlige til at navigere i store kodebaser.
Problempanelet
Problempanelet (Ctrl+Shift+M) viser alle ESLint- og TypeScript-fejl og -advarsler på tværs af åbne filer. Det er den hurtigste måde at se, hvad der skal rettes, før du gemmer ændringerne i Git.
Hurtigt tjek
Hvad udvides Emmet-forkortelsen ul>li*3 til i VSCode?
Opsummering: VSCode-arbejdsgang
Installér ESLint, Prettier og sprogspecifikke udvidelser. Brug Emmet til hurtigt at skrive HTML/CSS. Lær tastaturgenvejene (Cmd+P, Cmd+Shift+P, Cmd+D). Angiv formatOnSave i .vscode/settings.json. Brug redigering med flere markører til gentagne ændringer. Brug Gå til definition til at navigere i koden.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “VSCode: Udvidelser, Emmet og genveje” gratis?
Ja — hele teksten til “VSCode: Udvidelser, Emmet og genveje” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “VSCode: Udvidelser, Emmet og genveje”?
Installér vigtige udvidelser, brug Emmet-forkortelser til straks at skrive HTML og CSS, og lær tastaturgenveje, der gør redigeringen hurtigere. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “VSCode: Udvidelser, Emmet og genveje”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Chrome DevTools: Elements, Console og Network
- VSCode: Udvidelser, Emmet og genveje
- Opsætning af Prettier og ESLint
- Browserkompatibilitet og caniuse.com