Visual Studio Code

esencial

Visual Studio Code esencial

Presentación

Visual Studio Code es un editor de código libre y multiplataforma desarrollado por Microsoft.

Sus principales características son la rapidez y la extensibilidad. Cualquier desarrollador de cualquier lenguaje puede encontrar en VSCode una herramienta perfecta para el día a día.

Gracias a sus extensiones y plugins, se pueden lograr funcionalidades avanzadas casi parecidas a un IDE como WebStorm, por ejemplo.

Visual Studio Code esencial

Bienvenida

Nada más arrancar el programa, nos encontramos con la pantalla de bienvenida, donde podemos comenzar a dar los primeros pasos con VSCode.

Visual Studio Code esencial

Paleta de comandos

Sin duda, la característica más importante de VSCode es la paleta de comandos (⇧⌘P), la cual permite acceder al 100% de las opciones y menús de forma mucho más directa.

Visual Studio Code esencial

Paleta de comandos

Basta con comenzar a escribir lo que queremos buscar (búsqueda contextual) para que VSCode nos presente las opciones disponibles.

Fíjate como indica, además, el atajo de teclado de cada acción.

Tienes disponibles documentos con todos los atajos para Mac y Windows.

Visual Studio Code esencial

Apertura rápida

Otro atajo muy importante es la apertura rápida (⌘P), que nos permite acceder a archivos instantáneamente, por nombre, evitando la búsqueda en la barra lateral.

Visual Studio Code esencial

Barra estatus

La parte inferior de VSCode muestra información útil a la hora de desarrollar proyectos. Por ejemplo, con (⇧⌘M) podemos acceder a la consola de errores generados.

O cambiar la sintaxis del lenguaje activo para el documento que estemos visualizando (también se puede hacer con ⌘K M).

Visual Studio Code esencial

Personalización

La personalización es el punto fuerte de VSCode. Prácticamente se puede alterar cualquier aspecto del programa. Por ejemplo, cambiar un theme (⌘K ⌘T)

Hay miles de themes extra disponibles en el VSCode Marketaplace.

Visual Studio Code esencial

Personalización

Otro aspecto visual que querrás cambiar son los iconos de la barra lateral e inspector de archivos. No tienes más que realizar la búsqueda en la paleta de comandos (o buscar nuevos en el Marketplace).

Visual Studio Code esencial

Atajos de teclado

VSCode ofrece una forma sencilla de manejar y personalizar todos los atajos de teclado del programa. Busca teclado en la paleta de comandos o (⌘K ⌘S).

Más información sobre atajos de teclado que puede interesarte.

Visual Studio Code esencial

Configuración

Las opciones de configuración de VSCode se presentan en un gran archivo JSON. Puedes acceder con (⌘,). En el panel puedes buscar las opciones que desees cambiar y guardar un nuevo valor como usuario.

Visual Studio Code esencial

Extensiones

Otro de los pilares fundamentales de VSCode son las extensiones (⇧⌘X). Hay una para cada tarea o necesidad. Todo el catálogo está disponible en el Marketplace.

Desde el panel puedes buscar nuevas extensiones y revisar las recomendadas por la propia Microsoft.

Visual Studio Code esencial

Extensiones

La primera extensión que vamos a revisar nos servirá para crear un workflow entre VSCode y nuestro espacio FTP.

ftp-sync permite conectar con un servidor ftp, mantener sincronizados los archivos y subir los cambios a medida que se producen.

Enlace.

Visual Studio Code esencial

Extensiones

La segunda extensión mejora el workflow local a la hora de guardar y visualizar los cambios realizados en nuestro documento.

live-server re-carga el documento sobre el que se esté trabajando cuando estos se guardan, agilizando el proceso de desarrollo.

Enlace.

Visual Studio Code esencial

Extensiones

La tercera extensión nos permitirá hacer sesiones de debug de nuestro proyecto en el navegador Google Chrome.

Debugger for Chrome conecta VSCode y Chrome en una sesión de depuración continua.

Enlace.

Visual Studio Code esencial

Snippets

Los fragmentos de código permiten re-utilizar estructuras de código evitando tener que re-escribir lo mismo una y otra vez.

VSCode viene con un conjunto de snippets (⇧⌘P), y hay cientos de ellos en el Marketplace, pero la verdadera utilizad reside en crear nuestros propios fragmentos de código.

Visual Studio Code esencial

Snippets

Para crear nuestros snippets, primero debemos elegir el lenguaje al cual pertenecerán (CSS, JS, HTML, etc.) desde su menú en preferencias.

Visual Studio Code esencial

Snippets

Una vez elegido el lenguaje, tendremos que crear la plantilla del fragmento de código. Por ejemplo, esta es la base de un bucle for de JavaScript:

"For_Loop": {
    "prefix": "for",
    "body": [
        "for (var ${1:indice} = 0; ${1:indice} < ${2:10}; ${1:indice}++) {",
	"\t console.log(${1:indice});",
        "}"
    ],
    "description": "For Loop"
},

Para poder verlo en acción primero hay que entender que cada símbolo $ es un placeholder para que nosotros escribamos nuestros propios valores.

Visual Studio Code esencial

Snippets

Para llamar al nuevo snippet, hay que buscarlo por su valor de prefix ("for"), desde un documento del mismo lenguaje del snippet (JavaScript en este caso).

Una de las maneras de invocarlo es a través de la paleta de comandos (⇧⌘P), para luego insertarlo.

Visual Studio Code esencial

Snippets

La manera más directa es comenzar a escribir el prefijo del snippet en el propio documento y completarlo con el tabulador (configurando "editor.tabCompletion": true).

Visual Studio Code esencial

Atajos esenciales

Mostrar y ocultar la barra lateral: ⌘B

Moverse a la barra lateral: ⇧⌘E

Visual Studio Code esencial

Atajos esenciales

Modo Zen (no distracción): ⌘K Z

Visual Studio Code esencial

Atajos esenciales

Edición simultánea: ⌘\

Moverse entre los editores: ⌘1, ⌘2, ⌘3

Visual Studio Code esencial

Atajos esenciales

Moverse entre los editores: ⌘1, ⌘2, ⌘3

Visual Studio Code esencial

Atajos esenciales

Navegación reciente: ⌃Tab

Visual Studio Code esencial

Edición de texto

Multi selección con cursor: ⌥⌘↑ o ⌥⌘↓

Visual Studio Code esencial

Edición de texto

Añadir cursores extra: ⌥ + Click

Visual Studio Code esencial

Edición de texto

Seleccionar siguiente ocurrencia: ⌘D

Visual Studio Code esencial

Edición de texto

Unir en una sola línea: ⌃J

Visual Studio Code esencial

Edición de texto

Copiar línea arriba / abajo: ⇧⌥↑ o ⇧⌥↓

Visual Studio Code esencial

Edición de texto

Ir a símbolo en documento: ⇧⌘O

Visual Studio Code esencial

Edición de texto

Ir a una línea específica: ⌃G

Visual Studio Code esencial

Edición de texto

Formatear (visual) código seleccionado: ⌘K ⌘F

Todo el documento: ⇧⌥F

Visual Studio Code esencial

Edición de texto

Seleccionar línea actual: ⌘I

Visual Studio Code esencial

Debug

Una de las formas más primitivas de depurar errores e inconsistencias en nuestro código es a través del conocido console.log().

Sin embargo, este método pronto se convierte en un problema en sí ya que hay que repetirlo constantemente y con diferentes valores para (cruzar los dedos) dar con el posible error.

Existe otra forma de hacer debug mucho más rápida y productiva. Se trata de inspeccionar nuestro código línea por línea usando puntos de interrupción delimitados por nosotros mismos.

Visual Studio Code esencial

Debug

Para comenzar (ejemplo 1) a depurar de verdad vamos a utilizar las herramientas de desarrollo de cualquier navegador moderno.

Primero, abrimos la pestaña sources de las herramientas de desarrollo.

Visual Studio Code esencial

Debug

En sources podemos examinar y depurar nuestro código JavaScript de forma sencilla.

Árbol de documentos

Código del documento

Inspector

Consola*

Visual Studio Code esencial

Debug

Desde sources podemos depurar el código línea por línea, pausando su ejecución, e inspeccionar y alterar todo el ámbito local y global del programa.

Podemos crear puntos de interrupción manualmente, por número de línea de código, o bien por eventos JavaScript, por ejemplo click.

Visual Studio Code esencial

Debug

Ahora, al hacer click en el botón, la ejecución se detiene antes de ejecutar la primera línea de la función asociada al event listener del botón comprar, pudiendo inspeccionar propiedades, variables, etc.

Visual Studio Code esencial

Debug

Con la ejecución detenida, con la barra de control podemos recorrer el cófido como si de una vídeo se tratase. Vamos a revisar cada uno de los botones.

Visual Studio Code esencial

Debug

Reanudar.

Reanuda la ejecución hasta el siguiente punto de interrupción. Si no se encuentra ningún punto de interrupción, se reanuda la ejecución normal.

Omitir.

Reanuda la ejecución hasta la siguiente llamada a función, omitiendo la actual.

Visual Studio Code esencial

Debug

Entrar.

Si la siguiente línea contiene una llamada de función, Entrar irá a esa función y la pausará en la primera línea.

Salir.

Ejecuta el resto de la función actual y pausa la ejecución en la siguiente instrucción después de la llamada de función.

Visual Studio Code esencial

Debug

Inhabilitar puntos de interrupción.

Inhabilita temporalmente los puntos de interrupción. Se usa para reanudar la ejecución completa sin quitar los puntos de interrupción. Haz clic de nuevo en el botón para volver a activar los puntos de interrupción.

Pausar en excepciones.

Automáticamente pausa el código cuando se produce una excepción.

Visual Studio Code esencial

Debug

A parte de los puntos de interrupción basados en evento (click, etc), una de las formas más comunes de depurar es añadir puntos de interrupción por nº de línea. Para ello sólo hay que hacer click en él y asignarlo.

Visual Studio Code esencial

Debug

Ahora, cuando iniciemos la ejecución, esta se detendrá en esa línea o líneas específicas, pudiendo inspeccionar todo el entorno.

Visual Studio Code esencial

Debug

Hay que destacar que cuando la ejecución está detenida podemos cambiar los valores de las variables almacenadas en memoria con total libertad.

Visual Studio Code esencial

Debug

De igual forma, podemos editar en vivo el código de nuestro programa y guardarlo (⌘S) para que vuelva a ser ejecutado con los nuevos valores.

Visual Studio Code esencial

Debug

También podemos evaluar expresiones y recibir alertas cuando estas cambien.

Visual Studio Code esencial

Debug

Por último, con la ejecución detenida, el ámbito en el que nos encontremos es asociado directamente a la consola, pudiendo visualizarlo y transformarlo.

Visual Studio Code esencial

Integración con GIT

Un sistema de control de versiones (VCS) es muy necesario para coordinar y organizar las evoluciones de cualquier proyecto de desarrollo. Se vuelve algo imprescindible si queremos colaborar con otros desarrolladores.

En esta unidad aprenderás cómo utilizar GIT con Visual Studio Code de forma esencial.

GIT es un sistema de control de versiones, probablemente el más utilizado ya que es open source y cuenta con el respaldo de gigantes de la tecnología y la educación.

Visual Studio Code esencial

Integración con GIT

La integración de GIT con VSCode se encuentra en la barra lateral:

Visual Studio Code esencial

Integración con GIT

Con GIT instalado en nuestro sistema y un proyecto abierto, lo primero será inicializar un nuevo repositorio a través de la paleta de comandos:

A partir de este momento, GIT controlará todos los cambios que ocurran en los archivos designados de nuestro proyecto (directorios, archivos y su contenido).

Visual Studio Code esencial

Integración con GIT

Con el repositorio GIT iniciado, se nos presentará la lista de archivos del proyecto que queremos que GIT supervise. Podemos dar al icono de "+" al lado de cambios para añadir todos.

El número sobre el icono en la barra lateral siempre indica la cantidad de cambios detectados en el repositorio.

Visual Studio Code esencial

Integración con GIT

Una vez añadidos todos los archivos, es momento de hacer un commit, es decir, una entrada en la historia de este repositorio, describiendo el estado en el que se encontraba el proyecto en ese momento:

Visual Studio Code esencial

Integración con GIT

Ahora, cada vez que ocurra un cambio en un archivo supervisado por GIT, se nos avisará visualmente del mismo. Además, podremos ver las diferencias entre la versión guardada y la nueva.

Visual Studio Code esencial

Integración con GIT

Podemos rechazar los cambios y devolver los archivos a su estado original en el último commit de forma individual o colectiva:

Visual Studio Code esencial

Integración con GIT

Por supuesto, también podemos guardar los cambios en los archivos y realizar un nuevo commit:

Visual Studio Code esencial

Integración con GIT

A través del GIT gutter podemos tener un indicador visual de los cambios aplicados al archivo que estemos editando: rojo para líneas eliminadas, verde para añadidas y azul para editadas.

Visual Studio Code esencial

Integración con GIT

En ocasiones es necesario probar una nueva característica en el proyecto sin alterar el estado en el que se encuentra. Con GIT podemos crear una nueva rama (branch) y así desarrollar de forma independiente.

La rama principal (por defecto) siempre se llama "master branch".

Visual Studio Code esencial

Integración con GIT

Dentro de la nueva rama podemos desarrollar esa nueva funcionalidad, y guardarla haciendo un commit, de la misma forma que ya hemos visto:

Visual Studio Code esencial

Integración con GIT

Cuando estemos satisfechos con la nueva función del proyecto, podemos fusionar (merge) la nueva rama en la principal (master). Primero hay que desplazarse a la rama master:

Y luego elegir qué rama fusionar en master desde la propia paleta de comandos:

Visual Studio Code esencial

Integración con GIT

Ahora que ya tenemos esa nueva funcionalidad integrada en la rama principal, podemos continuar con el desarrollo del proyecto:

Y borrar la rama de prueba ya que no la necesitamos más: