VSCode: extensiones, Emmet y atajos
Instale extensiones esenciales, use abreviaturas de Emmet para escribir HTML y CSS al instante y aprenda atajos de teclado que agilizan la edición.
VSCode: extensiones, Emmet y atajos es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Por qué VSCode?
Visual Studio Code es el editor de código más popular para el desarrollo frontend. Es gratuito, de código abierto, rápido y cuenta con un ecosistema enorme de extensiones. La mayoría de los equipos frontend lo utilizan como estándar.
Extensiones esenciales
Extensiones imprescindibles para el desarrollo frontend: ESLint (análisis integrado), Prettier (formateo automático), GitLens (git blame en línea), Path Intellisense (autocompletado de rutas de archivos) y Auto Rename Tag (cambiar el nombre de etiquetas HTML emparejadas).
Extensiones específicas del lenguaje
Para TypeScript: TypeScript and JavaScript Language Features (integrada). Para React: ES7+ React/Redux snippets. Para Vue: Volar (oficial). Para Tailwind: Tailwind CSS IntelliSense.
¿Qué es Emmet?
Emmet está integrado en VSCode. Escriba una abreviatura y pulse Tab para expandirla a HTML o CSS completo. Esto acelera enormemente la escritura de marcado.
<!-- 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>Abreviaturas comunes de Emmet
Aprenda estos atajos de Emmet: ! → plantilla básica de HTML, div.container → div con una clase, ul>li*5 → lista con 5 elementos, input:email → campo de entrada de correo electrónico y form:post → formulario con method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Atajos de teclado esenciales
Los atajos que más tiempo ahorran: Ctrl/Cmd+P (abrir archivos rápidamente), Ctrl/Cmd+Shift+P (paleta de comandos), Alt+Click (multicursor), Ctrl/Cmd+D (seleccionar la siguiente coincidencia) y Ctrl/Cmd+/ (activar o desactivar comentarios).
Edición con varios cursores
Alt+Click añade cursores. Ctrl+Alt+Arriba/Abajo añade cursores arriba o abajo. Ctrl+D selecciona la siguiente coincidencia de la selección. Con varios cursores, todas las ediciones se realizan simultáneamente, lo que resulta ideal para cambiar el nombre de variables en ámbitos pequeños.
Terminal integrado
Abra el terminal dentro de VSCode con Ctrl+` (acento grave). Puede dividirlo para ejecutar el servidor de desarrollo en un panel y las pruebas en otro sin salir del editor.
Configuración del espacio de trabajo
Cree un archivo .vscode/settings.json en su proyecto para establecer configuraciones específicas del proyecto que sobrescriban las del usuario. Confirme este archivo en el repositorio para que todos los miembros del equipo tengan la misma experiencia: formateo al guardar, tamaño de tabulación y columnas de la regla.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense e importaciones automáticas
IntelliSense de VSCode proporciona autocompletado, sugerencias de parámetros y documentación al pasar el cursor. En proyectos de TypeScript, también importa automáticamente los símbolos cuando acepta una sugerencia, sin necesidad de realizar importaciones manuales.
Ir a la definición y ver referencias
Haga Ctrl+Click (o pulse F12) sobre cualquier símbolo para saltar a su definición. Shift+F12 muestra todas las referencias. Ctrl+Shift+F busca en todos los archivos. Estas funciones son indispensables para navegar por bases de código grandes.
Panel Problems
El panel Problems (Ctrl+Shift+M) muestra todos los errores y advertencias de ESLint y TypeScript en los archivos abiertos. Es la forma más rápida de ver qué debe corregirse antes de confirmar los cambios.
Comprobación rápida
¿A qué se expande la abreviatura de Emmet ul>li*3 en VSCode?
Resumen: flujo de trabajo en VSCode
Instale ESLint, Prettier y las extensiones específicas del lenguaje. Utilice Emmet para escribir HTML/CSS rápidamente. Aprenda los atajos de teclado (Cmd+P, Cmd+Shift+P y Cmd+D). Configure formatOnSave en .vscode/settings.json. Utilice la edición con varios cursores para cambios repetitivos. Use Ir a la definición para navegar por el código.
Preguntas frecuentes
¿La lección «VSCode: extensiones, Emmet y atajos» es gratis?
Sí — el texto completo de «VSCode: extensiones, Emmet y atajos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «VSCode: extensiones, Emmet y atajos»?
Instale extensiones esenciales, use abreviaturas de Emmet para escribir HTML y CSS al instante y aprenda atajos de teclado que agilizan la edición. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «VSCode: extensiones, Emmet y atajos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Chrome DevTools: Elements, Console y Network
- VSCode: extensiones, Emmet y atajos
- Configuración de Prettier y ESLint
- Compatibilidad de navegadores y caniuse.com