La programación a menudo implica el llamado “trabajo de mono“, es decir, algunos procedimientos se vuelven monótonos y repetitivos y se busca una forma de “automatizar” o “aligerar” algunas de estas tareas. Entonces, vamos a ver las herramientas que ofrece Visual Studio Code en este sentido.
Multicursor
Probablemente mi función favorita. Con el multicursor se puede modificar un texto en varios puntos a la vez.
Coloca otro cursor usando el mouse
Para activar esta función, coloca el mouse en uno de los puntos donde desees agregar un cursor, luego mantén presionada la tecla ALT y haz clic con el botón izquierdo del mouse.
A partir de ahora, cada letra que escribas o cada movimiento del cursor con las teclas de flecha también se replicará en el segundo cursor.
Si quieres, puedes cambiar la combinación que ofrece usando la tecla CTRL en lugar de ALT, personalmente me resulta más cómodo.
Para hacer eso, ve al elemento “Selección” de la barra de menú superior y luego hazclic en la penúltima opción, cuya etiqueta debe ser Cambiar a Ctrl-clic para Multi-cursor.
Puedes usar el mismo método para agregar selecciones completas al cursor.
Si mantienes presionada la tecla ALT y arrastras el mouse sobre una palabra, se agregará como un nuevo cursor; al hacer doble clic en una palabra, se resaltará instantáneamente, lo que facilitará el trabajo.
Con la misma combinación, colocando el mouse sobre una selección o cursor agregado previamente, puedes eliminarlo.
Colocar otros cursores en la columna
Si el código está bien “columnado” y estás en líneas vecinas, puedes agregar un cursor en la línea de debajo o encima de él presionando ALT+Shift+flecha arriba para agregar un cursor en la línea superior o ALT+Shift+flecha abajo para agregue un cursor en la línea de abajo.
Agregar controles deslizantes de repetición
Hagámoslo aún más sencillo, puedes resaltar una palabra o una variable y agregar cursores en las repeticiones que encuentres. Arrastra el cursor para seleccionar el término o frase relevante y luego presiona el método abreviado de teclado CTRL+d para seleccionar la siguiente ocurrencia.
La identificación del atajo es editor.action.addSelectionToNextFindMatch, también existe el atajo inverso, es decir editor.action.addSelectionToPreviousFindMatch, pero no está asociado con ninguna combinación o atajo de teclado de Visual Studio Code.
Usando esta combinación, se abre una pequeña ventana emergente en la parte superior derecha; que muestra los tres íconos que ya se ven en la búsqueda de la barra lateral.
Empezando por la izquierda, tienes:
- La búsqueda que distingue entre mayúsculas y minúsculas (es decir, permite distinguir entre mayúsculas y minúsculas).
- La coincidencia completa, es decir, la selección que tendrá lugar solo si la ocurrencia coincide con la búsqueda completa.
- La búsqueda que incluye expresiones regulares.
La ventana emergente estará presente durante un breve período de tiempo, por lo que si tienes que configurar algo, debes hacerlo dentro del ese tiempo.
Seleccionar todas las ocurrencias a la vez
También puedes seleccionar todas las ocurrencias de una sección resaltada en particular en un archivo. Se agregará un cursor a cada selección, para ello, luego de seleccionar el texto a buscar, presiona CTRL+Shift+l.
Nuevamente, prestando atención, vas a poder ver la ventana emergente con opciones de búsqueda en la parte superior derecha.
Modo de selección de columna
El modo de “selección de columna” significa que al resaltar varias líneas de texto, se abre un cursor para cada línea de ellas.
Puedes habilitar esta función desde la barra de menú haciendo clic en “Selección” y luego en el último elemento del menú, o “Modo de selección de columna”.
Por defecto esta opción no tiene asignada un atajo, pero puede ser muy conveniente el asignarle una. La identificación de la combinación es editor.action.toggleColumnSelection.
Copia y pegado múltiples
Cuando trabajas con varios cursores, cada vez que se resalten las zonas y se presiona “Copiar”, se copian todas al mismo tiempo.
Entonces es posible pegar de dos maneras diferentes:
- Si el número de cursores con los que se ha copiado el texto resaltado corresponde al número de cursores con los que se quiere pegar, cada selección se copiará en un cursor diferente respetando el orden de copia.
- Si el número de cursores en el destino es diferente, cada cursor pegará todas las selecciones copiadas, cada copia en una línea diferente.
Contraer el código
Sangría
y columnar no son sinónimos. Normalmente, el código tiene sangría; lo que significa que si un bloque contiene líneas de código u otros bloques, tendrán un nivel de tabulación adicional.
Columnar el código es, un concepto diferente, se trata de crear una estructura similar a una tabla donde partes de instrucciones similares están en una misma columna.
En algunos casos, un código en columnas puede significar una mejor lectura; pero debes de tener bastante cuidado. Debes usar un criterio de clasificación que justifique porque dos términos comienzan en una misma columna.
Anteriormente, se explicó, cómo a veces para manejar multicursores es importante tener un código en columnas. Puesto que te permita usar, por ejemplo, algunos atajos para agregar un cursor a la línea de arriba o de abajo.
Indentador de columna inteligente
Puede gustarte o no y puede ser útil o no. Pero por si te puede resultar útil, debes conocer que existe una extensión que automatiza el proceso de columnas: Smart Column Indenter con id lmcarreiro.vscode-smart-column-indenter.
Una vez instalada, para usarlo, simplemente debes resaltar una parte del código y abrir el panel de comandos (CTRL+Shift+p), luego buscar el comando “Sangría en N columnas”.
Otra función introducida por la extensión puede ser “Eliminar saltos de línea” que informa un código expresado en varias líneas en una sola línea, para que pueda dividirse utilizando la columna.
Siempre puede buscar otras opciones a través del panel de comandos o con un acceso directo disponible por la propia extensión: CTRL+i CTRL+i.
No para todos los idiomas
No todos los idiomas son adecuados para estar apilados. A menudo, en un lenguaje de programación, el carácter de “espacio” o el carácter de “tabulador” se pueden agregar en exceso, de ahí su uso para mantener el código en orden.
Pero existen lenguajes (como bash) en los que no se aplica ese razonamiento, por lo que se desaconseja utilizar este tipo de prácticas sin verificar que sean compatibles.
Importaciones automáticas
Algunos lenguajes admiten la importación automática de paquetes, es decir, buscan símbolos no reconocidos en el código dentro del framework.
Obviamente, para usar esta función, necesitas un servidor de idioma que sepa reconocer qué símbolos se pueden importar y desde dónde.
Al instalar las extensiones adecuadas para cada idioma, puedes acceder a la función de importación automática con la combinación Shift-ALT-O.
Sangría propia
Cuando el código pasa de mano en mano, no es raro encontrar a alguien que por desgracia, no lo ha sangrado.
En ese caso, antes de organizar una posible masacre en el lugar de trabajo, puede ser útil saber que existe una función de reformateo de documentos accesible con la combinación CTRL+Shift+I.
Formateadores
Entre las extensiones más interesantes, puedes encontrar varias capaces de personalizar la forma en que se debe sangrar un documento cuando se usa el acceso directo adecuado.
Uno de los más famosos es sin duda Prettier – Code Formatter con el id esbenp.prettier-vscode, una vez instalado hay debes decirle al editor que se use como formateador de documentos. El elemento debe agregarse entre las configuraciones editor.defaultFormatter insertando como valor esbenp.prettier-vscode.
{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
También puede especificarlo exclusivamente para idiomas individuales:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
La personalización puede entrar en infinidad de detalles, por ello, es recomendable leer la documentación oficial de la extensión.
Formatear al guardar
Puedes activar la opción de “Formatear al guardar” en la configuración de Visual Studio Code.
Como se puede adivinar por su propio nombre, luego de activarlo se formateará todo el documento cada vez que lo guardes.
Generación de fuentes
Algunos lenguajes tienen soporte para Code o Source Generation. Una vez instalada la extensión correspondiente al lenguaje de programación que se quiere utilizar, se activan una serie de funciones que automatizan y escriben parte del código autogenerado.
Por ejemplo, al instalar el servidor de lenguaje Java creado por Red Hat (id estensions redhat.java) presionando la combinación CTRL-ESPACIO, escribiendo unas palabras clave se generan las siguientes clases: get, set, System.out.println, etc.
Funciones útiles del panel de control
Ya se mencionó que al presionar CTRL+SHIFT+p se abre una ventana emergente en la parte superior de la pantalla con algunos comandos de Visual Studio Code, algunos pueden usarse para acelerar procesos que manualmente tomarían tiempo.
Cambiar mayúsculas y minúsculas
Escribiendo “Transformar a Mayúsculas” el texto seleccionado se convierte reemplazando todos los caracteres por sus correspondientes mayúsculas.
Del mismo modo están las funciones:
- “Transformar a minúsculas”.
- “Transformar en todos los títulos”.
Buscar corchetes
Muy a menudo, cuando te encuentras frente a un paréntesis cerrado, la pregunta es “¿ pero dónde lo abrí? ” La respuesta puede estar dada por este comando.
Colóquese en el soporte en cuestión y desde el panel de control busque “Ir al soporte” (o en italiano “Vai alla parentesi”).
También hay una combinación para el perezoso CTRL+SHIFT+. El id del atajo es editor.action.jumpToBracket.
Seleccionar hasta el paréntesis
De manera similar a lo dicho anteriormente, también es posible pensar en “resaltar” solo lo que está presente entre paréntesis.
En este caso, el comando a utilizar es “Seleccionar entre corchetes”.
No hay ninguna combinación asociada con esta acción, pero se puede establecer mediante el id editor.action.selectToBracket.
El comando ?
Presionando CTRL+p en lugar de CTRL+SHIFT+p se abre la búsqueda de archivos. Al escribir en este pop-up los caracteres ‘^’ o ‘@’ el pop-up adquirirá respectivamente el papel de panel de control en el primer caso, o la búsqueda de símbolo en el segundo.
Un carácter adicional que se puede usar en lugar de los anteriores es ‘?’ que muestra todas las formas en que se puede usar este panel desplegable.