VSCode: Extensions Emmet Shortcuts
Install essential extensions, use Emmet abbreviations to write HTML and CSS instantly, and learn keyboard shortcuts that speed up editing.
VSCode: Extensions Emmet Shortcuts is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why VSCode?
Visual Studio Code is the most popular code editor for frontend development. It's free, open-source, fast, and has a massive extension ecosystem. Most frontend teams standardise on it.
Essential Extensions
Must-have extensions for frontend development: ESLint (inline linting), Prettier (auto-formatting), GitLens (git blame inline), Path Intellisense (autocomplete file paths), Auto Rename Tag (rename paired HTML tags).
Language-Specific Extensions
For TypeScript: TypeScript and JavaScript Language Features (built-in). For React: ES7+ React/Redux snippets. For Vue: Volar (official). For Tailwind: Tailwind CSS IntelliSense.
What Is Emmet?
Emmet is built into VSCode. Type an abbreviation and press Tab to expand it into full HTML or CSS. It dramatically speeds up writing markup.
<!-- 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>Common Emmet Abbreviations
Learn these Emmet shortcuts: ! → HTML boilerplate, div.container → div with class, ul>li*5 → list with 5 items, input:email → email input, form:post → form with method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Essential Keyboard Shortcuts
The shortcuts that save the most time: Ctrl/Cmd+P (quick file open), Ctrl/Cmd+Shift+P (command palette), Alt+Click (multi-cursor), Ctrl/Cmd+D (select next occurrence), Ctrl/Cmd+/ (toggle comment).
Multi-Cursor Editing
Alt+Click adds cursors. Ctrl+Alt+Up/Down adds cursors above/below. Ctrl+D selects the next occurrence of the selection. With multiple cursors, all edits happen simultaneously — great for renaming variables in small scopes.
Integrated Terminal
Open the terminal inside VSCode with Ctrl+` (backtick). You can split it to run the dev server in one pane and run tests in another without leaving the editor.
Workspace Settings
Create a .vscode/settings.json file in your project to set project-specific settings that override user settings. Commit this file so all teammates get the same experience: format on save, tab size, ruler columns.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense and Auto-imports
VSCode's IntelliSense provides autocomplete, parameter hints, and hover documentation. For TypeScript projects, it also auto-imports symbols when you accept a completion — no manual import needed.
Go to Definition and References
Ctrl+Click (or F12) on any symbol to jump to its definition. Shift+F12 shows all references. Ctrl+Shift+F searches across all files. These are indispensable for navigating large codebases.
Problems Panel
The Problems panel (Ctrl+Shift+M) lists all ESLint and TypeScript errors and warnings across open files. It's the fastest way to see what needs fixing before committing.
Quick Check
What does the Emmet abbreviation ul>li*3 expand to in VSCode?
Recap: VSCode Workflow
Install ESLint, Prettier, and language-specific extensions. Use Emmet to write HTML/CSS fast. Learn the keyboard shortcuts (Cmd+P, Cmd+Shift+P, Cmd+D). Set formatOnSave in .vscode/settings.json. Use multi-cursor editing for repetitive changes. Use Go to Definition to navigate code.
Frequently asked questions
Is the “VSCode: Extensions Emmet Shortcuts” lesson free?
Yes — the full text of “VSCode: Extensions Emmet Shortcuts” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “VSCode: Extensions Emmet Shortcuts”?
Install essential extensions, use Emmet abbreviations to write HTML and CSS instantly, and learn keyboard shortcuts that speed up editing. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “VSCode: Extensions Emmet Shortcuts” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Chrome DevTools: Elements Console Network
- VSCode: Extensions Emmet Shortcuts
- Prettier and ESLint Setup
- Browser Compatibility and caniuse.com