Cursores múltiples y otras opciones y extensiones sencillas y útiles en Visual Studio Code

2
15441

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 :

 

También  me gustaría que vieras este video de 2 minutos para entender dónde estamos y a dónde vamos


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

2 COMENTARIOS

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad