Visual Studio Code (VSC)

VSC se ha vuelto uno de los favoritos, no sólo para los que desarrollan Frontend, sino para los programadores de otros lenguajes. Es un editor de código multiplataforma. Lo podemos llevar portable en una carpeta en nuestro disco duro. Para descargarlo en forma portable lo tenemos que hacer en formato ZIP.

Enlaces

Interfaz

Con Visual Studio Code, con una cuenta de GitHub puedes sincronizar. El comando Buscar y Reemplazar es muy útil.

Extensiones

Cuando pinchamos en alguna extensión, esta trae su propia página. Las extensiones que recomendamos son las siguientes:

  • Paquete de idioma (te sale por defecto) – Spanish Language.
  • Live Server: un servidor para pruebas.
  • Prettier – Code formatter: formatea el código de forma bonita.
  • ESLint: es un linter (herramienta que evalúa nuestro código y que nos crea ciertas ayudas).

Atajos de teclado

Los de Windows los encontraremos en la siguiente dirección:

Nota: no es necesario memorizar los atajos, con practicar con ellos es más que suficiente.

  • CTR + +: Aumenta visualización.
  • CTR + –: Disminuye visualización.
  • CTR + ñ: abre la Terminal de comandos (abre Powershel de Windows por defecto). Se puede cambiar la terminal por la que deseemos.
  • CTR + MAY + P: Mostrar todos los comandos.
  • CTR + P: Ir al archivo.
  • CTR + MAY + F: Buscar en archivos.
  • F5: Iniciar depuración.
  • CTR + ,: Configuración.
  • CTR + S: Guardar.

La manera correcta de abrir proyectos es abriendo carpetas. Visual Studio Code es una herramienta drag and drop, por lo que se puede arrastrar la carpeta.

Nota: para abrir un archivo de otro proyecto completamente distinto, es mejor abrir otra ventana de Visual Studio Code.

Atajos de teclado mas usuales

Los atajos de teclado que más vamos a utilizar son los siguientes:

  • SHIFT + ALT + FLECHA ARRIBA / ABAJO: duplica elementos.
  • ALT + FLECHA ARRIBA / ABJO: mueve elementos.
  • CTR + F: activa el buscador.
  • CTR + H: buscar y reemplazar.
  • CTR + ALT + FLECHA: edita múltiples filas. Es equivalente a ALT + CLIC. Se sale con la tecla de SCAPE
  • ALT + Z: deshacer cambios.

Cambiar la configuración

La ruta para ello es ARCHIVO > FILE > PREFERENCES > CONFIGURATION o bien CTR + ,.

Ajuste de linea de texto

El comando es:

  • ALT + Z

Terminal de comandos

VSC, por defecto toma la terminal de Windows. Vamos a configuración y escribimos en el buscador ‘Terminal.integrated.defaultprofile‘, aquí podemos cambiar que terminal queremos utilizar. Podemos tener varias terminales a la vez, haciendo clic en el icono de +.

Prettier Code

Para elegir nuestro formateador por defecto, debemos decirle a nuestro Visual Studio Code cual, para ello en la configuración escribimos:

  • defaultForm

Y nos aparecerá la pestaña que tenemos que cambiar con nuestro Prettier. También le tenemos que decir al VSC cuando actúa nuestro Prettier, para ello escribimos en la configuración

  • formatOn

Y tenemos que clicar

  • Format On Paste
  • Format On Save
  • Format On Type

Y formateará los códigos de HTML, CSS y Javascript.

Live Server

Es un servidor web local de desarrollo. Para levantar un servidor le damos al botón Go Live. La opción

  • liveServer.settings.donot

y hacemos clic en Donot Verify Tags, de esta manera, si hay algún problema con nuestro código, el servidor se apagará automáticamente. Existen multitud de alternativas, para configurarlas, vamos a nuestra configuración de liveServer.

Emmet

Es un plugin que nos hace una manera más fácil de escribir código HTML, Visual Studio Code ya lo tiene integrado. Su web oficial es https://docs.emmet.io/. En ella podemos ver toda la documentación acerca de Emmet. Veamos la sintaxis que tenemos que utilizar para escribir código con Emmet.

Creación de la estructura básica de una página web

La sintaxis es:

html:5
html:xml
!

Nodos hijos

Con el signo >

La sintaxis es

nav>a

y crea una etiqueta <nav> con un enlace.

Nodos hermanos

Con el signo +

div+article+section

Subir un nivel (nodos padres)

ul>li>p^li>blockquote

Generar menú de navegación multiplicando

ul>li*5>a

El asterisco es un multiplicador.

Agrupar elementos

ul>li*3>(p+span)*2

El paréntesis es agrupación.

Nombres de ids y de clases

Se acompaña con el asterisco (#).

nav#menu / crea un nav con id="menu"
nav.menu / crea un nav con class="menu"
nav.social#icon / crea un nav con un id="social" y clase="icon"
a.btn.bnt-large.otro / se han creado varias clases

Atributos HTML

Se utilizan los corchetes cuadrados.

a[target="_blank"]*3 / Crea 3 a con el atributo target="_blank"

Si son más atributos se ponen más corchetes separados por un espacio entre ellos.

Generar elementos numerados

Se utiliza el símbolo de dólar ($).

ul>li.item-$*10
ul>li.item-$@101*10 / Comienza por el número 101

Lorem

Nos genera un párrafo Lorem Ipsum

Menú de navegación

Las llaves sirven para definir el contenido, al igual que los corchetes sirven para definir los atributos.

nav#menu>ul>li*5>a{Sección $}

Emmet y Javascript

Para incluir Javascript en nuestro Emmet, tenemos que ir a Include Languages en configuracion del VSC. Y ponemos en una casilla Javascript y en otra HTML.

Scroll al inicio