Tema 6 · Emmet & Snippets

6. Maestría en Emmet y Creación de Snippets Personalizados por Lenguaje

Genera estructuras HTML5 y CSS3 completas con una sola línea de Emmet y programa tus propias plantillas de código con tabstops.

5. Multicursores (Ctrl+D), Selección en Columna y Búsqueda con Regex 7. Extensiones Imprescindibles para Desarrollo Web (HTML, CSS, JS, PHP y SQL)

¿Qué es Emmet y Por Qué Viene Integrado de Fábrica en VS Code?

Emmet es un motor de abreviaturas basado en selectores CSS que viene preinstalado en Visual Studio Code. Te permite escribir una fórmula compacta de pocos caracteres y, al presionar Tab o Enter, expandirla en decenas de líneas de HTML5 o propiedades CSS perfectamente cerradas e indentadas.

Operadores Esenciales de Emmet para HTML y CSS

Abreviatura Emmet + Tab Operador Usado Resultado Expandido
! Plantilla base HTML5 Estructura completa <!DOCTYPE html> con head, meta viewport y body.
div.card#principal Clase (.) e ID (#) <div class="card" id="principal"></div>
nav>ul>li*3>a{Item $} Hijo (>), Multiplicador (*), Texto ({}) y Numerador ($) Lista anidada con 3 enlaces numerados: Item 1, Item 2, Item 3.
header+main+footer Hermano (+) Tres etiquetas al mismo nivel jerárquico una debajo de la otra.
df / jcc / aic (en CSS) Abreviaturas rápidas CSS display: flex; / justify-content: center; / align-items: center;
🛠️ User Snippets (Fragmentos Propios): Para PHP, JavaScript o SQL, puedes crear tus propias abreviaturas abriendo Ctrl+Shift+P ➔ Snippets: Configure Snippets. Usa $1, $2 para definir los puntos donde saltará el cursor al pulsar Tab.

⚡ Archivo de Snippets Personalizados para PHP 8.3 (php.json)

Plantillas listas para instalar en VS Code que generan encabezados estrictos, bloques try-catch con PDO y depuración rápida.

php-custom-snippets.json
Solo lectura 
{
  // Abre Ctrl+Shift+P -> "Snippets: Configure Snippets" -> selecciona "php.json" y pega esto:

  "Encabezado PHP 8.3 Estricto": {
    "prefix": "phpstrict",
    "body": [
      "<?php",
      "declare(strict_types=1);",
      "",
      "namespace ${1:App\\Controllers};",
      "",
      "final class ${2:NombreClase}",
      "{",
      "    public function ${3:index}(): void",
      "    {",
      "        $0",
      "    }",
      "}"
    ],
    "description": "Genera la estructura base de una clase en PHP 8.3 con strict_types"
  },

  "Consulta Segura PDO Prepared Statement": {
    "prefix": "pdoselect",
    "body": [
      "\\$stmt = \\$pdo->prepare('SELECT ${1:*} FROM ${2:tabla} WHERE ${3:id} = :${3:id} LIMIT 1');",
      "\\$stmt->execute(['${3:id}' => \\$${4:valor}]);",
      "\\$${5:resultado} = \\$stmt->fetch(\\PDO::FETCH_ASSOC);",
      "$0"
    ],
    "description": "Prepara y ejecuta una consulta PDO segura contra inyección SQL"
  }
}
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
En un archivo HTML en VS Code, ¿qué estructura genera la abreviatura de Emmet: "ul.menu>li.item*3>a{Opción $}" al presionar Tab?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Visual Studio Code & GitHub Copilot Profesional y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.