Visual Studio Code

Instalación y conceptos básicos de Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
El proceso de instalación es muy sencillo. Simplemente tenemos que acudir al
sitio code.visualstudio.com y hacer clic en el botón de 'Download' ya que la
página detecta el sistema operativo con el que tú estás trabajando y te ofrece la
opción inmediata para su descarga. De cualquier manera, si tu quieres descargar
la versión para otra plataforma, simplemente haces clic en esta sección donde
dice 'Other platforms'. Cuando das clic, eliges cuál es la opción que te gusta
más para poderlo descargar. El proceso de instalación es el nativo de cada
sistema operativo. En el caso de 'Windows', cuando vas a dar con las
ventanas 'Siguiente', 'Siguiente', 'Siguiente', y algo similar sucede cuando
trabajas con Linux o si lo quieres trabajar desde línea de comandos o con el
administrador de paquetes adecuado o cuando trabajas con Mac, simplemente
vas a arrastrar y dejar caer la aplicación que te ha descargado directamente en
tu carpeta de aplicaciones. Una vez que has terminado el proceso de instalación,
puedes abrirlo y la configuración inicial va a ser muy sencilla. De hecho, cuando
abres Visual Studio Code te van a aparecer de este lado todos estos botones. El
primer botón se va a referir a los archivos. El segundo, a las búsquedas que
puedes realizar dentro de tu proyecto. El tercero se va a referir a GIT. El cuarto,
se va a referir a las capacidades que va a poseer Visual Studio Code para poder
hacer 'debugging' de tu proyecto. Y el quinto, a las extensiones que podrás
instalar. Una vez que ya tienes abierto tu editor puedes halar tu carpeta
completamente al editor para poder trabajar. En este caso, veamos lo
siguiente: Aquí tengo una carpeta que se llama 'My project', que es donde
tengo un código para trabajar. Puedo simplemente hacer 'Drag and
drop'. Cuando lo hago, automáticamente Visual Studio Code detecta los
archivos y me procede a trabajar con ellos. Siempre que trabajamos con Visual
Studio Code en la parte inferior me va a aparecer una línea, en este caso
aparece azul, y significa que todo esta bien. Aquí nosotros podemos detectar si
tenemos algún error o algún 'Warning' cuando estamos escribiendo
código. Más adelante veremos cómo va cambiando este tipo de barras de
estado. La otra forma de hacerlo es muy sencilla: Voy a abrir nuevamente Visual
Studio Code en un estado inicial. Cuando lo abro me aparece aquí un botón
que dice 'Abrir carpeta'; puedo pulsarlo y elegir cuál es el archivo o la
carpeta con la cual quiero trabajar. Es importante considerar lo siguiente: En
Visual Studio Code puedo abrir nuevas ventanas, pero estas las puedo abrir
directamente aquí o arrastrarlas para poder trabajar directamente en un espacio
unificado o trabajar con otro proyecto. Por ejemplo, si en este caso tengo
maximizada mi pantalla completa, cuando le doy aquí a 'ArchivoNueva
ventana', me va a aparecer otra pestaña de este lado. Así, puedo tener dos
entornos diferentes de trabajo y distribuirme entre ellos. Otra actividad muy
común que utilizamos los desarrolladores es invocar nuestro editor de código
directamente desde línea de comandos. Para esto, yo puedo instalar el
comando directamente desde Visual Code. Para hacer esto, simplemente tengo
que pulsar el juego de teclas 'Comando + Shft + P', para el caso de Mac, o 'Ctrl
+ P', para Windows. Y aquí lo que tendré que hacer es escribir 'Instalar' para
poder ubicar el comando que yo deseo; en este caso, el que deseo utilizar es
este: "Instalar el comando 'code' en PATH." Simplemente lo selecciono y esto
me agrega un script que voy a poder utilizar. Entonces lo que me dice aquí es
que agregó un script con este tipo de permisos. Damos 'Aceptar', y en este caso
vamos a pulsar la contraseña. Una vez que lo hacemos, automáticamente me
notifica que el comando ha sido instalado. Vamos a probarlo. Para probarlo,
vamos a abrir nuestra terminal. En este caso, simplemente voy a abrir una nueva
pestaña para que esto se refresque y escribiré la palabra 'code'. Cuando la
escribo, vean cómo se abre automáticamente. Para validarlo, simplemente voy a
cerrar nuevamente la herramienta, y escribiré la palabra 'code' de nuevo, y esto
va a levantar una nueva instancia de mi editor. Ahora, una ventaja que tenemos
es que si estoy navegando directamente entre varios archivos y deseo abrir una
carpeta, lo que tengo que hacer es acceder a la carpeta del proyecto que yo
quiero abrir con Visual Code y escribo 'code .' Al hacerlo, me va a abrir el
proyecto directamente en Visual Studio Code. Esta es una manera muy sencilla
porque a veces ubicas tus archivos directamente en línea de comandos y
simplemente lo mandas a abrir. Así entonces, ya tienes instalado y ya conoces la
parte esencial de un proyecto con Visual Studio Code. Solamente no olvides
que para poder abrir cada uno de los archivos simplemente puedes hacer un
clic. Detecta cómo en la pestaña el texto está en cursivas, esto quiere decir que
el archivo no está abierto por completo pero que sí puedes realizar
modificaciones. Por ejemplo, aquí hago una modificación y cada que lo hago
aparece un círculo en lugar de una cruz. Cuando yo guardo, automáticamente
ese círculo desaparece. Si haces doble clic en un archivo este se abre
completamente. Es decir, no importa si me estoy pasando entre los archivos, ese
archivo va a permanecer abierto. Son las dos formas en las cuales yo puedo
visualizar un archivo que acabo de abrir.

Componentes comunes adicionales de Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Existen algunos componentes que será necesario que tengas instalados en tu
computadora para que pueda funcionar todo tu proyecto de forma adecuada. El
primero de ellos es Git, y esto es para que puedas trabajar adecuadamente con
la función integrada de Git. En el caso de que no lo tengas instalado,
automáticamente el sistema te dirá que no está instalado en el sistema. Puedes
utilizar, en el caso de Mac Homebrew para instalarlo o descargarlo directamente
de su página web. Una vez que lo descargas y lo instalas simplemente reinicias
el editor de código, y con esto ya lo va a reconocer. Otro software que
necesitaremos tener es Node.js, y para Node.js puedes entrar directamente al
sitio de Nodejs.org y descargarlo. Una vez que lo instalas, tienes disponible
Node y por lo tanto NPM. NPM signitifa Note Package Managemet y es
simplemente el producto que me va a permitir instalar paquetes
adicionales para poder trabajar con alguna otra librería, librería, por ejemplo,
como puede ser TypeScript, que también es un componente necesario para que
puedas estar integrado en el proceso de trabajo con Visual Studio Code, o
Typings, que es un administrador de tipos que utiliza TypeScript. Si utilizas estos
cuatro elementos, y los tienes instalados en tu computadora, al momento de
estar trabajando con Visual Studio Code, entonces la experiencia de trabajo que
tendrás, va a ser mucho más sencilla. Para hacer los pasos de instalación en
cada uno de ellos, simplemente puedes entrar al sitio web y seguir los pasos
que te indican, en el caso de Git será descargar el archivo y seguir los pasos de
instalación, después tendrá que ser Node, y lo podrás descargar directamente
desde aquí o utilizando un administrador de paquetes. Posterior a eso, Typings
y TypeScript, podrás instalarlos utilizando NPM, una vez que ya está instalado
con NPM, simplemente lo puedes ocupar desde línea de comandos. En cada
una de las páginas podrás encontrar los pasos necesarios para hacer la
instalación. Estos entonces son los cuatro elementos que vas a necestiar por
defecto, para poder comenzar a trabajar con Visual Studio Code.

Extensiones en Visual Code Studio

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Una de las grandes ventajas que tiene Visual Studio Code es que no consume
grandes recursos del dispositivo o equipo donde se esté ejecutando. Y para
esto, también se ha creado un esquema donde tú puedes generar tus propias
extensiones, o descargar extensiones de terceros. Hay algunas extensiones que
son muy válidas, y que pueden servirte bastante en tu flujo diario de
trabajo. Para poder ubicar las extensiones en tu editor de código, simplemente
ubica en el panel del lado izquierdo la opción que dice 'Extensiones', que es el
último con un recuadro. Cuando lo pulsas, automáticamente te va a mostrar
algunas extensiones disponibles. Si haces más amplia la columna, te van a
aparecer los iconos de cada uno de ellos. Aquí hay varias que puedes utilizar; de
las que yo te recomiendo que instales para trabajar, si vas a trabajar en un
ambiente web, es por ejemplo el debugger para Google Chrome. También
puedes utilizar este que se llama Vscode-icons, ese te va a ayudar a identificar a
través de iconos, los tipos de archivos que vas a estar utilizando. La otra opción
que puedes instalar, puede ser ESLint, que te va a ayudar a escribir código de
JavaScript de una manera más limpia y sencilla. Otro, es HTML Snippets, en este
caso, contiene bloques de código pre-hechos que te van a ayudar a escribir
código más rápido. Y, posterior también, puedes utilizar Beautify. Este lo que va
a hacer, es que cada que escribes un código, automáticamente te lo va a
formatear y le va a dar las indentaciones y espacios necesarios. Aún así, puedes
encontrar algunas extensiones más dependiendo de lo que quieres utilizar. Si
trabajas con Angular, te recomiendo esta extensión de John Papa, para que
puedas trabajar con cualquiera de las dos opciones, en este caso esta es la de
Angular 2 y también se encuentra disponible la versión de Angular 1. Y de aquí,
podrás elegir cuáles otras opciones puedes elegir para trabajar. Ya sea que
trabajes con PHP, con C++, con Ruby, Bootstrap, Python, etc. Con cualquiera de
ellas, simplemente pulsas el botón Instalar e instalas la opción. También puedes
ver cómo funciona cada una de ellas, si haces un clic directamente en el nombre
de la extensión, y del lado derecho, encontrarás un corto vídeo de como
funciona y cómo se puede utilizar. En el caso de esta librería que ayuda a
escribir código de Angular 1, te indica que simplemente escribas NG 1 y el
nombre de lo que necesitas, que puede ser componente, un controlador,
directiva, factory, etc., y pulsas enter, y eso te va a escribir el código
necesario. Así viene en cada una de las extensiones que vayas a utilizar, viene
una descripción de cómo se utiliza, para qué sirve y cómo puedes sacarle mayor
provecho. Las extensiones, entonces, son una característica que te va a ayudar a
potenciar tu trabajo y que te va a facilitar la escritura de código.

División del editor de Visual Studio Code en columnas

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando trabajamos con múltiples archivos de código, a veces es necesario que
tengamos que dividir nuestra pantalla, para lo cual tenemos este botón en la
parte superior derecha que me permite dividir el editor. Por ejemplo, si yo lo
pulso, me abre la misma ventana, pero ahora dividido en dos columnas. Ahora
sí, puedo abrir cualquier cantidad de archivos, pero haciendo clic sobre la
columna que yo quiera para poder abrir las pestañas directamente. También allí
puedo hacer más divisiones, de hecho puedo hacer hasta tres divisiones para ir
separando en columnas lo que yo necesito. A parte de esto, puedo mover las
pestañas a través de estos recuadros, para tener una mejor organización de
código a lo largo de todo mi programa. De esta manera la tarea de comparar
código o de estar copiando de un archivo a otro, se hace muchísimo más
sencilla.
Configura el editor para guardar tu código automáticamente
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Una de las características más importantes cuando utilizamos algún editor de
texto, es que tenga la capacidad de autoguardado. Esto es, que se pueda estar
guardando automáticamente el código en caso de que exista algún cerrado
inesperado del programa. Para poder activar este guardado automático lo único
que tenemos que hacer es acudir al menú 'Archivo' y seleccionar la opción de
guardado automático. Esto va a realizar el guardado de nuestro archivo cada
cierto tiempo. De esta manera ya no tenemos que preocuparnos por estar
guardando nuestro archivo regularmente ya que esto lo hará por nosotros. Otra
manera que tenemos para poder trabajar con este autoguardado en caso de
que no confíes mucho de si lo guarda o no lo guarda o en caso de que no lo
hayas activado, es que podamos acudir a 'Preferencias', 'Configuración de
usuario' y aquí podamos trabajar con este formato que se llama 'autoSave'. El
'autoSave' tiene en este caso una configuración llamada 'afterDelay'. Este
'afterDelay' es automáticamente lo que nosotros activamos cuando elegimos la
opción de guardado automático. Podemos cambiar esa opción y elegir alguna
otra por ejemplo, 'onFocusChange'; 'onFocusChange' me servirá cada vez que
yo quiera hacer algún cambio y me cambie de ventana, automáticamente se
guardará. Podemos identificar que se ha guardado ya que en este caso, yo voy a
quitar este texto, vemos cómo aparece el círculo de que existe algún cambio y
simplemente, cuando me cambio de pestaña el círculo va a desaparecer porque
se va a guardar mi archivo de manera automática. Cualquiera de las dos
opciones que decidas utilizar es completamente viable. Estas opciones de
autoguardado vienen listadas en este archivo de configuración donde tú podrás
elegir la configuración que desees para que se pueda ejecutar algo. Por
ejemplo, también aparte del autoguardado puedes elegir que se
autoformatee cada vez que se guarde. Si recuerdas, tenemos una extensión por
aquí instalada que se llama 'beautify'. Esa extensión 'beautify' me va a permitir
formatear mi código. Entonces lo único que yo tendré que hacer será invocar a
mi archivo que en este caso yo puedo buscar la opción aquí, veamos cuál es la
opción de beautify, comando 'find' para poder encontrarlo y aquí vemos que
existe la opción que dice 'beautify.onSave' ya sea que tu la copies y la pegues o
que comiences aquí a escribirla. Entonces dice 'beautify.onSave' y cambiamos la
opción a 'true'. Con esto entonces cada vez que tú escribas un
código automáticamente se va a formatear cada vez que se guarde. Esto
obviamente nos ayuda a mejorar el flujo de trabajo y es una preocupación
menos cada vez que estamos escribiendo código.

El zoom en el editor de texto de Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Algunas veces, el código que tenemos en pantalla puede estar o muy pequeño
o muy grande, o tenemos una pantalla muy grande y queremos adaptar el
tamaño del código a dicha pantalla. Para ello podemos trabajar y hacer zoom in
o zoom out dentro de nuestro código. El juego de teclas que vamos a utilizar
para hacer esta tarea varía dependiendo del sistema operativo. Para lo cual,
según el sistema operativo que estés ocupando, accede al Menú Preferencias y
vamos a utilizar la opción Métodos abeviados de teclado. Aquí podrás averiguar
las opciones que estás utilizando, por ejemplo, si damos Comando o Ctrl + F
para buscar en Windows, vamos a ver como aquí tenemos un zoom in o un
zoom out, de este tipo de zoom in o zoom out vamos a ver cual es el juego de
teclas Si para tal caso no estuviera disponible ese juego de teclas en tu
computadora aparece un símbolo con una I de Info, cuando lo colocas encima,
te dice cual es el juego de teclas que debes de seguir. En este caso, si quiero
hacer un zoom in, debo pulsar el juego de teclas Comando y el símbolo de
admiración, con esto voy a tener un zoom in, ahora si deseo salir de ahí y
regresar o disminuir el zoom, es colocar mi cursor y vemos como me indica que
puedo pulsar el juego de teclas Comando I + apóstrofe. Al hacerlo, obviamente,
esto empieza a reducir el zoom, y existe otra opción que es el zoom reset, es
decir, resetear el zoom a su estado inicial. Para poder utilizarlo, pulso el juego
de tecla Ctrl + 0 en Windows o Comando + 0 en Mac y al hacerlo me tendría
que regresar a este estado. En caso de que no lo haga, tendremos que definir
este estado, para lo cual, vamos a hacer un poco más de zoom, y del lado
derecho vamos a disponer de un Key Bindings, es decir de como puedo agregar
las teclas que voy a utilizar. Si tu pulsas el juego de teclas Ctrl o Comando +
K, te aparece una ventana para que captures este juego de teclas que quieres
utilizar, y en este caso, voy a utilizar Comando + 0, cuando yo lo pulso, me
aparece una opción más sobre las que ya tengo, en este caso me dice que voy a
utilizar el juego de teclas Comando + 0 y tengo que describir el comando que
quiero utilizar, en este caso, borro lo que hay en contenido y simplemente pulso
el juego de teclas Ctrl + Espacio y aquí vamos a trabajar con el WorkBench. Y si
no recuerdo cual es el nombre que voy a utilizar, regresamos a la vista de
opciones, buscamos zoom y vemos que la opción adecuada ahora es
WorkBench.Action y entonces repitamos por acá WorkBench.Action vamos a
corregir por aquí esta letra que está mal escrita, y ahora sí me van a aparecer las
opciones que yo quiero, en este caso, zoom in, zoom out y zoom reset. La que
yo necesito es zoom reset, entonces la selecciono, la última opción la puedo
eliminar. Recuerda que en lo que tu estés trabajando pueden o no,
aparecer más opciones, así que no te preocupes si no encuentras las mismas
opciones, la idea es que puedas agregar esta opción. Ahora sí, una vez que se
ha guardado vamos a hacer zoom in y pulsemos el juego de teclas Comando +
0 y vemos como regresa todo al estado inicial. O puedo regresar y hacer zoom
out y pulsar el juego de teclas para volver al estado inicial del zoom. Con esto
puedo hacer zoom in o zoom out o resetear directamente en el código que
estoy viendo en pantalla.

La barra lateral en Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En pantalla podemos contar con una barra lateral que me va a permitir navegar
dentro de las distintas opciones que tengo en Visual Studio Code. Para esto,
esta barra puedo ampliarla o minificarla, simplemente modificando el tamaño
que tengo, al colocar el cursor en el borde hasta que cambie el ícono y empezar
a moverlo. Esto es una manera de hacerlo, la otra manera es usando el juego de
teclas Comando + B en Mac, o Ctrl + B en Windows, con esto, puedo ocultarla y
mostrarla, pero también hay otra característica, a veces, no queremos que esta
barra aparezca de este lado, sino queremos que aparezca del lado contrario,
para lo cual puedo acudir al menú Ver y puedo elegir la opción que dice "Mover
la barra lateral", cuando elijo esta opción de mover la barra lateral, la barra se
cambia al lado contrario. Y la otra opción de mostrar u ocultar la barra, sigue
disponible. Ya esto quedará a tu gusto y como mejor te organices en tu
código al momento de estar trabajando.

Búsqueda y reemplazo de código en Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
(hombre) El sistema de búsqueda en Visual Studio Code es muy similar al
sistema de búsqueda que existe en algunos otros editores de texto. Por
ejemplo, para que yo lo pueda activar simplemente tengo que usar el juego de
teclas "Control F" en Windows o "Comando F" en Mac. Esto me va desplegar
una pequeña ventana donde puedo encontrar la búsqueda. De cualquier
manera, recuerda que puedes acudir al menú Editar para poder activar el menú
que necesitas. Aquí en este caso, simplemente basta con escribir la palabra que
nosotros queremos buscar para que encuentre todas las incidencias. Estas
incidencias pueden repetirse de cierta forma. Por ejemplo, yo puedo buscar que
sea "Case sensitive"; es decir, si yo lo escribo con mayúscula y minúscula, en
este caso, cuando yo quiero hacer la búsqueda, me puede buscar hasta que me
encuentra la palabra que coincide con dicho formato. Vamos activarlo
correctamente, en este caso, acabo de escribir la palabra View con mayúscula,
activo la forma y vean cómo solamente me aparece una opción que para este
ejemplo es lo que se encuentra en la línea 29, puesto que coincide con el
formato. Otro formato que existe, también, es el que coincida solamente
palabras completas; por ejemplo, yo aquí en este caso tengo la palabra View,
pero veamos cómo aquí tengo view1, view2, etc. ¿Qué pasa si yo lo selecciono y
al marcarlo solamente me aparece la palabra View? Quiere decir que solamente
va buscar aquellas incidencias donde la búsqueda concrete a una palabra
completa; no a una palabra compuesta ¿Cómo cuál? Como esta que nosotros
teníamos aquí de view1 o view2. Otra manera de poder hacer búsquedas, es a
través de expresiones regulares. Cuando yo trabajo con expresiones
regulares, tengo que activar este modo para poder utilizarlo. Las expresiones
regulares son una forma en cual yo puedo acortar las búsquedas y facilitar todo
este proceso. ¿Qué tal; por ejemplo, si yo quisiera buscar todas las coincidencias
de la palabra view, pero que les siga algún número? Entonces, lo único que
tendría que hacer aquí sería agregar un par de corchetes atendiendo al
formato de una expresión regular y escribir que puede ser cualquier número del
cero al nueve. Veamos, entonces, cómo me arroja aquí ocho incidencias y
cuando navego entre ellas, me aparecen las opciones. Pero yo también puedo
restringirlo. Voy agregar, yo aquí, una palabra, solamente a modo de la
búsqueda, y le voy a poner view8. En este caso coincide con el patrón y lo
busca. Recordemos que las expresiones regulares me sirven para identificar
patrones. Entonces, ¿qué sucede si yo indico que solamente muestre aquellas
coincidencias de la palabra view con números del cero al seis? Vean cómo,
automáticamente, esta parte del view8, que yo tenía aquí, quedó descartada y
solamente se mantiene en el parámetro aquellas que coinciden y están dentro
de este patrón. Otro ejemplo podría ser si yo necesito buscar incidencias que
sean esta opción o esta opción o esta opción. Entonces, yo aquí puedo escribir
todo lo que diga view1; entonces, vean cómo me aparecen todas las que están
marcadas con view1. Pero, también, pueden ser que estén marcadas todas las
que digan view2; para esto escribo el símbolo de "Pipe" y el carácter que
necesito; en este caso ya me está marcando las dos opciones y se está cerrando
que encontró ocho incidencias. Pero, ¿qué tal si yo quiero que solamente me
busque la uno y los que terminan en ocho? Entonces, veamos cómo
aquí, cuando yo escribo uno u ocho, me aparecen seleccionadas esas
opciones. Siguiendo ese mismo patrón, yo puedo habilitar aquí este espacio y
hacer reemplazos; entonces, puedo poner que cada que encuentre este tipo de
reemplazo, yo lo cambie por una palabra que yo necesite. Por ejemplo, vamos a
cambiarlo por una palabra en español que diga vista Aquí yo puedo estar
haciendo el reemplazo de uno en uno o puedo mandar a que haga el
reemplazo hacia todas las selecciones. Una vez que lo hace, aplica el
comportamiento que nosotros encontramos a partir de una expresión
regular. También, es posible que nosotros podamos delimitar el espacio de la
búsqueda; por ejemplo, ¿qué tal si yo en esta sección quiero encontrar alguna
palabra; por ejemplo la palabra directiva? Entonces, simplemente selecciono
esta parte y vemos cómo aquí me aparece una configuración que dice "Buscar
en selección". Cuando yo la activo, la búsqueda se va a limitar solamente a lo
que yo seleccioné con el mouse. Entonces, aquí yo puedo escribir una palabra;
por ejemplo, vamos a poner "Directive" y solamente lo va a buscar en este
espacio; todo lo demás de nuestro archivo lo va ignorar por completo. Esto
como tal, también, es una gran ventaja. De igual manera, a como podemos
hacer este tipo de búsquedas de manera local por archivo, yo puedo ir
sobre alguna carpeta en especial y puedo activar aquí la opción de
Búsqueda. Cuando yo activo esa opción de búsqueda vemos como me pasa al
siguiente menú y aquí me aparecen los mismos campos que me aparecen en la
búsqueda local. Solamente que aquí yo puedo agregar más opciones y; además,
puedo elegir en qué archivos buscar o qué archivos voy a excluir o si yo puedo
indicar que sea en todo el proyecto o solamente en determinadas carpetas. Esto
es una gran referencia cuando yo quiero poner a trabajar el sistema de
búsqueda. También, aquí mismo en el sistema de búsqueda puedo encontrar
este tipo de "hints" donde, como podemos ver, me arroja algunos comodines
que me van ayudar en este tipo de búsqueda. Por ejemplo; si yo utilizo un
asterisco, utilizo un símbolo de interrogación o utilizo caracteres entre llaves o
corchetes. Cada uno de ellos tiene una definición distinta para el tipo de
búsqueda que yo quiero lograr Así, entonces, nosotros podemos definir y
delimitar los tipos de búsqueda que vamos a utilizar a lo largo de todo nuestro
proyecto. Este tipo de casos es muy bueno cuando tratamos de hacer multi
factoring o, también, cuando estamos tratando de encontrar
determinados códigos dentro de todo un programa.

Pistas y atajos rápidos en Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Visual Studio Code posee un par de características muy intereantes para
poder escribir código de una manera más rápida. Estos son los llamados
Vistazos rápidos o también conocidos como Pics. Este tipo de características me
permite buscar código cuando tenemos muchísimas líneas y editarlos sin tener
que desplazarme hasta ese bloque de código. Esto, obviamente, va a ser muy
interesante porque me va a permitir encontrar las referencias y escribir
demasiado rápido. Además, también voy a poder encontrar el significado de
algunas de las funciones o por lo menos, la firma de lo que está compuesto
para poder entender qué parámetros me hacen falta escribir. Esto es,
probablemente yo tenga un método o una función que esté declarado hasta el
final de mi código y desde la parte superior quiero escribir o hacer una
invocación de este método. Para no moverme hasta abajo, simplemente puedo
escribir el nombre de la función que voy a ocupar y cuando la escribo, colo el
cursor encima y esto me va a dar una referencia. Veamos un ejemplo: Voy a
escribir aquí una función, algo muy sencillo; simplemente va a ser una función
llamada sumar, el cual va a recibir dos parámetros, Dato A y Dato B. Aquí
entonces, lo único que haré será escribir un return y vamos a ponerle que será
Dato A + Dato B. Así de sencilla está esta función. Ahora, aquí mismo y voy a
dejar unos cuantos espacios, voy a hacer la invocación de esta función. ¿Ven
cómo en el momento que estoy escribiendo automáticamente me pone una
referencia? Esto se llama intelligence, este tipo de característica me permite dar
un vistazo rápido a la función. Así, puedo dar un clic y termina de completar la
escritura de la función. Entonces, por ejemplo, cuando escribo el par de
paréntesis para completarlo, vemos cómo me empieza a recomendar los
parámetros que necesita. Si nosotros ponemos atención a eso, podremos
darnos cuenta cuáles son los parámetros que voy a ocupar. Cuando tú escribes
tu propio código no hay problema pero, ¿qué tal cuando empiezas a utilizar una
librería externa o de un tercero? Este tipo de características te ayuda sobre todo
eso. Entonces, pongamos por ejemplo: 2,3. Ahora, si yo quisiera ver qué sucede
adentro solamente coloco el cursor encima y vemos cómo me indica que es una
función que se llama sumar y recibe dos datos. Si puedes ver, están indicados
los tipos de datos que son los parámetros y el tipo de dato que retorna. Esto es
porque esta característica está muy enfocada ya hacia ES6. Por tanto, cuando tú
comienzas a trabajar con ES6 y declaras los tipos de datos en tus funciones, esto
va a cobrar más sentido. Otra forma es que también dentro de un CCS, al
momento que yo coloco mi cursor sobre alguna de las propiedades, me
comienza a explicar de qué se trata determinada propiedad o en dónde
me encuentro y cómo se puede aplicar. Por ejemplo, veamos aquí, tenemos esta
clase llamada Menú LI, quiere decir que es un un componente de tipo LI dentro
de un menú y aquí mismo me ofrece un recuadro como el que estamos viendo
sobre el cursor; donde me indica cómo tendría que aplicarlo. Esto solamente es
una mera referencia. Ahora, como podemos ver, esta característica me sirve
tanto para Cascadas de estilo, como para trabajar con [inaudible]. Por último,
los Pics son los que me van a ayudar a buscar las referencias y poder trabajar de
una manera más ágil. Por ejemplo, voy a colocar mi cursor encima del nombre
de la función y puedo pulsar el juego de teclas SHIFT-F12. Al hacerlo me levanta
esta ventana, esto es como encontrar todas las referencias o puedo utilizar el
juego de teclas ALT-F12 y al hacerlo, también me levanta esta ventana. Como
pueden ver, en esta ventana puedo estar editando el código y de hecho, si hago
un scroll en la ventana, podemos ver como abajo está la función. Pero imagina
que tú no puedes llegar hasta abajo a ver la función, ¿para qué me va a servir
esto? Esto me levanta un espacio virtual donde puedo hacer algún cambio
sobre la función sin necesidad de desplazarme hasta la función y como
podemos ver aquí, en este pequeño ejemplo, la función final se está viendo
afectada. Entonces, aquí podría decir... Resultado va a ser igual a Dato A + Dato
B y vamos a retornar un resultado. Con esto, simplemente puedo dar un clic
afuera o puedo pulsar el botoncito que me aparece aquí para cerrar y cuando
cierro, vemos también cómo me conserva el cambio. Esto es, cuando tengo
grandes cantidades de código, ese tipo de características es muy usable. Si estás
en Mac, te recomiendo directamente habilitar las teclas F1, F2 hasta F12 para
que puedas ocuparlas regularmente. Si estás en Windows no debería de
presentarte ningún problema pero verifica que puedas trabajar correctamente
con este tipo de teclas.

Estructurar el código con la ayuda de Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando escribimos código, solemos sentarnos y comenzar a escribir, sin
preocuparnos porque exista una indentación o un formato específico. Esto,
aunque al final del día tengamos que unificar todo nuestro código, puesto que
cuando trabajo de esta manera, simplemente empiezo a escribir y escribir... Pero
es muy importante mantener un órden y un formato, porque después, cuando
tengas que regresar a darle formato a tu código, tendrás que tener la capacidad
de entender en que parte comienza una función, termina una función o en
donde tienes definidas determinadas características de tu aplicación. Visual
Studio Code tiene una característica interesante que me permite ir formateando
conforme yo voy trabajando, incluso, puedes trabajar con alguna de las
extensiones, como es en este caso, Beautify. Cuando tu ya tienes Beautify,
solamente cerciorate de que en las preferencias de usuario, tengas asignada la
opción Beautify.onsafe asignado con un valor True, esto para que cada vez que
se guarde tu archivo, automáticamente se formatée, entonces siempre vas a
tener un código ordenado. Así entonces, cuando yo esté trabajando y comience
a editar o escribir algún código, simplemente voy a guardar y veamos como
estas líneas automáticamente recuperan su forma. Este tipo de la estructura del
código me ayuda a entenderlo. Ahora, hay otro tipo de características que me
van a ayudar a definir como está organizado tu código. Entre ellas se encuentra
que cuando yo coloco el cursor sobre alguno de los Brackets o llaves o
paréntesis, automáticamente me selecciona el de cierre. Por ejemplo, en esta
función llamada Sumar, vemos como está seleccionado el inicio y
automáticamente me selecciona el final. Esto me ayuda a saber en donde
comienza y donde termina una llave. Así pues, puedo determinar hasta donde
está el alcance de mi aplicación cuando estoy trabajando sin ningún
problema. Una característica adicional que me va a servir para editar mi
código y para poder entender en que nivel se encuentra determinada línea, son,
valga la redundancia, algunas líneas que podemos pintar en el
código. Nativamente no aparecen, pero podemos hacer que se muestren. Para
esto, vamos a entrar en el menú de preferencias y vamos a utilizar la
configuración del usuario. Aquí en la configuración del usuario, justo después
de que tenemos Beautify.onsafe, vamos a darle aquí Coma y a partir de este
momento, vamos a escribir la siguiente opción, que va a ser Editor.Render, Y va
a haber una opción llamada Render Indent Guide, entonces vamos a buscar esta
opción, le damos Enter, y asignamos el valor True. Con esto, ya lo podemos
guardar y vamos de regreso a nuestro código. Vemos como ahora ya se
despliegan unas líneas, y como ves, es muchísimo más claro entender donde
comienza y donde termina determinado bloque de código. Así resultará más
complicado perderte y también resultará más sencillo encontrar errores o
incidencias que necesites localizar puntualmente en tu código.

Estructurar el código con la ayuda de Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando escribimos código, solemos sentarnos y comenzar a escribir, sin
preocuparnos porque exista una indentación o un formato específico. Esto,
aunque al final del día tengamos que unificar todo nuestro código, puesto que
cuando trabajo de esta manera, simplemente empiezo a escribir y escribir... Pero
es muy importante mantener un órden y un formato, porque después, cuando
tengas que regresar a darle formato a tu código, tendrás que tener la capacidad
de entender en que parte comienza una función, termina una función o en
donde tienes definidas determinadas características de tu aplicación. Visual
Studio Code tiene una característica interesante que me permite ir formateando
conforme yo voy trabajando, incluso, puedes trabajar con alguna de las
extensiones, como es en este caso, Beautify. Cuando tu ya tienes Beautify,
solamente cerciorate de que en las preferencias de usuario, tengas asignada la
opción Beautify.onsafe asignado con un valor True, esto para que cada vez que
se guarde tu archivo, automáticamente se formatée, entonces siempre vas a
tener un código ordenado. Así entonces, cuando yo esté trabajando y comience
a editar o escribir algún código, simplemente voy a guardar y veamos como
estas líneas automáticamente recuperan su forma. Este tipo de la estructura del
código me ayuda a entenderlo. Ahora, hay otro tipo de características que me
van a ayudar a definir como está organizado tu código. Entre ellas se encuentra
que cuando yo coloco el cursor sobre alguno de los Brackets o llaves o
paréntesis, automáticamente me selecciona el de cierre. Por ejemplo, en esta
función llamada Sumar, vemos como está seleccionado el inicio y
automáticamente me selecciona el final. Esto me ayuda a saber en donde
comienza y donde termina una llave. Así pues, puedo determinar hasta donde
está el alcance de mi aplicación cuando estoy trabajando sin ningún
problema. Una característica adicional que me va a servir para editar mi
código y para poder entender en que nivel se encuentra determinada línea, son,
valga la redundancia, algunas líneas que podemos pintar en el
código. Nativamente no aparecen, pero podemos hacer que se muestren. Para
esto, vamos a entrar en el menú de preferencias y vamos a utilizar la
configuración del usuario. Aquí en la configuración del usuario, justo después
de que tenemos Beautify.onsafe, vamos a darle aquí Coma y a partir de este
momento, vamos a escribir la siguiente opción, que va a ser Editor.Render, Y va
a haber una opción llamada Render Indent Guide, entonces vamos a buscar esta
opción, le damos Enter, y asignamos el valor True. Con esto, ya lo podemos
guardar y vamos de regreso a nuestro código. Vemos como ahora ya se
despliegan unas líneas, y como ves, es muchísimo más claro entender donde
comienza y donde termina determinado bloque de código. Así resultará más
complicado perderte y también resultará más sencillo encontrar errores o
incidencias que necesites localizar puntualmente en tu código.

Organizar ventanas en tabs en Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Es normal que cuando estamos trabajando en algún proyecto comencemos a
abrir archivos a diestra y siniestra. Esto quiere decir que tenemos bastanes de
estos archivos puestos y luego es algo complicado de organizar. Per fíjate en
esto, cada uno de los archivos se va abriendo en pestañas, como si estuvieras en
un navegador web. Y también puedes reordenarlas y acomodarlas a tu
gusto. De hecho, recuerda que hay una opción para poder dividir el
editor, cuando divides el editor, también es posible que dentro de cada uno de
ellos, puedas modificar o cambiar las pestañas acorde a lo que necesites. Así,
tienes una mejor estructura y puedes ir acomodando el código de cierta forma
que te permita trabajar mejor. También tienes ciertas opciones como por
ejemplo, cuando pulses el juego de teclas Comando + 1, 2, se divide en dos
columnas, Comando + 3, se divide en 3 columnas, y así, hasta que tenga este
número de columnas y puedas navegar entre ellas. Recuerda que a la vez
también, cuando quieras regresar, simplemente, debes ir cerrando cada una de
las columnas o moverlas de regreso hacia la columna original. También es
posible que tú al hacer clic en este símbolo de los tres puntos, te muestre la
opción que diga "Mostrar Editores Abiertos" esto va a desplegar un pequeño
panel y simplemente vas a ver una lista de los archivos que tienes abiertos en
pantalla, y aquí también podrás navegar entre cada uno de ellos. Esto es muy
importante cuando tienes más de 10 o 20 archivos abiertos al mismo
tiempo que es algo que suele suceder cuando estás programando.

Completar código de Visual Studio Code con Intellisense

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
IntelliSense es la característica que tiene Visual Studio Code para poder
completar código de una manera ágil y sencilla dependiendo del tipo de
archivo donde te encuentres. Por ejemplo, vamos a crear un nuevo archivo en
esta carpeta que se va a llamar "Prueba.html" Aquí vamos a identificar un par de
cosas, 1. Tenemos una extensión y por tanto existe aquí un tipo. Si tu pulsas
aquí, en este tipo, puedes cambiar el tipo de archivo que está identificando para
que pueda proveerte de las características o pruebas de código para que
puedas escribirlo más fácil. Por ejemplo, este se queda con HTML nada más, así
cuando tu escribes HT, por ejemplo, vez que empieza a darte un par de
opciones, HTML Snippets, los que quieras, recuerda que también puedes
instalar dichos snippets desde la parte de código, así cuando tu pulsas el botón
de HTML5, por ejemplo, automáticamente te pone el tipo de código apropiado
al tipo de archivo que es. Ahora, recuerda que en las extensiones puedes
trabajar con ciertos íconos, entonces, para poder buscarlo, podemos buscarlo
pulsar aquí, en la sección de extensiones y buscar una parte que diga Icons, si ya
los tienes instalados, simplemente habrá que activarlos. Y para poder hacerlo,
vamos a acceder a la parte de preferencias, encontramos la sección que dice
"Tema de íconos de archivo" y aquí, simplemente vamos a escoger la opción
que dice VEScode Icons Una vez que lo tenemos, fíjate como un ícono ya
comienza a acompañar al texto. Y así también, en mi editor ya tenemos íconos
para todos lados, esto me ayuda a ir identificando y obviamente, va a ser mucho
más sencillo, cuando yo comience a trabajar con IntelliSense. ¿Por qué? Porque
en este caso, si yo quiero escribir una etiqueta, una etiqueta Div, y cuando la
escribo pulso enter, y automáticamente me pone la etiqueta de apertura y la de
cierre. Lo mismo sucede si trabajo con algún archivo de JavaScript. Por ejemplo,
en este caso, si quiero escribir alguna función, vamos a escribir aquí Function,
vamos a ver como IntelliSense, que es este cuadrito, me empieza a ofrecer
opciones, así que puedo seleccionarlo para completar el código muchas
veces. En este caso, podemos también alimentar IntelliSense de alguna otra
extensión. Vamos a buscar alguna extensión que tenga que ver con
JavaScript. Aquí, cuando nosotros buscamos y escribimos el elemento
JavaScript, nos aparecen varias opciones. Dentro de estas opciones, dentro de
estas, por ejemplo, puedo elegir el caso de JavaScript. Puedo pulsar instalar y
me va a instalar una lista de Snippets. O también, si es el caso que estás
trabajando con Angular 1 o 2, puedes elegir cual es la opción que quieres. Te
recomiendo esta versión de John Papa, porque sigue un estándar web. De
hecho, esta parte ya la teníamos aquí instalada. Veamos como podría funcionar,
por ejemplo. Yo aquí, en esta extensión, veo que existen varias opciones que me
ofrece esta extensión, en este caso, dice que si yo escribo ng-oneComponent,
me va a crear un componente de Angular, o un controlador o una directiva,
etc. En este caso, todo este elemento es un controlador, así que lo que puedo
trabajar aquí, simplemente es borrar todo esto, y voy a escribir: ng-one y vemos
como el mismo IntelliSense me empieza a ayudar. Si colocas tu cursor sobre el
ícono de información, cuando lo pulsas te indica que es lo que va a hacer. Así
también tienes más certeza de cual es el método que debes de elegir. Si te
llegas a equivocar y se cierra la ventana, todo se soluciona cuando pulsas el
juego de teclas Ctrl + Espacio. Esto vuelve a abrir todas las opciones. Entonces
aquí simplemente eliges la que deseas, en este caso, elegimos un controlador y
listo, comienzas a trabajar. Todo este código generado de manera
automática son Snippets de código al que puedes acceder a través de
IntelliSense. También IntelliSense me puede ayudar en ciertos casos cuando
escribo código, por ejemplo, en este caso, si yo escribo un objeto, y ponemos
VarsPesona, Vars va a ser igual a un objeto, vamos a declarar la propiedad, que
sea nombre, vamos a asignarle el valor de Sergio, y después aquí, voy a dejar a
propósito, sin coma entre las propiedades para poner, por ejemplo, la palabra
Mail, y voy a poner: [email protected] esto como una prueba. Podemos ver que
aparece subrayado en rojo la palabra Mail, ¿Qué sucede? Cuando yo coloco el
cursor encima el mismo IntelliSense identifica que aquí hay un error. Y me dice
que esperaba una coma, porque estamos trabajando con una
propiedad. Entonces, simplemente la puedo agregar. Si haces un clic,
automáticamente no va a suceder nada, pero tendrás que agregarlo, cuando lo
agregas, fíjate como esa opción ya desaparece. Así, obviamente te ayuda a
saber cuando estás escribiendo bien o mal un código en el caso de que tengas
mucha prisa al momento de codificar.

Tipos de completado de código con Intellisense

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Existe distintos tipos de completado cuando estamos usando IntelliSense, por
ejemplo, cuando yo escribo aquí "Persona", que es parte del objeto que yo
tengo, aquí mismo me indica que es lo que voy a escribir, en este caso, me
escribe cuales son las propiedades que podré tener. Yo escribo aquí Persona, y
después escribo punto, automáticamente cuando lo hago, o estoy definiendo
una propiedad y me empieza a indicar cuales son las propiedades que yo podría
estar utilizando. De hecho, vemos que aquí aparece un ícono determinado. Este
tipo de cosas o íconos determinados son los tipos de completado, en la
documentación de Visual Studio Code, podemos encontrar cuales son
los diferentes tipos. Como vemos, este cubo, que se hace familiar, porque era el
mismo cubo que aparecía en esa sección cuando yo escribía el punto como
podemos ver en esta parte. Ahora, cada vez que comienzo a escribir eso, puedo
identificar que es una variable. Y así, existen distintos tipos de íconos que puedo
trabajar. Entonces, puedo trabajar con métodos, funciones, clases, interfaces,
módulos, propiedades, símbolos, llaves, palabras, etc. Pero, es importante que
puedas identificarlos, así vas a saber, que es lo que vas a utilizar y no te
confundas cuando a veces un nombre es muy similar y sepas que lo que quieres
trabajar es una variable o una función, dependiendo del objeto que estés
utilizando. Esta definición de tipos nos ayuda bastante cuando empezamos a
escribir código de una manera más rápida.
Paleta de comandos de Visual Studio Code
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
La paleta de comandos es un espacio que posee Visual Studio Code para poder
acceder a ciertas partes de mi código de una manera más eficaz. Para poder
activar esta paleta de comandos lo que tengo que hacer en el caso de Mac es
utilizar el juego de teclas Comando, Shift y la tecla P; esto me abre un
espacio. Si yo estoy en Windows puedo utilizar Control, Shift y la tecla P. En este
caso podemos ver cómo me abre aquí un pico paréntesis y me ofrece abrir
algunas opciones es decir, algunos comandos que yo puedo ejecutar. Por
ejemplo puedo abrir algún elemento en este caso vamos a ver esto que
dice 'Abrir definición en el lateral'. Cuando yo lo pulso de este lado me debería
aparecer algún elemento de mi código. Vamos a intentarlo nuevamente y
probemos con alguna otra opción. Por ejemplo, dice 'Abrir el editor anterior
desde el historial' es decir, el archivo anterior que quedó abierto. Me va a decir
aquí qué archivos quedaron abiertos y yo puedo elegir alguno de ellos para
poderlo abrir. Así sucede cuando yo quiero irme hacia archivos anteriores y
recordar cuál había cerrado. Porque luego estamos trabajando y dices
'Bueno, yo cerré tal archivo o estuve trabajando con este otro pero recuerdo
que fue hace tres o cuatro archivos que lo cerré pero no recuerdo el
nombre'. Entonces simplemente puedes hacer esto, ¿ok? También algo que
puedes hacer con esta paleta de comandos al momento de abrirla es eliminar
por ejemplo ese pico paréntesis o escribir solamente el juego de teclas
Comando-P. Al hacer esto te va a desplegar el espacio simplemente para que
busques algún archivo. Claro, esto indexa todos los archivos de tu
proyecto. Entonces si tú tienes alguno que se llame 'Views' por ejemplo, aquí
mismo te van a aparecer todos los que tengan que ver con la palabra 'view'. Y
así tú podrás elegir de una manera más sencilla. Fíjate cómo esto tiene
divididas dos categorías: archivos abiertos recientemente y resultados de todos
los archivos. Así tú tienes todo planificado, separado y organizado. Y entonces
puedes elegir abrir el archivo que tú desees a partir de este tipo de
comandos. Si en algún momento tienes alguna duda sobre qué tipo de paleta
debes utilizar, simplemente puedes usar nuevamente Comando-P para que se
desplegue y pulsar el símbolo de interrogación. Al hacerlo, te muestra cuáles
son los comandos que existen disponibles, comandos para el editor y comandos
globales. Por ejemplo en la sección de comandos del editor hay uno que se
llama 'Ir a la línea'. Esto quiere decir que si yo escribo aquí un número de línea,
me va a enviar para allá. En este caso no se nota tanto la diferencia pero vemos
cómo se marca en un color contrastante, la línea donde se encuentra
ahora. Vamos a escribir por ejemplo ahora la línea número nueve. Cuando yo la
escribo vean cómo automáticamente se marca y mi cursor lo puedo colocar
ahí. De esta manera las paletas me pueden ayudar a trabajar de una
manera más rápida y navegar entre archivos. Así por ejemplo no tengo que ir
aquí y navegar dentro de todo el arbol de archivos para encontrar lo que yo
necesito.

Símbolos, categorías y nombres en Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Otra manera que tenemos de acceder a nuestros símbolos, es decir, a las
funciones o métodos que tenemos en nuestro código, es cuando utilizamos el
símbolo @. Por ejemplo, vamos a abrir la paleta y para esto podemos pulsar
"Comando+Shift+O" o "Ctrl+Shift+O", y vemos que nos aparece la @. En este
caso si tú no lo utilizas así, o si simplemente utilizas el "Comando+Ctrl+P" para
Windows o "Comando+P", puedes escribir la @. A partir de aquí, fíjate cómo
aparecen todos los elementos como símbolos. Si te das cuenta, aparecen todas
las funciones que tenemos definidas en nuestro código. Por ejemplo, aquí hay
algunas que no se muestran, como puede ser "derivar". Cuando tú le das clic,
automáticamente recorre el código hacia esa zona. Ahora, por ejemplo, veamos
que sucede si yo también tengo algún otro símbolo como pudiera ser una
variable. En este caso vamos a crear una variable que se llame "número" y
vamos a ponerla, va a ser igual a 2, punto y coma, voy a corregir esto. Y yo
puedo utilizar de nuevo la paleta y escribir el símbolo de gatito o símbolo
numeral. En este caso aquí yo puedo comenzar a escribir para ver cuáles son los
símbolos que yo puedo comenzar a trabajar. Si yo tengo algún símbolo, por
ejemplo, que se llame "número", vemos como en este caso este símbolo no lo
considera como algo coincidente. Pero si yo tuviera algún otro símbolo por
aquí que me pudiera servir, simplemente pudiera yo acceder a él. En este caso
puede trabajar con alguno de los elementos que tenemos en las librerías o
alguna cuestión que tengamos asignados. La idea es que podamos utilizar esta
paleta para poder navegar en cualquiera parte de nuestro código,
principalmente cuando tenemos código muy grande.

Errores y warnings en Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
El manejo de errores es otra gran característica que tiene Visual Studio
Code. Por ejemplo, en el caso de que tenga errores en el código no
necesariamente tiene que complilarlo simplemente verifica la sintaxis cuando
está mal escrita. En este caso podemos ver en la parte inferior de la pantalla que
tenemos un tache indicando el número 3, quiere decir que hay 3 errores. Si yo
doy clic aquí, o pulso el juego de teclas "Comando+Shift+M" me va a desplegar
esta ventana. Al poder hacerlo, puedo revisar dónde están los errores, incluso
me hace un listado de los errores que tengo alrededor de todos los
archivos. Como ves, aquí tengo errores en el archivo view1_test.js y
view2.js Entonces puedo hacer un clic en cada uno, ir y solucionarlo. Otra
manera que tengo de trabajar para poder revisar los errores es a través de la
tecla F8. Esta tecla F8 me va a permitir navegar alrededor de los errores y
entender cuál es el contexto. Entonces, si yo me encuentro en alguna de esas
posiciones, simplemente pulso la tecla F8 y al pulsarla me va a agregar un
espacio que es una línea en rojo, como podemos ver en pantalla, el cual es
meramente una ayuda visual, y me va a indicar aquí cuál es el error. Me dice
aquí que estaba esperando un paréntesis, entonces, simplemente, puedo
agregar el paréntesis que hacía falta para poder trabajar y con esto el error se
anula. Después puedo escribir otro F8 y voy al siguiente elemento. Me dice por
aquí que estaba esperando un punto y coma, pero veamos lo siguiente. No
toda la sintaxis que calcula es completamente exacta, pero por lo menos me
ayuda a darme cuenta de cuál es el error. En este caso el error es que me hacía
falta una letra, pues al momento de escribir la palabra "return" la escribí
mal. Entonces, con esto, ya tengo los errores y vemos en la parte de abajo cómo
van cambiando. Así entonces, si yo pulso F8 más en este archivo ya no tengo
ningún otro error. Para continuar buscando los demás errores simplemente
puedo regresar a mi panel de errores y volver a dar clic donde tenía el error que
estaba esperando y aquí, simplemente, puedo corregirlo. Si yo no tengo idea de
lo que me dice o no sé a qué se refiere, de nuevo puedo pulsar F8 para ubicar
exactamente dónde está el error y quiere decir que estaba esperando algún
argumento o que algo faltaba aquí para ser definido. Entonces, simplemente,
puedo eliminar o puedo corregir lo que necesite hasta que tenga la solución
adecuada. De esta manera yo puedo ir navegando en los errores que vaya
encontrando en mi aplicación. Así antes de que yo me pase a probar a un
navegador o pase a compilar mi código simplemente puedo verificar aquí
cuáles son los errores que existen y de encontrar los errores, entonces
simplemente solucionarlos. Esta es una manera muy sencilla de dar con este
tipo de errores y no estar buscando línea por línea.

Uso de automatizadores de tareas con Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Una de las cosas que usamos a menudo cuando trabajamos con desarrollo
web es la automatización de tareas. Para esto existen muchos tipos de
herramientas, como pueden ser Gulp o Grunt, este tipo de herramientas me
ayudan a hacer que ciertas tareas sean automatizadas. Por ejemplo, cuando yo
quiero minimizar el código de JavaScript o de CSS, o cuando quiero compilar
código de SAS hacia CSS, todo ese tipo de actividades resulta ser muy
engorrosa y generalmente tenemos que ejecutar un comando, en línea de
comandos, que sea algo así como Gulp Build, para que pueda construir, o Gulp
algo, dependiendo del comando que queramos. Incluso podemos levantar un
servidor web, o estar haciendo determinadas actividades como escuchar un
cambio y actualizar la pantalla, etc. Pero, Visual Studio Code tiene integrado el
manejo de tareas, ¿A qué se refiere con esto? Por ejemplo, veamos, este es un
archivo que se llama Gulp File, donde viene toda la definición de varias
tareas. Como vemos, aquí hay una tarea que se llama Watch, una tarea que se
llama UserRef, Images, y así tenemos una lista bastante amplia de tareas. Incluso
tenemos una tarea muy simple, que es la primera, que es una tarea que se llama
Hello. Es un método que simplemente manda a consola el texto o "Hola
Mundo". ¿Cómo podemos hacer para reconocer las tareas
automáticamente? Simple y sencillo, lo único que tendríamos que hacer es
ejecutar el comando Shft + P y aquí escribimos Tarea. Aquí cuando tenemos la
parte de "Ejecutar tarea", simplemente, vamos primero a la opción que
dice "Configurar ejecutor de tareas" y aquí elegimos cual es nuestro cliente. En
este caso, vamos a trabajar con Gulp, cuando lo hacemos automáticamente
detecta las tareas y me genera una plantilla. Esta plantilla generada, lo que va a
hacer es ejecutar el comando Gulp, pero veamos como lo ejecuta, tú puedes
ejecutar el comando Comando o Ctrl + Shft + V, y cada vez que lo ejecutas
empieza a levantarse una tarea, es decir, todas las tareas que tenemos
determinadas directamente en nuestro archivo de Gulp. Entonces, como ves,
empieza una tarea y termina, empieza otra y termina, y todas las tareas que
están definidas acá. Pero también podemos ejecutar determinadas
tareas cuando nosotros las elijamos, entonces ejecutas comando Shft + P para
abrir la paleta de comandos y escribimos la palabra tareas y vamos a la opción
"Ejecutar tareas", aquí tenemos una vista de todas. ¿Recuerdas la que decía
Hello? la seleccionamos y aquí me aparece el texto "Hola Mundo" que como
vemos es el texto de esta tarea que tenemos definida. Así entonces cada vez
que estás trabajando lo único que necesitas hacer es ejecutar el comando, en
este caso, Comando Shft + V para que se ejecuten todas las tareas que tienes
automatizadas sin necesitar de estar yendo a la línea de comandos. Esta
integración es una característica bastante buena de Visual Studio Code.

Refactoring de código con Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando hacemos refactoring de código nos referimos a poder modificar el
código de una manera más rápida. Por ejemplo, hay muchas actividades que
podemos hacer, entre ellas podemos mover una línea. Por ejemplo coloquemos
el cursor sobre alguna de estas líneas que tenemos en el código y pulsemos la
tecla Alt seguido de la flecha arriba o la flecha abajo. Al hacerlo podemos estar
moviendo una línea de lugar. Esto nos ayuda a mover las líneas más rápido. en
lugar de tener que estar cortando y pegando. Puedo incluso colocarme en la
función que yo necesite. Por ejemplo si yo tengo aquí una función 'sumar' y
pulso la tecla F12 automáticamente me lleva a la función. Aquí veamos,
solamente se ve muy pequeño. Cambiemos el nombre a la función que tenemos
hasta abajo. Por ejemplo aquí vamos a invocar una funcion que se llama
'derivar'. Si yo coloco mi función allí y pulso la tecla F12, automáticamente me
lleva a la definición de la función. Puede ser eso o algo también sencillo como
pulsar la tecla Control o Command y cuando la pulsamos y cruzamos el
cursor encima del nombre de la función eso se convierte como en un
link, damos clic y nos lleva a la función. Pero si solamente dejamos el cursor
aquí mismo nos muestra una ventana con el detalle de la función sin tener que
movernos del lugar. Cualquiera de las dos opciones es completamente
válida. Otra característica muy usable cuando trabajamos con refactoring de
código es cuando yo puedo seleccionar un texto y a partir de esto seleccionar
todos los que sean iguales y poder hacer un cambio. Por ejemplo si yo pulso el
juego de teclas Ctrl-D voy a seleccionar todas las ocurrencias o repeticiones que
tenga esta variable. En este caso aquí está el texto 'derivar' y si vemos aquí más
abajo también aparece el mismo texto. ¿Qué sucede? Que cuando yo
modifico el texto de arriba, por ejemplo, vamos a poner aquí otra parte, vamos
a poner un guión bajo que diga 'derivar_número', vamos a ver cómo en la parte
de abajo también se escribió. Hagamos un ejemplo más claro de esto. Vamos a
escribir aquí la palabra 'sumar' en alusión a la función que tenemos justo
debajo y vamos a mandar un par de parámetros. Siempre sencillo, elijo el
texto y pongo la palabra 'sumar' así yo puedo eliminarlo y puedo escribir lo que
yo quiera. Vamos a escribir por ejemplo ahora 'nuevaSuma' y vemos cómo al
mismo tiempo sucede. Imagínate hacer esto con diez 15 o 20 o más líneas de
código al mismo tiempo. Es algo increíble. Lo interesante de este proceso es
que también detecta patrones. Entonces cuando tú seleccionas todas las
opciones hay un cursor que se mueve exactamente en la misma posición a
partir de todas las ocurrencias que haya encontrado. Entonces yo puedo
moverme y hacer todas las modificaciones que yo necesite utilizando este
multicursor que me ofrece Visual Studio Code. Y ahora si bien ya habíamos
visto que podemos automatizar a través de 'beautify' el formateo del
código también lo puedo hacer manualmente. Por ejemplo, vamos a modificar
esta función y pulsemos el juego de teclas Alt-Shift-F. Esto automáticamente
formatea el código. También podemos recuperarlo cuando nosotros accedemos
a la paleta. Por ejemplo Comando o Ctrl-Shift-P y aquí simplemente escribimos
la palabra formatear. Aquí elegimos la opción que dice 'Formatear
código', seleccionamos y esto va a formatear todo el código que tenemos. Así
como puedes ver nosotros podemos trabajar con un refactoring de código más
actualizado y con mucha facilidad donde podemos mover líneas, podemos
navegar directamente entre las definiciones, podemos encontrar las
referencias simplemente con un juego de teclas, podemos cambiar las
ocurrencias o tener un multicursor sin necesidad de estar cambiando de uno en
uno o sin ni siquiera tener que ir a la búsqueda y hacer un reemplazo de las
palabras. Por lo cual todas estas herramientas de refactoring simplemente nos
van a facilitar la vida.

Debugging: eliminar errores en Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
(hombre) Visual Studio Code integra algunas herramientas para poder
"debuguear" una aplicación directamente en este editor de código. Es bastante
sencillo, veamos el siguiente ejemplo. En este caso, tenemos una aplicación
hecha con "Express" y nosotros lo que queremos es estar "debugueando" para
saber qué datos hay en determinada situación. Entonces, lo primero que
tenemos que hacer es acceder al menú para "el debuguer" o depuración y una
vez que accedemos aquí, lo primero que tenemos que hacer es levantar la
configuración. Vamos a encontrar este ícono, que parece como un tipo de
tuerca que nos da alusión a la configuración y tiene un punto rojo. Eso quiere
decir que vamos a generar el entorno. Aquí, vamos a elegir en qué entorno
vamos a trabajar. Seleccionamos la opción de "Node.js" Ya que tenemos la
opción, automáticamente nos crea un archivo con distintas configuraciones, que
por ahora, no nos vamos a meter ahí, pero tú puedes leerlas, y si tú gustas,
puedes modificarlas a cómo tú necesites. Podemos cerrar el archivo, no pasa
nada. Ahora si tú te regresas a los archivos vas a encontrar que se creó una
carpeta que se llama ".vscode" y aquí dentro está este archivo de
lanzamiento. Regresamos a la sección de depuración o "debugueo" y aquí,
simplemente vamos a pulsar el "Play". Cuando pulsamos el "Play" se levanta un
servidor, en este servidor podemos ver qué sucede en la consola, si no se
muestra automáticamente podemos dar clic en este botoncito y al dar clic se va
a desplegar la consola. Probemos cómo se ve esto, así que vamos a acceder
directamente a "localhost" en el puerto 3000 y vemos que se levantó el
servidor. Ahora ¿de qué manera me sirve la depuración? Si llegara a existir algún
error, automáticamente esto se detiene y como vemos, aquí empieza a suceder
todo lo que pasa en consola. Vamos a ver, por ejemplo, en el archivo "users.js"
que es una de las rutas que existen, vamos a crear, antes de la respuesta, un
objeto, entonces, por ejemplo, vamos a crear un objeto que se llame "persona"
y este objeto persona vamos a crearle dos propiedades, una propiedad que se
llame "nombre", por ejemplo, voy a poner aquí mi nombre y una propiedad que
se llame "apellido", aquí pondré mi apellido. Si yo quisiera ver qué sucede,
tengo dos opciones. Uno, puedo escribir aquí un "console.log" y puedo mandar
de parámetro el objeto "persona". Una vez que yo lo tengo listo, simplemente
pulso aquí, en el botón de reiniciar y esto va a levantar nuevamente el
servidor. Vamos a acceder aquí, pero como estamos trabajando en la ruta de
ususarios entonces escribimos "/users" Voy a dar clic derecho y voy a
inspeccionar el código y me dirigiré a la consola. Aquí en la consola,
simplemente no va a aparecer nada porque no estamos mostrando algo
directamente en pantalla, donde sí me va a aparecer va a ser directamente en la
consola de depuración. Vemos como aquí ya me salió el objeto, entonces yo
puedo estarlo viendo de esta manera, pero, una de las cosas interesantes es
aprovechar toda esa consola para poder depurar. Entonces lo que podría hacer
es ejecutar aquí un "breakpoint". Entonces si vemos, cada vez que paso por esta
sección, aparece un punto rojo eso significa un "breakpoint", entonces voy a dar
un clic para generar un "breakpoint" y voy a levantar, nuevamente, el
servidor. Cuando regreso y actualizo esto se detiene y automáticamente me
regresa a mi editor de código. Vemos cómo se detiene el proceso y aquí donde
está detenido empezamos a ver alguna variables y como tal vemos que aquí
existe el objeto "persona" y vemos que tiene las propiedades Así yo puedo
indagar entre los "request", entre las peticiones y entre todos los elementos que
yo pueda ir determinando. Así puedo agregar también tantos "breakpoints" yo
necesite y puedo ir avanzando paso a paso en cada una de las tareas que se van
ejecutando o puedo, simplemente ir un nivel más adentro o un nivel más
afuera o detener o actualizar este servidor. También es posible que yo pueda ser
"Watches" o estar observando cada una de las variables y los cambios que esta
va teniendo o, si yo necesito también, puedo establecer los puntos de
interrupción o los "breakpoints" directamente en esta parte de la consola. Como
ves, tener todas estas herramientas integradas te facilitará también mucho el
trabajo cuando tienes entornos de este tipo

Uso de la terminal integrada a Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Utilizar la terminal cuando estamos desarrollando web es una herramienta
indispensable generalmente viene instalada en todos los sabores de los
sistemas operativos, ya sea que trabajes con Windows, con Mac o con
Linux. Este tipo de herramientas generalmente vienen a parte, es decir, tu tienes
la terminal para abrirla en una ventana independiente y poder trabajar en
ella. Pero Visual Code tiene una implementación de ese terminal y puedes
ejecutarla en pantalla. Entonces, aquí para poderla levantar, lo único que
tenemos que hacer es ir al menú y poder levantarla. Si no la encuentras, puedes
escribir en Ayuda Terminal integrado y podemos ver que la encontramos dentro
del menú Ver, y dentro del menú Ver vemos que se encuentra aquí en la parte
de salida, Problemas Consola de depuración y tenemos la terminal
integrada. No existe como tal, un juego o un Shortcut de teclas que me permita
abrirlo rápidamente pero podemos definirlo. Cuando yo lo abro, podemos ver
como aquí se ejecuta directamente la línea de comandos y tengo disponibles
todos los comandos como si yo estuviera trabajando directamente en una
consola o en una ventana aparte. Entonces, si yo quisiera instalar alguna
cuestión, quisiera trabajar con alguno de los comandos que tengo
disponibles para mi computadora, lo puedo hacer directamente desde
aqui. Incluso si deseas ejecutar tareas como Gulp o lo que necesites, puedes
también levantarlas desde aquí, aunque recuerda que para Gulp, tenemos aquí
en Visual Studio Code directamente una manera más sencilla de invocar todas
esas tareas. Como tal, tener una terminal integrada te puede ayudar mucho para
que puedas facilitar todos los procesos y no estés cambiando de
pantalla. Incluso, si no tienes una pantalla muy grande de trabajo, esto va a ser
increíble porque vas a poder dedicar una parte cosiderable a tu código y una
parte considerable a la terminal en la cual estés trabajando. Si tienes una
terminal basada, por ejemplo en (inaudible) o estés utilizando algún Shell, como
puede ser Fish o ZH, etc. no importa, la que tengas predeterminada para tu
sistema operativo, es la que te aparecerá aquí predeterminada. Sin ningún
problema Incluso puedes abrir tantas instancias como necesites. A veces, en un
proyecto necesitas tener un servidor corriendo, otro servidor, otro proceso,
etc., entonces abres tantas pestañas necesites para crear una instancia nueva. Si
necesitas eliminarlo, simplemente las comienzas a eliminar desde aquí, y aquí,
en esta opción, en este Drop Down, vas a poder ver en que posición se
encuentra. Así entonces podrás trabajar directamente con una terminal
integrada en tu editor de código.

Uso de Git en el editor de código de Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Git es un repositorio de código que me va a servir para que yo pueda llevar
un control sobre las versiones que voy a trabajar en mi proyecto. Ahora, existen
muchas implementaciones y muchos servicios que lo utilizan, como puede ser
Bitbucket o como puede ser Github. Directamente cuando trabajamos con
Visual Studio Code hay una integración que podemos utilizar de Git. Si tú ya
tienes configurado un proyecto, cuando das clic en esta parte de
Git, simplemente vas a poder hacer todas las acciones normales. Si no lo tienes
y quieres trabajar de manera local, desde aquí puedes inicializar el repositorio y
cuando le das clic te aparecen todos los comandos. Realmente comandos muy
básicos que trabajamos con Git, como puede ser el Commit, cuando vas a
definir que ya terminaste de realizar una cierta tarea; un Pull cuando vas a traer
cambios de un servidor, un Push cuando vas a subir simplemente, vamos a
ejecutar el juego de teclas Ctrl-Enter cambios a un servidor, un AF cuando vas a
agregar archivos al sistema de tracking; es decir cuando le vas a decir a Git: "Ey
Git voy a trabajar con estos archivos, por favor, ponles atención". Entonces,
todos esos tipos de comandos están disponibles, incluso, hay más comandos
que van a estar disponibles aquí. Ahora, ¿Cómo funciona? Lo único que tú
tienes que hacer es escribir aquí el mensaje, en este caso, vamos a poner el
primer mensaje que diga: "primer carga de archivos"; una vez que ya lo
escribimos, simplemente, vamos a ejecutar el juego de teclas Ctrl-Enter o
Comando-Enter, esto es para ejecutar el Commit. Recuerda, si tú estás
trabajando con un repositorio remoto, esto lo tienes que subir haciendo Push; si
estás trabajando con un repositorio local, simplemente, va a quedar guardado
en tu repositorio local todos los cambios que hayas hecho. Incluso, si llegas a
hacer algún cambio, con Git puedes revisar qué tenías en una versión
previa. Vamos a agregar, por ejemplo, una variable nueva "bar hola=hola
mundo", es una variable sencilla. En cuanto sucede aquí algún cambio, vamos a
ver cómo aquí aparece como una modificación, incluso nos aparece un ícono de
eso. Vamos a agregar aquí la tarea "se agregó una nueva variable", hacemos
Comando-Enter y con esto ya tenemos listo en nuestro repositorio de
contenido local, el seguimiento a este cambio. Ahora vamos a ver en la lista de
archivos, puedo dar clic derecho sobre el archivo que estoy utilizando y puedo
utilizar la opción que dice Seleccionar para comparar. Pero ten cuidado porque
en este caso solamente va a comparar ese archivo contra otro que tú elijas, por
ejemplo, aquí voy a seleecionar otro que diga "Comparar con 'appjs'" y
obviamenteme va a comparar esos dos archivos y estos no tienen nada que ver,
lo que yo quiero es compararlo contra cuestiones previas. Entonces, lo que
tengo que hacer es acudir a una extensión que se llama Git History, vamos a
escribir aquí el nombre de Git y es la primera opción que nos aparece; lo
instalamos y una vez que ya está instalado, vamos a habilitarlo. Me dice "Ok",
esto va a reiniciar mi editor de texto y simplemente una vez que ya está
levantado voy a poder utilizarlo. Vamos a ver cómo ahora cuando doy clic
derecho sobre el archivo que quiero revisar, en la parte de abajo me aparece
una opción que dice View File History, lo voy a habilitar y en este momento en
la parte de arriba me indica cuáles son los archivos y los Commits que tengo. En
este caso, tengo un Commit donde dice "Se agregó una nueva variable" y tengo
el primer Commit, que fue la primera carga de archivos, voy a compararlo
contra esta versión. Cuando lo selecciono, me aparece una opción extra donde
decido qué voy a hacer. Quiero ver el Log de cambios, es decir, quién fue el
autor, cuáles fueron Commits, cuál fue el mensaje, quiero ver el contenido o
quiero compararlo contra algo más. Vamos a elegir la primera opción que dice
"View Change Log", cuando yo lo pongo, en la sección de abajo me indica quién
fue el autor, a qué hora se hizo, en qué fecha se hizo y cuál fue el mensaje. Las
otras opciones que me aparecen me van a permitir revisar contra este, por
ejemplo, el View File Contents y voy a poder visualizar cuál es el cambio que
está ocurriendo y aquí sí puedo utilizar, por ejemplo, un cambio. Es decir, yo
selecciono esta parte que dice "App", "Seleccionar para comparar", selecciono el
otro archivo y le pongo "Comparar con "appjs'" y ahora sí, aquí me aparecen los
cambios. Entonces, ahora sí puedo ver qué fue lo que cambió realmente y
podemos ver que, en este caso, lo que tenemos de cambio es una variable
nueva. Con esto ya tenemos un (Inaudible) bastante interesante donde
podemos ver qué cambios se han hecho entre los archivos y me permite, en
este caso, regresar un poco en el tiempo y ver qué había hecho en determinado
archivo. Así entonces, tenemos integrado Git en todo nuestro entorno de
desarrollo.

Personalizar el teclado y el editor de Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando venimos de trabajar con otros editores estamos acostumbrados a
ciertos "shortcuts", o a ciertos atajos en el teclado. Estos podemos configurarlos
también y personalizarlos a nuestro gusto y modo. Por ejemplo, si yo quiero
personalizar algún atajo nuevo, veamos este caso. Cuando yo quiero trabajar
con una terminal, nos damos cuenta que la terminal aquí no tiene ningún
"shortcut" agregado, entonces podemos agregar uno, así que podemos ir al
menú "Code" y entramos a las "Preferencias" y vamos a la opción que dice
"Métodos abreviados de teclado". Una vez que nosotros abrimos aquí esta
opción, vemos que del lado derecho en la parte inferior, hay un botón que
dice: "Definir enlace de teclado". Ya sea que tu escribas el juego de teclas que
ahí te indica o pulses sobre este botón verde. Cuando tu pulsas simplemente
vamos a escribir el juego de teclas que tu deseas. Por ejemplo, yo deseo que
aparezca "Comando T", es decir cada que yo use el juego de teclas "Comando
T" va a aparecer la terminal. Lo selecciono. Vamos a eliminar esta última opción,
que no voy a necesitar y me voy a quedar simplemente con esta parte. Elimino
ese comando y lo que voy a hacer es utilizar "IntelliSense". Así que pulsamos
"Ctrl Enter" y vamos a escribir la parte terminal. Vamos a ver que aquí están
todas las opciones que tienen que ver con terminal y seleccionamos aquí la
opción que dice "New". Esta opción que dice "New", lo que va a utilizar
siempre es que me va a generar una nueva terminal cada que yo use el juego de
teclas "Comando T". Guardamos y ahora sí voy a utilizar mis teclas y vamos a ver
cómo ya me aparece la terminal. Incluso, aunque aquí no te aparezca la opción
de que tienes un "shortcut", no te preocupes, con que aparezca aquí definido,
tu lo puedes utilizar. Ahora, otra opción interesante que hay para personalizar el
editor es cambiar el idioma, para lo cual, por ejemplo, vamos a entrar
utilizando la paleta de comandos y aquí vamos a escribir la palabra
"Language" o "Cambiar idioma". Cuando yo lo pongo aquí simplemente me
abre un archivo que se llama "Locale.Jason". Cuando yo abro este
"Locale.Jason", es una configuración como tal en mi computadora, ya que yo
elijo cuál es el idioma que yo necesito. Si yo elimino esa palabra que está entre
comillas, yo utilizo "IntelliSense" voy a poder ver la gran cantidad de variantes
idiomas. Ten cuidado, si tu elijes algún idioma que no entiendes, va a ser muy
difícil que llegues de nuevo a esta opción para poder actualizar tu archivo o
tendrás que ir directamente al archivo "Locale.Jason" a modificarlo
manualmente. En este caso vamos a cambiar "Inglés", voy a "Guardar" y
simplemente tengo que reiniciar "Visual Studio Code" para que aparezca en el
nuevo idioma. Como vemos ahora ya todos los menús están en el idioma
inglés porque yo hice este cambio en el idioma. Como ves "Visual Studio Code"
es una herramienta que podemos nosotros personalizar a nuestro gusto.

Conclusiones y despedida del curso Visual Studio Code

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Muchas gracias por seguir este curso, como ves, pudimos conseguir en gran
medida todo lo que podemos hacer con Visual Studio Code, y todos los
trabajos y tips escondidos por ahí para poder sacar más provecho cada vez que
escribimos código. Visual Studio Code es una gran herramienta para que
puedas comenzar a trabajar y crear tus aplicaciones web o aplicaciones móviles,
principalmente basadas con HTML, CSS y JavaScript. Aunque no olvides, que
también está disponible para trabajar con otros lenguajes como Python, CSharp
o C++. Es una gran herramienta, y además es gratuita. Entonces, puedes
descargarla y utilizarla en cualquier sistema operativo. Puedes trabajar con ella
en Windows, en Mac o en Linux. E incluso, si trabajas con Linux, puedes crear tu
propia distribución. Y aquí, puedes utilizar muchísimas cosas para poder
trabajar. Realmente es una gran herramienta, e integrarla en tu flujo de trabajo
es algo muy ágil. Lo mejor que puede tener es como herramienta, es que
consume muy bajos recursos de tu computadora, entonces puedes utilizarla
para levantar todos tus procesos sin preocuparte porque el editor de texto
consuma muchos recursos de tu computadora. Además, está bastante bien
hecha, y tiene muchas herramientas, como te has podido dar cuenta, que te van
a ayudar a potenciar tu trabajo de desarrollo. Esperamos que esto te sirva y que
sigas generando grandes aplicaciones.