Opciones avanzadas de VS Code¶

Al inicio de esta web se recomendaba Visual Studio Code como el editor más adecuado para diseño web. En este documento veremos cómo podemos utilizarlo y enriquecerlo para facilitarnos esta tarea de diseño y maquetación de contenidos.

1. Algunas extensiones útiles¶

Una de los principales puntos fuertes que tiene Visual Studio Code es la posibilidad de ampliar sus funcionalidades mediante la instalación de extensiones, a través del correspondiente icono de la barra izquierda de navegación.

A continuación vamos a comentar algunas extensiones que pueden sernos de utilidad para el diseño y prueba de sitios web.

1.1. Live Server¶

La extensión Live Server permite poner en marcha un sencillo servidor web local para probar nuestras webs. Entre otras cosas, tiene la característica de la recarga automática, con lo que cualquier cambio que hagamos en el diseño o contenido de nuestras páginas será recargado de inmediato.

Una vez instalada la extensión, para ponerla en marcha simplemente basta con hacer clic derecho en la página que queramos cargar y elegir la opción de Open with Live Server en el menú que aparecerá.

La página elegida se abrirá en nuestro navegador predeterminado, y cualquier cambio que hagamos en el código se actualizará automáticamente. Además, podemos ver debajo de la opción de menú anterior otra para detener el servidor en cualquier momento (Stop Live Server).

1.2. HTML CSS Support¶

La extensión HTML CSS Support añade cierto auto-completado de código en nuestras páginas, a través del estilo CSS que tengamos enlazado. Por ejemplo, si nuestro CSS define ciertos selectores de clase o de id, esta extensión nos permite añadir fácilmente estos selectores en nuestro código, sin necesidad de escribirlos o recordarlos de cero.

2. Ayudas a la maquetación¶

Además, el propio Visual Studio Code incorpora ciertas ayudas que nos serán muy útiles para rellenar de contenido nuestras webs. Veamos a continuación algunas de las más relevantes.

2.1. Generación de la plantilla HTML¶

Como primer truco, si creamos de cero un documento HTML en Visual Studio Code, basta con que escribamos ! y pulsemos Intro para que nos rellene automáticamente la plantilla general de contenido de (casi) cualquier página:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

A partir de aquí, ya podemos modificar el título de la página, añadir estilos CSS y el contenido.

2.2. Generación de contenido de prueba¶

Uno de los principales quebraderos de cabeza de un diseñador web cuando está creando una página es añadirle contenido para ver cómo se modifican los tamaños, colores. Cuesta pensar en un párrafo largo, por ejemplo, que poner dentro de un div o una celda de una tabla para ver cómo queda.

Uno de los recursos más habituales es acudir al conocido Lorem ipsum, un texto intrascendente que se ha popularizado entre los diseñadores para poblar de contenido sus diseños mientras los están puliendo. Podemos ver un ejemplo en esta web que genera párrafos o frases de la longitud que le indiquemos. Bastaría con copiar y pegar ese contenido a nuestra web.

Sin embargo, Visual Studio Code nos lo pone aún más fácil, y simplemente escribiendo la instrucción loremX (siendo X la cantidad de palabras a generar), ya genera dicho contenido en el lugar donde hemos escrito la instrucción. Por ejemplo, si queremos un párrafo de 30 palabras basta con escribir lorem30 y pulsar Intro.

2.3. Generación de estructuras HTML¶

Otro quebradero de cabeza consiste en maquetar a mano una estructura HTML relativamente compleja, como por ejemplo una tabla de 10 filas y 5 columnas, o una lista de 20 items. Nuevamente, Visual Studio Code viene a nuestro rescate a través del plugin Emmet.

Este plugin (ya incorporado en Visual Studio Code) permite definir una especie de pseudo-instrucciones que automáticamente se traducen en código HTML.

La sintaxis básica que se utiliza es la siguiente:

Cada etiqueta a generar se representa con su nombre (table, p, section...)
Para indicar que queremos una subetiqueta dentro de una etiqueta contenedora, usamos el símbolo >. Por ejemplo para indicar que queremos una fila dentro de una tabla usaremos table>tr
Para indicar que queremos etiquetas contiguas (una a continuación de otra) usamos +. Por ejemplo h1+p indica que queremos un párrafo tras un h1.
Para indicar la cantidad de elementos de una etiqueta, multiplicamos dicha etiqueta por un valor. Por ejemplo, una tabla con 4 filas se puede representar como table>tr*4
Para salir un nivel afuera en la jerarquía (volver a la etiqueta contenedora) usamos el símbolo ^
Para indicar la cantidad de un conjunto de elementos compuesto lo encerramos entre paréntesis y lo multiplicamos por una cantidad
Para indicar una clase en una etiqueta, se le asocia separada por un punto. Lo mismo ocurre con el id y la almohadilla

Por ejemplo, así generaríamos una tabla de 3 filas, cada una conteniendo 4 columnas:

table>(tr>td*4)*3

Y así generaríamos un div con id="contenedor" con tres párrafos de clase "miclase" dentro

div#contenedor>p.miclase*3

Juntándolo con lo anterior, podemos dejar también los párrafos rellenos con un contenido de 20 palabras al azar, de este modo.

div#contenedor>p.miclase*3>lorem20

Importante

No incluir espacios en medio de la sintaxis. Al pulsar Intro tras la definición de la instrucción, se generará el contenido automáticamente. Si, mientras estamos escribiendo la expresión hacemos clic con el ratón donde pone Emmet abbreviation (en el pequeño popup que se muestra junto al cursor) veremos una previsualización de lo que se va a generar.

También es importante tener en cuenta que el contenido Emmet hay que escribirlo (no sirve copiarlo y pegarlo de otro lugar) para que se active.

Podéis consultar más información sobre las posibilidades que ofrece Emmet en su web oficial.