Qué son los snippets, cómo usar los integrados por lenguaje, crear los tuyos y nociones de Emmet para HTML y CSS.
Un snippet es una plantilla de texto que se inserta al escribir un prefijo y pulsar Tab (o al elegirlo desde IntelliSense).
VS Code incluye snippets por lenguaje (por ejemplo for, if en JavaScript; div, a en HTML); las extensiones añaden más.
Puedes crear snippets propios en «Configure User Snippets»: eliges el lenguaje y defines prefijo, cuerpo y descripción.
Emmet permite escribir abreviaturas (por ejemplo div.container>ul>li*3) que se expanden a HTML o CSS al pulsar Tab.
Plantillas que se expanden con un prefijo.
Un snippet tiene un nombre (prefijo) que escribes en el editor; al aparecer en el autocompletado y pulsar Tab (o Enter), se inserta un bloque de código con marcadores de posición donde puedes escribir. Por ejemplo en JavaScript, escribir «for» y aceptar el snippet «for» inserta un bucle for con variables y cuerpo listos para editar.
Por lenguaje.
Cada lenguaje (HTML, CSS, JavaScript, etc.) trae sus propios snippets. Escribe el prefijo (por ejemplo «cl» en CSS para «clear» o «div» en HTML) y cuando aparezca en la lista de sugerencias, Tab o Enter lo expande. Si no aparece, Ctrl+Space fuerza la lista de sugerencias.
User Snippets por lenguaje.
Abre la paleta de comandos y busca «Configure User Snippets» (o «Configurar fragmentos de usuario»). Elige el lenguaje (por ejemplo «html.json») y se abrirá un archivo JSON. Cada snippet tiene "nombre", "prefix" (lo que escribes), "body" (array de líneas; usa $1, $2 para posiciones del cursor y ${1:valor} para placeholder) y opcionalmente "description".
Abreviaturas para HTML y CSS.
Emmet viene integrado en VS Code para HTML y CSS. En un archivo .html puedes escribir «div.container>ul>li*3» y al pulsar Tab se expande a un div con clase container, un ul y tres li. O «a» y Tab para un enlace. En CSS, «m10» puede expandirse a «margin: 10px;». La documentación de Emmet lista todas las abreviaturas; es muy útil para maquetar rápido.
Qué son los snippets, cómo usar los integrados por lenguaje, crear los tuyos y nociones de Emmet para HTML y CSS.
Código del tema: snippets · Emmet
Plantillas que se expanden con un prefijo.
Un snippet tiene un nombre (prefijo) que escribes en el editor; al aparecer en el autocompletado y pulsar Tab (o Enter), se inserta un bloque de código con marcadores de posición donde puedes escribir. Por ejemplo en JavaScript, escribir «for» y aceptar el snippet «for» inserta un bucle for con variables y cuerpo listos para editar.
Por lenguaje.
Cada lenguaje (HTML, CSS, JavaScript, etc.) trae sus propios snippets. Escribe el prefijo (por ejemplo «cl» en CSS para «clear» o «div» en HTML) y cuando aparezca en la lista de sugerencias, Tab o Enter lo expande. Si no aparece, Ctrl+Space fuerza la lista de sugerencias.
User Snippets por lenguaje.
Abre la paleta de comandos y busca «Configure User Snippets» (o «Configurar fragmentos de usuario»). Elige el lenguaje (por ejemplo «html.json») y se abrirá un archivo JSON. Cada snippet tiene "nombre", "prefix" (lo que escribes), "body" (array de líneas; usa $1, $2 para posiciones del cursor y ${1:valor} para placeholder) y opcionalmente "description".
{
"Párrafo con clase": {
"prefix": "pc",
"body": "<p class=\"$1\">$2</p>",
"description": "Párrafo con atributo class"
}
}Abreviaturas para HTML y CSS.
Emmet viene integrado en VS Code para HTML y CSS. En un archivo .html puedes escribir «div.container>ul>li*3» y al pulsar Tab se expande a un div con clase container, un ul y tres li. O «a» y Tab para un enlace. En CSS, «m10» puede expandirse a «margin: 10px;». La documentación de Emmet lista todas las abreviaturas; es muy útil para maquetar rápido.