✂️ Lesson 10 of 40 Productivity Beginner

Snippets & Emmet Abbreviations

Snippets and Emmet let you write boilerplate code in a fraction of the keystrokes. Master these tools and your typing speed becomes nearly irrelevant.

25% complete

1Using Built-In Snippets

Type a snippet prefix and press Tab (or select from IntelliSense). VS Code ships with snippets for most languages. Try for in JavaScript, def in Python, or ctor in C#. Use Tab to jump between editable placeholders.

2Creating Custom Snippets

Open File › Preferences › Configure Snippets and choose a language. Snippets use a JSON format with $1, $2 tab stops and $TM_FILENAME variables:

typescript.json — custom snippet

"React FC": {
  "prefix": "rfc",
  "body": [
    "import React from 'react';",
    "",
    "const $1: React.FC = () => {",
    "  return $2
;",
    "};",
    "",
    "export default $1;"
  ]
}

3Emmet for HTML & CSS

Emmet is built into VS Code for HTML and CSS files. Type an abbreviation and press Tab to expand it. Examples:

ul>li*5 → a <ul> with 5 <li> items
div.container>h1+p → div with a heading and paragraph
a[href='#']{Click me} → anchor with text
m0-a in CSS → margin: 0 auto

4Emmet in JSX / TSX

Enable Emmet in React files by adding this to your settings:

settings.json

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "typescript": "typescriptreact"
}

5Tab Stops & Mirror Editing

Inside a snippet, $1, $2… are tab stops. ${1:defaultText} gives a stop a default value. If you use the same variable name twice it becomes a mirror — editing one updates all instances simultaneously.

💡 Tip: Install the ES7+ React/Redux/React-Native snippets extension for a complete library of React snippets like rafce, useState, and more.