Visual Studio Code Dia 2 Refactoring

Vídeo Guía

Vídeo 2: refactoring

Hola, en esta ocasión y en este segundo vídeo de la serie vamos a hablar sobre REFACTORING en Visual Studio Code, aprenderemos cómo utilizar la herramienta para mejorar nuestra productividad a la hora de digitar nuestro código y para mejorar nuestro resultado final Espero les guste bastante este vídeo

Bracket matching

Bracket matching simplemente es ir de un bracket ”{” o Paréntesis”(”, o en HTML de un mayor que ”>” o un menor que ”<”, hacía el que lo cierra exactamente.

Entonces si dígito (command+p) y escribo el comando brackets vemos que en el mac el shortcut es (shift+command+Ç) y ésta ce, ce francesa

alt text

¿Qué es lo que hace?, si me hago en esta llave (command+shift+Ç) Se va hacia abajo, si me hago en otra llave se va exactamente a la que lo cierra, si me voy para un archivo HTML por ejemplo me hago en un div se va del uno hacia el otro.

¿Quieren intentarlo con otro archivo, por ejemplo, un Typing? quiero un JS o un punto JSON, funciona Exactamente igual.

Emmet

Emmet Typing es la manera de introducir código HTML de una manera rápida por ejemplo si yo pongo (div.ul.li) y presiono Tab el automáticamente me lo auto completa

alt text

alt text

Aquí tuve un error de síntesis con el ul li

Vamos a ver, div.li*5 , por ejemplo, y me genera un div con clases li... eso no era lo que quería

alt text

alt text

Voy a hacerlo de otra manera div mayor que li por 5 Tab (div>li*5), ahora si tengo un div con 5 li adentro

alt text

alt text

Si quieren saber exactamente sobre emmet vamos a buscar este sitio https://emmet.io/ en donde podemos ver la documentación sobre este pluging para visual Studio Code. Vamos a buscar uno en específico, ya sabemos que es con mayor que, Sibling es con el mas (Sibling +), el climb up es con la tilde, multiplicación ya lo vimos que es con el asterisco, grouping es con él con el paréntesis, vamos a a copiar este

alt text

control+v Tab, como pueden ver en una sola línea digité, luego presione Tab y el me autocompleta todo el HTML.

alt text

El propósito de este curso no es aprender sobre emmet pero ya con la documentación que les acabo de referenciar pueden aprender y ser más productivos.

Seleccionar y Reemplazar

Ahora ¿cómo reemplazar una instancia, un nombre, una variable de una manera rápida? digamos que esté vm no nos gusta, Command+f2, seleccionamos la variable y luego podemos cambiar el nombre de una manera rápida, obviamente funciona con cualquier otra cosa como, por ejemplo métodos, command+f2, activar y cambio el activate por activar, ¿si?.

alt text

De esa manera podemos ser más productivos a la hora de tener que cambiar nombres de métodos, propiedades, variables, etc.

Selección especifica

Pero, ¿Qué tal si deseamos seleccionar algo que sea preciso? con command+f2 Seleccionamos todas las instancias de vm pero queremos seleccionar todas las instancias vm pero que tengan el punto (vm.) también para eso con Command+shift+l, los seleccionamos y podemos cambiar todo en un solo instancia del teclado.

Ahora, ¿Qué pasa si queremos seleccionar varias partes del texto no necesariamente las mismas variables para cambiarlas rápidamente? entonces para eso tenemos la tecla alt y clic entonces por ejemplo alt+clic codeplay, alt+clic ángular, alt+clic dashboard, Alt+clic actívate, alt+clic getMessage, como pueden ver tengo varios textos seleccionados

alt text

Puedo empezar a digitar y se reemplaza en todos automáticamente

Escribir simultáneamente en varias lineas

Bueno y ¿Qué tal si queremos digitar en varios de lista, en varias líneas al mismo tiempo, pero no necesariamente reemplazando el valor de una variable? para eso tenemos el siguiente shortcut en mac con command+alt y las flechas pueden ver que estoy seleccionando, varios cursores o un cursor en múltiples líneas al mismo tiempo.

alt text

Por ejemplo si queremos comentar estas cuatro líneas de código de una manera fácil simplemente //HELLO, y eso es todo, espero les guste.

alt text

Seleccionar y saltar

¿Qué pasa si queremos seleccionar varias instancias por ejemplo de la misma propiedad del mismo método o de un objeto y queremos saltarnos una? Entonces con command+d seleccionamos, pueden ver el cursor selecciono el primero, luego selecciono el segundo, luego otra vez di, va a seleccionar el tercero, otra vez command+d seleccióna al cuarto en la parte inferior. Ahora, command+k y luego otra vez Command+d, ¿Que es lo que pasa? se saltó el este y si seleccionó este, ¿sí? y luego puedo digitar lo que quiera ctrl+z para devolvernos.

alt text

Shortcuts e IntelliSense

Antes de continuar me parece importante que ustedes conozcan todos los shortcuts si buscan en Google, VS Code shortcuts for mac o VS Code shortcuts for Windows, obtendrán este pdf :

El cual pueden imprimir para tener a la mano e ir aprendiendo cada uno de estos atajos que les estoy enseñando.

Visual Studio Code tiene intelliSenSe para cualquier tipo de archivos según los plugins que tengamos instalados y nativa mente para los archivos de visual y entre otras extensiones. Aquí estoy en un archivo bower.json.

Y si no nos sabemos la sintaxis o las propiedades y claves, o las claves y valores que queremos digitar, simplemente así como lo tenemos en Visual Studio, con control espacio, podemos tener acceso a las propiedades que necesitamos, como pueden ver las que están aquí son las que no están digitadas, osea que él ignora las que ya tienen un valor como autores nombre versión, descripción, etc. Entonces aquí simplemente aparecen las que no han sido utilizadas dentro del archivo.

alt text

IntelliSenSe en: Hojas de estilo

La intelliSenSe en Visual Studio Code como les decía, funciona para muchos tipos de archivo y dependiendo de lo que tengamos instalado, pero nativamente obviamente viene para hojas de estilo; entonces, vamos a crear una hoja de estilo, A nuestro estilo, aquí lo tenemos ,tenemos todos los atributos necesarios en una hoja estilo (display: abs(23);),(Ctrl Espacio),(font-style), (Ctrl Z) aquí, (Ctrl Espacio), Aquí tienen todo lo que podamos utilizar en la parte izquierda obviamente están los atributos, y en la parte derecha están los valores.

IntelliSenSe en valores obviamente no hay, Font-style aríal, no Font-style bold eso es para el otro es para la fuente aquí tenemos un error Semi colon expected, obviamente listo, entonces ese es el intelliSenSe para hojas de estilo.

alt text

También se puede hacer con estilos como los de webkit , entonces por ejemplo moz-animation, dice shortcut para la propiedad que combina seis de las propiedades de animación dentro de una sola propiedad.

alt text

A mi interesa también en este momento y mostrarle los de los cuadros circulares redondeados Ms-box-sizing ,box-pack bueno realmente se me perdió pero al que yo me refiero es este de aca Ms-box-shadow.

alt text

Miren que este webkit es para Firefox, este es para Internet Explorer y este es para Google Chrome, entonces dentro de la misma línea tengo las propiedades para definir estilos para diferentes navegadores miren que aquí si yo me paro sobre este moz-animation para Firefox.

alt text

Hay unos que tienen ayuda al pararme encima hay otros que no lo tienen, border-radius sirve para edge, Firefox 4 en adelante, Safari 5 en adelante, Chrome, IE9 en adelante, opera 10.5; entonces, vean que esa ayuda es bastante interesante nos puede el reducir el tiempo de desarrollo, cuando estemos haciendo algo que tenga que ver con hojas de estilo.

Colores

Con respecto a los colores, sí ven en la parte superior están unos colores en hexadecimal y también el color en la parte izquierda.

alt text

Lo bueno de Visual Studio Code es que a medida que digitamos los colores el nos va mostrando el color en este cuadro. Entonces vamos a por ejemplo reemplazar este 3 por un uno, este 2 por una a, si ve, como cambio de morado a un gris o verde no sé qué es ese color bastante interesante para estar seguros de qué color estamos utilizando.

alt text

IntelliSenSe en: JS

Ahora hablando de intelliSenSe en JS, obviamente en TypeScript lo hay,por ejemplo, si estoy en Angular en éste en este Dataservice y doy Angular punto (Angular.) El me detecta todas las interfaces, los métodos, las propiedades que puedo utilizar, ¿sí?.

alt text

Typings

¿Cómo hace Angular para saber esto o cómo Hace Visual Studio para hacer esto?, esto es por unos archivos que son los Typings cuando instalamos esta esta herramienta o este código dentro de la angular debe haber algún archivo que es el que define los Typings para no buscarlos simplemente le voy a dar ir a la definición f12 go to definition y el Me abre automáticamente Angular-ui-router.d.ts.

alt text

alt text

Es decir es un archivo de tal definición es el archivo donde se declaran todas esas variables, atributos, métodos, propiedades que podemos utilizar dentro de nuestro código, esto es bastante interesante porque de esta manera estamos seguros que estamos utilizando el código para que satisfaga los métodos, las propiedades existentes en Visual Studio .NET, por ejemplo, algunas veces el intelliSenSe no funciona muy bien y es por eso, porque no funciona con Typings; aunque el Visual Studio se puede configurar para utilizar Typings también, digamos que en VS Code es algo natural, cuando yo instalo un paquete con npm; nmp -i Angular por ejemplo él me va a descargar también los Typings de esa manera yo puedo utilizar el intelliSenSe cuando sea necesario vemos aqui por ejemplo: dentro del, después del punto catch vea todo lo que puedo utilizar

alt text

O aquí en el http punto. Aquí tengo el get, getMessageCount, etc

alt text

¿Dónde más puedo mirarlo? response este caso no lo tiene, por qué no se sabe que los response este momento de la ejecución o simplemente porque de pronto el Typing para este método no los tenemos vamonos para otro por ejemplo routerHelper, getStates, miremos Hay esta, Angular app route, getStates, module, etc.

alt text

Entonces es importante saber que contamos con ese nivel de inteligence tanto en archivos de TypeScript de JS, html, css, etc.

Resumen

Hola de nuevo entonces ¿Qué aprendimos durante el día de hoy? aprendimos lo que es bracket matching. Es decir, cómo navegar entre un bracket o un paréntesis un mayor o menor que a otro con el teclado de manera eficiente, aprendimos sobre la sintaxis de tipo emmet para digitar rápidamente en archivos HTML.

Para los que no lo recuerdan o simplemente lo volveré a hacer aquí div>li>ul*5 Tab

Aprendimos también sobre la parte de selección y multi cursores, cómo reemplazar rápidamente variables métodos con el mismo nombre cómo seleccionar múltiple mente con alt+clic; también, aprendimos:

  • Como seleccionar el mismo cursor en varias líneas al mismo tiempo para digitar el mismo código.
  • Los mismos comentarios en varias líneas
  • El intelliSenSe en archivos punto JSON (.json) en archivos CSS y en archivos JavaScript
  • Typings, los Typings simplemente son archivos generados por terceros nosotros no los tenemos que hacer, nos permiten digamos que mejorar a la hora de tirar código, ese intelliSenSe que Visual Studio nos da, los Typings normalmente se instalan cuando instalamos un paquete con en el npm como por decir npm -i Angular el nos instala el Typing para angular de tal manera que lo podamos reutilizar.

Por hoy es todo éste vídeo ya está llegando prácticamente a los 20 minutos, incluyendo las pausas, para mí es muy importante saber que éste esto no es algo 100% preparado yo lo hago al mismo tiempo que voy practicando y explicándoles a ustedes como pueden ver hay pausas hay pausas en el sonido de fondo hay pausas en el vídeo espero que de esta manera se vea un toque más familiar para estos vídeos.

Si tienen alguna sugerencia alguna recomendación es bienvenida incluso ustedes pueden ver que en algunas partes me he equivocado con los Shortcuts, me he equivocado con lo que estoy digitando para que vean que no es algo que está 100% preparado que yo no tengo un discurso escrito aquí al lado, sino que lo estoy haciendo junto con ustedes para que aprendamos de principio a fin todo lo que tenga que ver con Visual Studio Code, Typescript y react y SharePoint Framework.

Ha sido un placer traer es este segundo vídeo en el día de mañana hablaremos sobre snippets ir a la definición buscar referencias el pick, referencias en Typescript hablaremos sobre buscar y renombrar símbolos sobre errores y formateo y un pequeño resumen.

Espero haya sido de su agrado, nos vemos mañana.