Visual Studio Code Dia 3 snippets, refactoring y mas

Vídeo Guía

Vídeo 3: snippets

Hola, bienvenidos al vídeo número 3 en esta serie de Visual Studio Code.

Durante este vídeo aprenderemos la parte de Snippets de usuario como compartir Snippets, ir a la definición, buscar referencias, el pick (que es muy importante); referencias en TypeScript re nombrando símbolos, formateo y errores, espero sea de su total agrado.

Snippets

Los Snippets son simplemente pedazos de código que están grabados en una parte especial de Visual Studio Code que nos permite mejorar nuestra productividad, por ejemplo, aquí hay uno que se llama nglcontroller, directory, factory, filter. Hechos por Jonhpapa.

alt text

Enseguida les voy a mostrar cómo se instalan, simplemente yo le doy la tecla Tab y me auto completa el código me pone el cursor en las partes donde yo debo de personalizar el código.

alt text

alt text

My app y si le doy Tab otra vez se va a la segunda parte donde yo debo personalizar el código que es el nombre del controlador es decir EmpleadoContoller y como pueden ver me lo cambio en todas las partes desde donde era necesario.

alt text

alt text

Ahora, ¿Como se crean estos Snippets?, hay 2 formas primero se pueden descargar como plugins, entonces si nos vamos aquí al store, yo acabe de descargar un plugin que se llama Angular 1 JavaScript and TypeScriptSnippets por Johnpapa.

alt text

Pero vamos a ver otros, por ejemplo, Angular 2 de Snippets para que lo vean, pues aquí está, Angular 2, Angular 4 por ejemplo.

alt text

Ustedes pueden ver en la parte inferior como son los Snippets como se deben utilizar por ejemplo a-pipe vamos a instalar este, esta extensión y vamos a probarla.

alt text

Nos venimos para acá, a-pipe, aunque eso debe ser para archivos TypeScript por eso no me funciona en este. Vamos a crear un archivo TypeScript, a-pipe, y me auto completa el código necesario para ser un pipe en Angular 4.

alt text

alt text

Ahora ¿Cómo hacemos nuestros propios Snippets? nos vamos para preferencias, fragmentos de código, buscó el lenguaje que requiera este momento estoy buscando JavaScript, por ejemplo, y aquí están los en Snippets y están muy bien documentados.

alt text

alt text

alt text

Ahora, uno puede descargar Snippets de diferentes páginas o los puede instalar a través de plugins de extensiones como lo acaban de ver aquí, por ejemplo, hay uno en el Github de Johnpapa que son los mismos que acabamos de ver como una extensión, aquí están por si quieren copiarlos, pegarlos como un ejemplo. Para el caso mío simplemente lo voy a copiar.

alt text

Le vamos a poner un nombre a esté Snippet, "Hello World", helloWorld, Hello World snippet. Vamos a borrar tantas cosas de acá, function helloWorld y vamos a poner un return Hello.

alt text

Vamos a dividir la pantalla y en este otro, vamos a poner un archivo de JS para probar. Entonces el helloworld es el prefijo, el que se debe utilizar al digitar el Snippet, como lo pueden ver ahí está el Snippet que estoy editando y me lo auto completa.

alt text

alt text

Un error.

Ahora ¿Qué pasa si yo quiero que me ponga el cursor en partes especiales? entonces en ese caso utilizamos el dólar signo "$" el signo de dólar ,la parte donde lo queramos, por ejemplo, pongamos lo aquí, como un parámetro y entre corchetes, parámetro, borramos aquí, volvemos con el helloworld y el automáticamente me pone el cursor en el lugar adecuado.

alt text

Obviamente aquí hubiera sido mejor sin las comillas, puedo poner todos los parámetros que yo quiera,a mi parámetro le doy Tab y el automáticamente se sitúa en el segundo parámetro que quiero.

alt text

Entonces eso es todo con respecto a los Snippets me parece que puede mejorar la productividad de todos, espero les haya gustado esta sección.

Continuando con la parte de Refactoring

Hablemos sobre ir a la definición, buscar referencias, pick entre otros. Entonces vamos a hacerlo con el mouse para que ustedes vean en los atajos del teclado entonces sobre cualquier variable le puedo ir a la definición y automáticamente me me lleva a donde está declarada esa variable.

alt text

alt text

También podemos hacer lo mismo, que es ver la definición, que es un pick, que en otra ventana en la parte inferior estoy viendo en qué parte se definió esa variable.

alt text

Bastante interesante, y por último, tenemos lo que es buscar todas las referencias de esa variable por ejemplo buscar todas las referencias y de una en la parte inferior estoy viendo todas las partes donde se está utilizando esa esa variable o ese objeto, esa instancia esa propiedad, cualquier cosa que sea lo que estemos buscando.

alt text

Me parece bastante interesante, en algunas partes puede tener, se va a ir a la parte de los Typings que ya lo habíamos visto en el primer vídeo. Los Typings de TypeScript, por ejemplo, si yo me voy, creo que es el Módulo (.module) y le digo ir a la definición

alt text

Entonces me va a ir al módulo al archivo adjunto de punto ts donde se define el Typing, obviamente aquí, esos Typing no son para editar por nosotros simplemente están ahí como documentación para nosotros utilizar en nuestros proyectos

alt text

Trucos

Unos pequeños trucos, cuando ponemos el mouse encima de cualquier texto nos va a decir exactamente Visual Studio Code ¿Que es?(Esto es llamado Hover), por ejemplo, blocks es un namespace, logger es un namespace y por ultimo este otro logger es una clase.

alt text

alt text

alt text

Aquí por ejemplo GetMessageCountes un método, en algunas partes va a encontrar más información logger.info es un método, Dataservice es una propiedad, yo lo que quería mostrarles, por ejemplo, este all.

alt text

Miren que este punto all (this.$q.all(promises)) viene incluso con documentación combina múltiples promesas en una sola promesa que es resuelta cuando todas las promesas de entrada son resueltas.

Entonces, nos sirven para nosotros obtener más información sobre los APIs que estamos utilizando de terceros. Eso por un lado, otra forma, otra cosa que podemos hacer sobre los, digamos interfaces, clases, etc; es ir a la definición, esto lo acabamos de ver hacia algunos minutos pero lo que más me parece interesante qué es desde el punto de vista de la productividad, con la tecla command y alt en mac, control y alt en windows y el teclado, vean que esto todo esto se vuelve como si fuera un link.

alt text

Si yo le doy control command alt y data services inmediatamente me abrió otra ventana para yo ir allá y editar lo que tenga que editar,

alt text

Y lo mismo, si yo quiero ir al getMessageCount, si yo quiero ir al then, ese then obviamente es de un Typing, entonces no es recomendable editarlo, pero lo puedo hacer con los otros.

Navegando a los métodos, navegando a las propiedades a las Variables, etc. A todo lo que yo necesite.

Sigamos con un poquito más de trucos hablemos sobre cómo buscar código por ejemplo dentro de nuestros archivos o dentro del archivo que tenemos abierto entonces con command+p y el signo de interrogación tenemos varios comandos que nos sirven bastante para encontrar los símbolos que necesitamos.

alt text

Por ejemplo, dentro de un mismo archivo, luego uno bastante común es la arroba "@" que es ir al símbolo en el archivo.

alt text

Entonces simplemente yo puedo encontrar fácilmente si es un archivo bastante grande empiezo a digitar en la parte superior o sino simplemente lo seleccionó y él se me va directamente a este método

alt text

También lo puedo hacer con líneas entonces ir a la línea 21, por ejemplo.

alt text

Lo puedo hacer con ir a símbolo en el área de trabajo, por ejemplo, este ya no es con arroba, sino con el numeral y empecemos a buscar, por ejemplo, unos get y el me trae todos los get,

alt text

getMessageCount entonces aquí lo tengo getMessageCount está definido en la DataService está definido en la interfaz, está definido en el viewmodel y también está definido en el controller.

alt text

Entonces de esta manera podemos revisar eficientemente o encontrar eficientemente los métodos propiedades que estemos buscando.

Ahora, ¿Qué vamos a hacer? estoy parado sobre el getMessageCount y vamos a abrir la definición del getMessageCount como lo habíamos visto en los últimos minutos con command alt y el Teclado, entonces ¿eso que me hace? me abre la definición del getMessageCount en la interfaz en la parte derecha.

alt text

Refactory

Ahora, ¿Qué pasa si queremos a cambiar el nombre de ese método? así como lo hacemos en visual estudio podemos presionar F2 y cambiar el nombre

alt text

Entonces getConteoMensages Enter y también me lo cambio en este otro archivo DataService getConteoMensages aquí luego en la parte inferior

alt text

Entonces, hice un Refactory muy rápido de un nombre de un método a través de múltiples archivos lo cual es bastante productivo, nos mejoró la productividad si estamos acostumbrados a trabajar con el teclado

Formateo del código y posibles errores

Hablemos un poquito ahora sobre formateo del código y posibles errores

¿Cómo se manejan los errores o cómo se ven los errores? entonces aquí tengo una clase, lo que voy a hacer es dañar el formateo, los tabuladores, voy a quitar espacios en las llaves y voy a quitar los tabuladores por ac. Muchas veces algunas personas trabajan así.

¿Cómo hago para arreglar este tipo de código? entonces simplemente con command+p buscó el comando de formatear código o formatear documento que como pueden ver es, en el mac shift+alt+f para arreglarlo y él automáticamente me arregla el código digamos con unas reglas predefinidas que él tiene de espacio y de tabuladores etc

alt text

Ahora, ¿Qué pasa con los errores? entonces comentamos o insertemos algunos errores, por ejemplo, quitemos el tipo estos dos puntos al título.

alt text

Entonces lo que yo quiero que ustedes vean es que en la parte inferior izquierda aparece el número de errores,

alt text

Y cuando le doy clic automáticamente me aparecen todos los errores miren que un solo error en una en una línea puede dañarme todo el código dice que hay 15 en errores, pero realmente es uno que introduje, aquí estoy introduciendo otro y con arreglar ese se solucionarían todos.

alt text

Con command+p y el signo de admiración vamos a buscar errores, mostrar errores y advertencias, puedo ver esa esa esa ventana errores, en otras versiones de Visual Studio anteriores en Visual Studio Code los errores aparecían en la parte superior es decir aquí mismo pero en este caso ya los muestra es en la parte inferior.

Entonces tenemos este error en el título simplemente lo voy a corregir le voy a poner los dos puntos para corregirlo y miren que automáticamente se desaparecen los 15 errores que tenía, y aquí ésta este ¿Qué fue lo que pasó acá? que este era una variable que no era un String, sí, y de una se desaparece el error.

alt text

alt text

Resumen

Esto ha sido todo por este vídeo durante este vídeo vimos:

  • La parte de los Snippets, los Snippets se pueden instalar a través de extensiones de Visual Studio Code o los podemos editar nosotros mismos en los archivos .JSON.
  • Cómo ir a definiciones o símbolos.
  • Hacer el pick para poder ver la definición de una propiedad métodos, objeto, etcétera, dentro la misma ventana.
  • Cómo hacer Refactoring al cambiar nombres de métodos desde la clase que lo llamó o desde el archivo que lo llama y el inmediatamente hace el cambio también dónde está implementado ese método.
  • Hover, cuando ponemos el mouse encima sobre cualquier texto el Visual Studio Code nos dice exactamente qué es.
  • Acciones en el código.
  • El formateo de código, la parte de los errores y los warnings, y como Visual Studio Code nos ayuda a corregir todo eso de manera eficiente.

Eso es todo por hoy espero les haya gustado este tercer vídeo de la saga, de la serie en día de mañana vamos a ver más características de Visual Studio Code relacionadas con los lenguajes en específico, espero que les haya gustado hasta una próxima ocasión, hasta luego.