Antes de empezar recordar que este tutorial forma parte de una cadena de tutoriales en las que pretendo simplemente probar tecnologías actuales. Aquí abajo podrás encontrarlos :
- Primero pasos con TypeScript con Microsoft Visual Studio Code
- Integración de GitHub / Git / GibHub Desktop y MS Visual Studio Code
- Instalación de Jest con TypeScript y MS Visual Studio Code
- Instalación de Prettier en MS Visual Studio Code
- Introducción a Parcel
- Verificación de formato de código con Eslint
- Configurando Github Actions junto con TypeScript, Jest, Parcel, Eslint y Prettier
- Desplegando nuestra aplicación TypeScript con GitHub Pages
- Iniciando un juego en TypeScript
- Conexión HTTP cliente-servidor con TypeScript
También me gustaría que vieras este video de 2 minutos para entender dónde estamos y a dónde vamos
En lo que pretendo estar entretenido las próximas semanas para jugar con #TypeScript. Recomendaciones de @cesalberca Me ha dicho que, cuando haya cacharreado, en un rato lo montamos todo 😭😭 pic.twitter.com/gdfBRFMQiT
— Roberto Canales Mora (@rcanalesmora) January 8, 2020
Mi equipo es Mac
macOS Catalina
Versión 10.15.2
MacBook Pro (15-inch, 2018)
Procesador 2,9 GHz Intel Core i9 de 6 núcleos
Memoria 32 GB 2400 MHz DDR4
Gráficos Intel UHD Graphics 630 1536 MB
Cuando imparto formación sobre metodologías ágiles a directivos siempre les insisto sobre un concepto Lean: amplificar aprendizaje. También gobernarlo, que no es poco.
Voy a poneros un ejemplo: pregunto a todos los asistentes cuál es la herramienta que más utilizan en el día a día.
Normalmente contestan que el correo electrónico.
Si les preguntas si saben siquiera para que valen la mitad de los menús de su herramienta de correo se quedan perplejos. ¿Podrían usar alguna opción de su menú para hacer el trabajo más sencillo?
¡¡¡La gente no conoce cómo se utilizan correctamente las herramientas !!!
También les comento qué pasaría si ellos mismos o cualquiera de sus subordinados recibiera el aviso de que su madre se ha caído de una escalera y está en el hospital. Todos me dicen que se irían corriendo y faltarían varios días. Al preguntarles ¡ ¿Pasaría algo? Todos contestan que realmente no, un poco de desajuste pero se viviría en el mismo caos controlable que siempre.
Por tanto, si una persona deja varias horas de hacer su trabajo para aprender sobre esos menús que no conoce y luego comparte un documento y una charla con sus compañeros ¿sería productivo para el colectivo? ¿No podría haber faltado esa misma persona ese tiempo empleado y hubiera afectado lo mismo?
Bueno, queda claro que hay pocas excusas para no dedicar un poquito de tiempo a mejorar el conocimiento de las herramientas. Obviamente esto no significa que se deba hacer anárquicamente, a criterio de cada persona o constantemente. Lo que digo es que hay que dedicar tiempo a mejorar el conocimiento base y compartirlo.
Recordad el contexto de lo que estoy haciendo, superar un reto (aunque lo he dejado unos días para terminar de revisar mi último libro)
Voy a repasar cosas tan sencillas como cursores múltiples y otras opciones contextuales y extensiones que ofrece el universo de MS Visual Studio Code para hacer la programación más sencilla.
En este ejemplo declaro unas variables. Parece que dar a una variable el nombre a y b no es lo más razonable. Tenemos que plantearnos siempre ¿cómo de mantenible será el código que generemos?
Cambiar en nombre de las variables en su definición y sus usos en Visual Studio Code es muy sencillo. Pulsamos el botón derecho aparece el menú contextual.
Fijaros que podemos dar a renombrar símbolo, lo mismo que si pulsamos F2.
Aparece una caja de texto interactiva y podemos introducir el nuevo nombre.
Que se sustituye en todo el documento.
Ahora bien, podemos querer hacer cambios en más de un punto del código pero selectivamente. Para ello podemos utilizar los multi-cursores.
Si pulsamos Command + Click, nos aparece un cursor en cada punto donde lo hagamos. Aquí imaginad que he escrito un punto y coma después de un case en vez de dos puntos. Puedo crear un cursor múltiple y borrarlo e insertar dos puntos y se hacen en todas las líneas a la vez.
Así quedaría el resultado, simplemente escribiendo una vez.
Podemos, a partir de la selección de una palabra seleccionar todas las ocurrencias.
Simplemente pongo el cursor en la palabra, por ejemplo coche y selecciono todas sus ocurrencias.
Ya me aparece un cursor múltiple sobre ellas
Cambiamos la palabra coche por vehículo y se producen los cambios en todos los cursores.
Podríamos luego aplicar el primer cambio, solo a la variable para renombrarla otra vez al gusto.
En el entorno hay muchas más cosas útiles: si restamos ya medio cegatos, como me va ya pasando, podemos querer hacer las fuentes más grandes.
Con Editor Font In las podemos ir aumentando a nuestro gusto. Con Editor Font Reset las dejamos como estaban.
Si queremos hacerlo, no solo con las pantallas de edición, con todo el IDE lo podemos hacer con View Zoom In.
Otra cosa que es muy útil, cuando alguien te interrumpe, es volver al último punto de edición con Command K y Command Q. Dejando pensado Command pulsamos kq.
Cuando te estas volviendo loco porque tienes muchas llaves anidadas y no encuentras la que corresponde (y mira que te entiendo bien) la opción Go to Bracket hace las cosas más sencillas.
Para evitar este problema definitivamente puede utilizar una extensión llamada Bracket Pair Colorized
De este modo, visualmente se puede comprobar cómo casan los ámbitos con colores.
Otra extensión que nos puede valer es Bracket Highlighter que nos permite ver en otro estilo los elementos de un ámbito.
Si pinchamos en la llave vemos todos los elementos afectados en Italica y un poco más grandes.
Algo bastante útil es crearte un fichero de los comandos que más utilizas y con la opción Run Selected Text del terminar y así no tienes que escribirlos.
Hay un montón de extensiones que nos pueden ser también muy útiles. Por ejemplo quiero poder abrir un fichero cualquiera en un navegador.
Podéis ver que por defecto no tenemos esa opción en un menú contextual.
Con el plugin Open In Browser
Ya disponemos de la opción
Una opción super interesante es disponer de Bookmarks. Cuando está tocando código entre distintos ficheros, por ejemplo html, css y TypeScript, es una buena opción saltar entre puntos concretos. Instalamos la extensión Bookmarks.
Y nos aparece una nueva opción en el menú contextualmente.
Podemos acceder a ellos en un nuevo menú en la barra de la izquierda, aunque lo más cómodo es saltar al anterior y al siguiente.
Ya que estamos usando Jest vamos a instalar una extensión para ejecutar test selectivamente llamado
Si usamos nuestro comando estándar vemos que se ejecutan los dos test que hemos creado
Después de instalar el plugin tenemos un menú contextual para ejecutar solo la sección seleccionada.
Vemos que ignora uno de ellos.
Bueno, supongo que lo habéis captado. Dedicar unos minutos a investigar las opciones de la herramienta puede hacer que vivas más cómodo en decenas de ocasiones, simplemente por no haberte parado a investigar un rato.
Esto de aprender a manejar las herramientas debería ser un taller obligatorio en el proceso de OnBoarding de cualquier empresa y seguro que en cada re-edición alguien podría aportar algún truco o información sobre una extensión nueva que nos hiciera la vida más fácil.
Aquí os dejo mi siguiente tutorial.
El juego de la Vida en TypeScript con TDD y medida de cobertura en Jest
Muy interesante, sin embargo tengo en contra un punto, ¿Por qué no tienes VSC en español si es algo tan fácil de configurar?
Tiene una explicación usarlo en Ingles (sino se complican los verbos a usar contra los repositorios y prefiero usarlos tal cual): mira este tutorial https://www.adictosaltrabajo.com/2020/01/16/integracion-de-github-git-gibhub-desktop-y-ms-visual-studio-code/