El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Aprende Visual Studio Code

Completar código de Visual Studio Code con Intellisense

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Intellisense tiene la capacidad de entender el contexto donde se está escribiendo el código y darnos las recomendaciones necesarias y más adecuadas para facilitarnos la escritura de código, así como para mejorar la velocidad en que generamos nuevas líneas de trabajo.
05:08

Transcripción

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: Yo@Gmail.com 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.

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)
Actualmente no hay comentarios.
 

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.