C.F.G.S.
DESARROLLO DE APLICACIONES MULTIPLATAFORMA
MÓDULO: Entornos de Desarrollo
Recurso de Ayuda
Visual Studio Code (Emmet)
Contenido
VISUAL STUDIO CODE ...................................................................................................................1
1. Introducción .........................................................................................................................1
2. Características de Visual Studio Code ...................................................................................1
3. Instalación ............................................................................................................................2
4. Visual Studio Code para la Web ............................................................................................3
5. Mejores plugins para Visual Studio Code ..............................................................................3
6. Ahorra tiempo al escribir código HTML en Visual Studio Code utilizando Emmet .................4
6.1. Abreviaturas .....................................................................................................................6
6.2. Operadores principales: ....................................................................................................7
VISUAL STUDIO CODE
1. Introducción
Visual Studio Code es un editor de código fuente desarrollado por Microsoft para
Windows, Linux, macOS y Web. Incluye soporte para la depuración, control integrado
de Git, resaltado de sintaxis, finalización inteligente de código, fragmentos y
refactorización de código. También es personalizable, por lo que los usuarios pueden
cambiar el tema del editor, los atajos de teclado y las preferencias. Es gratuito y de
código abierto.
Es compatible con varios lenguajes de programación y un conjunto de características que
pueden o no estar disponibles para un lenguaje dado.
Se puede extender a través de complementos, disponible a través de un repositorio
central. Esto incluye adiciones al editor y soporte de lenguajes.
Para tener una idea de la popularidad de Visual Studio Code y la aceptación que ha tenido
en el mundo de desarrollo, podemos consultar datos. Según una encuesta realizada por
Stack Overflow a más de 80,000 desarrolladores en mayo del 2021, Visual Studio Code
es el entorno de desarrollo más usado y con mucha diferencia, un 71.06%. En la siguiente
ilustración, puedes ver el top 10.
2. Características de Visual Studio Code
VS Code tiene una gran variedad de características útiles para agilizar el trabajo, que lo
hacen el editor preferido por muchos (me incluyo) para trabajar los proyectos:
– Multiplataforma: Es una característica importante en cualquier aplicación y más
si trata de desarrollo. Visual Studio Code está disponible para Windows,
GNU/Linux y macOS.
1
– IntelliSense: Esta característica está relacionada con la edición de código,
autocompletado y resaltado de sintaxis, lo que permite ser más ágil a la hora de
escribir código. Como su nombre lo indica, proporciona sugerencias de código
y terminaciones inteligentes en base a los tipos de variables, funciones, etc. Con
la ayuda de extensiones se puede personalizar y conseguir un IntelliSense más
completo para cualquier lenguaje.
– Depuración: Visual Studio Code incluye la función de depuración que ayuda a
detectar errores en el código. De esta manera, nos evitamos tener que revisar
línea por línea. VS Code también es capaz de detectar pequeños errores de forma
automática antes de ejecutar el código o la depuración como tal.
– Uso del control de versiones: Visual Studio Code tiene compatibilidad con Git,
por lo que puedes revisar diferencias o lo que conocemos con git diff, organizar
archivos, realizar commits desde el editor, y hacer push y pull desde cualquier
servicio de gestión de código fuente (SMC). Los demás SMC están disponible por
medio de extensiones.
– Extensiones: Hasta ahora, he mencionado varias veces el término extensiones
porque es uno de los puntos fuertes. Visual Studio Code es un editor potente y en
gran parte por las extensiones. Las extensiones nos permiten personalizar y
agregar funcionalidad adicional de forma modular y aislada. Por ejemplo,
para programar en diferentes lenguajes, agregar nuevos temas al editor, y conectar
con otros servicios. Realmente las extensiones nos permiten tener una mejor
experiencia, y lo más importante, no afectan en el rendimiento del editor, ya que
se ejecutan en procesos independientes.
3. Instalación
En Windows siempre tenemos la opción tradicional de descargar el instalador y
ejecutarlo, pero con la línea de comandos podemos tener más agilidad. En Windows
podemos utilizar Chocolatey.
choco install vscode
Chocolatey es un gestor de paquetes e instalador de línea de comandos para software de
Windows. En caso de no tenerlo instalado, puedes hacerlo con las instrucciones del sitio
oficial chocolatey.org en la página install.
Para instalar VS Code en sistemas GNU/Linux, también hay varias alternativas. En
distribuciones basadas en Debian y Ubuntu, podemos descargar el paquete .deb e
instalarlo, también podemos hacer una instalación manual del repositorio y la clave con
ciertas instrucciones, y otra alternativa sencilla es la que te mostraré usando el gestor de
paquetes Snap.
sudo snap install code --classic
De la misma forma, en distribuciones basadas en RHEL, CentOS y Fedora tenemos las
mismas opciones para instalar VS Code, por supuesto que hay algunas diferencias, por
ejemplo, es un paquete .rpm en lugar de un .deb.
2
Finalmente, tanto en Windows como en GNU/Linux puedes abrir Visual Studio Code
localizando la aplicación desde la interfaz gráfica o ejecutando directamente desde la
línea de comandos:
4. Visual Studio Code para la Web
Visual Studio Code para la Web es una versión que no requiere instalación, dado
que se ejecuta completamente en el navegador web, permite ver de forma rápida los
repositorios de código fuente y realizar cambios en el código. Para usar Visual Studio
Code en la web, solo debes ingresar al siguiente enlace:
https://vscode.dev
VS Code para la Web tiene muchas características de VS Code Desktop como la
búsqueda, el autocompletado y el resaltado de sintaxis. También, soporta extensiones y
permite abrir repositorios directamente desde GitHub y Azure Repos, y por supuesto,
puedes trabajar con código alojado en el equipo local. Sin embargo, VS Code para la web
tiene algunas limitaciones en comparación con la versión de escritorio, no tiene una
terminal integrada, no es posible compilar o depurar código, y solo ciertas extensiones
están disponibles para ejecutarse en la versión web.
5. Mejores plugins para Visual Studio Code
Existen cientos de plugins o extensiones para VS Code y siempre se están desarrollando
más. La importancia o la utilidad dependerá de tu enfoque. A continuación, se muestran
algunos ejemplos de extensiones:
Error Lens.- Es una extensión que te mostrará alertas en tiempo real mientras trabajas
en tu proyecto de turno en el desarrollo web. Esta te permitirá reducir al máximo los
errores de tipeo.
IntelliSense for CSS.- Te genera recomendaciones en tu código HTML de las clases que
ya definiste previamente en tu archivo CSS. De esta forma asignarás las clases que desees
de una forma más rápida y eficiente.
3
JavaScript (ES6) code snippets.- Proporciona fragmentos de los códigos más usados en
JavaScript bajo el estándar ES6. Con esta extensión instalada solo debes escribir el atajo
y pulsar la tecla tab para que haga su magia y genere todo el código que desees.
Auto Rename Tag.- Permite cambiar el nombre de las etiquetas HTML de apertura y de
cierre con una sola edición. Este plug-in de VSCode también reduce los errores al cambiar
el nombre de las etiquetas.
Auto Close Tag añade automáticamente la etiqueta de cierre para HTML/XML,
exactamente como hacen otros IDEs, optimizando la velocidad de escritura de estos
lenguajes de programación.
Code Runner.- Permite ejecutar un fragmento de código desde VSCode y tiene soporte
para muchos lenguajes de programación.
GitLens.- Permite navegar rápidamente entre los cambios recientes realizados en el
código que estás trabajando, también puedes ver quién, por qué y cuándo se editó.
WakaTime.- Permite conocer las métricas, perspectivas y seguimiento del tiempo que
inviertes en tus proyectos. Es decir, te enseña la forma en que trabajas.
Python es una extensión de VSCode con un soporte amplio para Python, incluye
características como IntelliSense (Pylance), linting, depuración, navegación de código,
formateo de código, refactorización, exploración de variables, pruebas y más.
Activitus Bar es una herramienta bastante simple que traslada la barra de navegación
lateral, que viene por defecto a la parte inferior de la ventana, para aprovechar mejor el
espacio en el área de edición de código.
GitHub Copilot es tu nuevo asistente para generar código de forma autónoma, tú solo
tienes que escribir las primeras líneas de código y esta herramienta hará el resto.
Debugger for Java.- Es un depurador de Java ligero basado en el servidor de depuración
de Java. Funciona con el Soporte de idiomas para Java de Red Hat y permite depurar
nuestro código Java dentro de Visual Studio Code.
6. Ahorra tiempo al escribir código HTML en Visual Studio Code
utilizando Emmet
En muchas ocasiones tendrás que escribir código HTML a pelo, partiendo desde cero, es
una lata tener que abrir etiquetas, escribir texto, cerrarlas, etc. Con Emmet escribir HTML
se convierte en un placer.
Aunque puedes consultar toda la documentación sobre Emmet en su propia página web,
te cuento aquí lo más básico y algunos trucos interesantes para que te entre el gusanillo
de probarlo.
Emmet utiliza abreviaturas para ir generando elementos, en este tutorial veremos sólo
HTML, aunque también se lleva muy bien con CSS. Las abreviaturas son muy sencillas,
4
si escribes p y pulsas tabulador te va a crear las etiquetas de apertura y cierre de párrafo.
Esto por sí sólo no tiene demasiada gracia, pero si escribes:
ul>li*5 y das a tabulador
Te genera una lista no numerada con cinco elementos.
Ahora vas a montar un menú de navegación en un periquete sin tener que preocuparte de
abrir y cerrar etiquetas, copiar y pegar líneas, etc. Prueba con esto:
ul.navbar>(li.nav>a.menuitem)*5 y pulsas tabulador
Verás que te genera un código en el que sólo tienes que ir escribiendo el texto que te falta
e ir usando el tabulador para terminar de rellenar toda la información.
El punto se utiliza para asignar una clase a la etiqueta que la precede, de la misma
manera puedes usar la almohadilla # para asignar un id. Cómo ves la sintaxis viene
heredada de CSS así que te saldrá de manera muy natural.
Teclea html:5 y dale al tabulador.
5
Teclea p*5>lorem y tendrás cinco párrafos de texto para rellenar tus diseños de prueba.
6.1. Abreviaturas
El concepto es simple, tan solo con escribir el nombre del elemento HTML, Emmet producirá
el resto.
6
6.2. Operadores principales
Operador Hermanos: +
Usamos el operador + para colocar elementos cerca uno del otro, en el mismo
nivel:
Anidar elementos uno dentro del otro: >
Podemos usar el operador > para anidar elementos uno dentro del otro: Operador
Hijo: >
7
Si bien el código HTML producido por Emmet puede ser de utilidad, aún
tendríamos que completar parte del mismo para producir los resultados
esperados, como, por ejemplo:
<div class=”row”>Contenido</div>
Operador de atributo clase: .
Para especificar la clase (class) a la que pertenece el elemento.
Operador id: #
Para especificar el Id del elemento.
8
Texto: { }
Para escribir texto en el elemento.
Notación de atributos: [ attr ]
Para especificar cualquier otro atributo del elemento.
Multiplicación: *
Para definir cuántas veces se debe crear el elemento.
9
Numeración de elementos: $
Con el operador de multiplicación * puedes repetir elementos, pero con $ puedes
enumerarlos. Coloca el operador $ dentro del nombre del elemento, el nombre del
atributo o el valor del atributo para generar el número actual del elemento repetido.
Si necesitamos que los elementos se numeren de mayor a menor utilizaremos la
sintaxis ( @- ) después del caracter '$':
table>tr#fila$@-*5>td*2
Dentro de un texto podemos emplear el caracter '$' para numerar:
ul>li{Opción $}*10
10
Usaremos múltiples $$$ (para anteponer Ceros):
Subir de nivel: ^
Al utilizar el operador > Hijo, Emmet entra al subnivel del elemento solicitado
como en:
div>ul>li
dará como resultado:
<div>
<ul>
<li></li> <- nivel actual
</ul>
</div>
Sin embargo, si deseamos continuar la expresión en un nivel superior al nivel en
que termina la expresión podremos utilizar el comando ^ para subir al nivel
inmediato superior en la expresión, por ejemplo:
div>ul>li^div>h1
dará como resultado:
11
<div>
<ul>
<li></li> <-Nivel antes de ^
</ul>
<div> <-Nivel después de ^
<h1></h1>
</div>
</div>
Agrupar parte de una expresión con paréntesis
Podemos encerrar entre paréntesis ciertas partes de la expresión para tener un
determinado resultado:
Puede consultar todas las expresiones de Emmet en el: Sitio oficial
12
