Aprende Visual Studio Code

Pistas y atajos rápidos en Visual Studio Code

¡Prueba gratis durante 10 días

nuestros 1199 cursos !

Prueba gratis Mostrar modalidades de suscripción
Poder contar con pistas y atajos para ver o modificar el código sin tener que desplazarte a otro bloque de código es una tarea necesaria, y Visual Studio Code provee las herramientas necesarias para hacerlo con un simple atajo en el teclado.
05:16

Transcripción

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.

Aprende Visual Studio Code

Conoce las características del editor de código multiplataforma Visual Studio Code, como son IntelliSense, depurar desde su consola y trabajar directamente tu código en Git.

1:23 horas (26 Videos)
Muy útil y al punto.
Daniel V.
El curso, como la mayoría de V2B es excelente, va directo al punto y con información muy útil, esto es bueno sobre todo si no tienes mucho tiempo. Aün así, he notado que en curso de tecnologías multiplataforma, por ejemplo, este de visual studio code, hablan mucho de cómo usar x cosa en Mac y Windows, olvidandose de mencionar cómo sería en Linux. Por favor, contemplen también mencionar este tipo de cosas para los que somos usuarios de éste sistema.

Saludos.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.