Comandos personalizados en Visual Studio Code: tareas, snippets y atajos

Si pasas muchas horas programando, tarde o temprano te planteas cómo automatizar tareas repetitivas en Visual Studio Code: ejecutar scripts, transformar texto seleccionado, lanzar tests o abrir tu proyecto en el navegador con un par de teclas. VS Code es mucho más que un simple editor, y con los comandos personalizados, tareas, snippets y atajos puedes dejarlo totalmente a tu gusto.

En esta guía vamos a ver de forma muy completa cómo aprovechar todas esas opciones de personalización para montar un flujo de trabajo a medida: desde comandos basados en tasks.json, snippets de código, atajos de teclado y archivos JSON de configuración, hasta la relación con la Paleta de Comandos y cómo encaja todo esto con otros entornos como GitHub Codespaces o incluso el Visual Studio “grande” y proyectos proyectos .NET. La idea es que acabes con un entorno fino, rápido y adaptado a tu manera de trabajar.

Concepto de comandos personalizados en Visual Studio Code

Cuando hablamos de comandos personalizados en VS Code solemos mezclar varias piezas: tareas (tasks), atajos de teclado, snippets y la propia Paleta de Comandos. Todo gira en torno a ejecutar acciones concretas -simples o complejas- con una orden rápida o una combinación de teclas.

Un caso muy típico es querer hacer lo que permite Geany: enviar un bloque de texto seleccionado a un programa externo y sustituirlo por la salida de ese programa. En VS Code esto no existe tal cual de serie, pero se puede aproximar combinando tareas de tipo shell o process, extensiones específicas y atajos de teclado. Además, tienes otras herramientas muy potentes como los snippets o los múltiples cursores que, en la práctica, resuelven muchos problemas de automatización de escritura de código.

La clave es entender que VS Code está pensado para ser altamente configurable: idioma, temas, espacios de trabajo, extensiones, configuración avanzada, tareas y atajos. Todo eso se controla mediante archivos JSON (settings.json, tasks.json, keybindings.json, snippets por lenguaje, etc.) y a través de la interfaz gráfica integrada en el propio editor.

Además, en paralelo al editor ligero VS Code, existe Visual Studio (el IDE completo de Microsoft) que también permite personalizar métodos abreviados de teclado y exportarlos. No es exactamente lo mismo, pero las ideas de asignar comandos a teclas y compartir configuraciones son muy parecidas.

Personalización general de Visual Studio Code

Una de las grandes ventajas de VS Code es que casi cualquier cosa se puede ajustar: idioma de la interfaz, tema de color, estructura de trabajo, extensiones, configuración, tareas y atajos. Todo esto se organiza en varias categorías claras dentro del propio editor.

Cambiar el idioma del editor

Por defecto VS Code se instala en inglés, pero puedes poner la interfaz en español instalando el paquete de idioma. El proceso típico consiste en abrir la Paleta de Comandos con Ctrl+Shift+P o F1, escribir algo como “configure display language” y seleccionar el paquete Spanish Language Pack.

Una vez instalado el paquete, el editor te mostrará un aviso para reiniciar y aplicar el cambio de idioma. Tras reiniciar, toda la interfaz, menús y mensajes aparecen en español. Si por lo que sea no se aplica bien, siempre puedes desinstalar el paquete de idioma y volver a instalarlo para forzar el cambio.

Temas de color y apariencia

Visual Studio Code viene con varios temas de color organizados en tres grandes grupos: oscuros, claros y de alto contraste. El predeterminado es Dark Modern, pero puedes cambiarlo desde el menú de Apariencia o usando el icono de rueda dentada (Administrar) situado abajo a la izquierda.

Al abrir el selector de temas, verás una lista filtrable donde simplemente haces clic en el tema que quieras y se aplica al instante. Puedes pasar, por ejemplo, de Dark Modern a Light Modern para trabajar con fondo claro, o buscar otros temas instalados mediante extensiones si quieres un aspecto todavía más personalizado.

Áreas y espacios de trabajo

VS Code organiza tu código en lo que llama áreas de trabajo. El caso más común es trabajar con una carpeta como raíz del proyecto, lo que sería el área de trabajo clásica. Basta con abrir una carpeta desde el menú y el Explorador de VS Code tomará esa carpeta como base.

Desde la versión 1.18 se introdujeron también los espacios de trabajo con varias carpetas, que permiten agrupar distintos repositorios o proyectos en un mismo entorno. Esos espacios se guardan como archivos de configuración que puedes volver a abrir posteriormente.

En muchos entornos docentes o en proyectos sencillos compensa seguir usando una sola carpeta por proyecto, por organización y por mantener aisladas las configuraciones específicas dentro de cada curso o aplicación.

Extensiones: la puerta a más comandos

Buena parte de la magia de VS Code viene de sus extensiones, que amplían las funcionalidades del editor con nuevos lenguajes, herramientas, depuradores, snippets y comandos personalizados. Todas ellas se alojan en Visual Studio Code Marketplace y se gestionan cómodamente desde el propio editor. Si buscas ideas o recursos, consulta nuestros trucos y novedades de software relacionados.

Para instalar extensiones basta con ir al icono de Extensiones de la barra lateral, buscar por nombre o palabra clave, abrir la ficha de la extensión y pulsar en Instalar. Algunas requieren reiniciar el editor para activarse; otras se activan al vuelo. Una vez instaladas, también suelen incluir sus propios comandos en la Paleta de Comandos, que podrás combinar con atajos de teclado y tareas.

Preferencias de configuración (settings.json)

VS Code separa la configuración en dos niveles: ajustes de usuario (globales) y ajustes de área de trabajo. Los globales se aplican a todo lo que abras, mientras que la configuración de workspace afecta solo a la carpeta o a las carpetas del espacio de trabajo actual.

Los cambios se realizan normalmente desde la pantalla de Configuración, pero en realidad todos van a parar a dos archivos JSON llamados settings.json: uno global ubicado en el perfil del usuario, y otro dentro de la carpeta .vscode de cada proyecto. Puedes ver solo las opciones modificadas usando el filtro de la esquina superior derecha, y si prefieres editar a mano los JSON, hay accesos directos desde esa misma pantalla.

Cuando trabajes directamente con settings.json o cualquier archivo JSON de configuración, es muy importante escribir bien las rutas: usa barras normales (/) o dobles contrabarras (\\), pero nunca una sola contrabarra (\), porque en JSON la contrabarra simple actúa como carácter de escape. Si trabajas en Linux, puede ser útil revisar trucos específicos para tu distribución en nuestra guía de trucos de software Linux.

Cuando trabajes directamente con settings.json o cualquier archivo JSON de configuración, es muy importante escribir bien las rutas: usa barras normales (/) o dobles contrabarras (\\), pero nunca una sola contrabarra (\), porque en JSON la contrabarra simple actúa como carácter de escape.

Tareas en Visual Studio Code: base de muchos comandos personalizados

Las tareas de VS Code son una de las formas más potentes de crear comandos personalizados. Una tarea es básicamente una definición estructurada en JSON que indica qué comando ejecutar, con qué argumentos y cómo mostrar la salida, entre otros detalles. Se guardan en el archivo tasks.json.

Podemos distinguir entre tareas globales (de usuario) y tareas de área de trabajo. Las globales están disponibles en cualquier proyecto, mientras que las de workspace solo existen dentro de la carpeta o espacio de trabajo que tiene el archivo .vscode/tasks.json. Esto permite, por ejemplo, tener una tarea “Full Deploy” distinta para cada proyecto.

Preparación del archivo tasks.json

Para empezar a usar tareas dentro de un proyecto típico, lo normal es abrir la carpeta del proyecto, asegurarse de que existe una carpeta oculta .vscode en la raíz y, si no existe aún, crear dentro un archivo llamado tasks.json. Si lo haces desde la interfaz de VS Code, al crear una nueva tarea el propio editor te genera una plantilla.

En el caso de una tarea global, VS Code creará el archivo tasks.json en la carpeta de configuración de usuario (en Windows, dentro del perfil del usuario en AppData\Roaming\Code\User). A partir de ahí, puedes definir todas las tareas que quieras y reutilizarlas en distintos proyectos, siempre que tengan sentido en tu entorno.

Estructura básica de una tarea

Cada tarea se define mediante una serie de propiedades en JSON. Las más importantes para diseñar comandos personalizados son label, type, command y args, aunque hay muchas más para controlar el comportamiento avanzado.

• label: nombre descriptivo de la tarea, es el texto que verás al ejecutarla.
• type: tipo de tarea, por ejemplo shell, process, npm, gulp, grunt o typescript.
• command: el comando a ejecutar, como npm run dev o ionic serve.
• args: lista de argumentos adicionales para el comando (opcional).
• group: agrupación de la tarea, donde puedes indicar kind (build, test o none) y si es la isDefault del grupo.
• problemMatcher: reglas para detectar errores y advertencias en la salida del comando.
• detail: texto explicativo sobre lo que hace la tarea.
• presentation: controla cómo se muestra el resultado en la terminal integrada: si se ve el comando (echo), cuándo se abre la ventana (reveal), si se enfoca (focus) y el tipo de panel (panel: shared, dedicated, new).
• runOptions y runOn: cuándo y cómo se lanza la tarea, por ejemplo folderOpen para arrancarla al abrir el proyecto.

Con estas piezas puedes crear desde una tarea mínima que levante un servidor de desarrollo, hasta un pipeline interno que compile, lance tests y haga deploy de tu aplicación con un solo comando.

Tareas simples: un único comando

Una tarea simple consiste en ejecutar una sola acción. Imagínate un proyecto de Ionic en el que quieras disponer de un comando “Iniciar servidor” que lance ionic serve al abrir la carpeta. Bastaría con definir una tarea de tipo shell con el comando correspondiente y, si quieres ir un paso más allá, añadir runOn: «folderOpen» para que se ejecute sola nada más arrancar el workspace.

Para lanzar manualmente cualquier tarea, lo habitual es abrir la Paleta de Comandos con Ctrl+Shift+P, escribir Run Task y elegir de la lista el label que le hayas dado. Si es la tarea por defecto de build o test, también se integrará con otras funciones del editor.

Tareas compuestas: varios comandos encadenados

Donde realmente se ve el potencial de tasks.json es en las tareas compuestas. Este tipo de comando personalizado te permite ejecutar varias tareas hijas en secuencia o en paralelo. Un ejemplo clásico es una tarea “Full Deploy” que ejecute primero los tests, después haga el build y, por último, despliegue la app vía SSH.

La propiedad clave aquí es dependsOn, en la que indicas qué otras tareas deben ejecutarse cuando lanzas la tarea principal. Opcionalmente, puedes controlar el orden con dependsOrder, que admite valores como sequence o parallel para decidir si se ejecutan en cadena o a la vez.

Si alguna de las subtareas falla, por defecto se corta la ejecución de la siguiente, salvo que le digas expresamente que quieres seguir. De esta forma puedes tener un solo comando en la Paleta de Comandos -o asignado a una tecla- que ejecute todo el flujo de integración y despliegue de tu proyecto.

Snippets personalizados como “pseudo comandos”

Además de las tareas, otra forma muy práctica de crear “comandos” personalizados en VS Code es usar snippets de código. No ejecutan procesos externos, pero sí te permiten insertar bloques de código completos con un prefijo y la tecla Tab, lo que ahorra muchísimo tiempo al escribir estructuras repetitivas.

Para crear snippets, se abre la Paleta de Comandos (Ctrl+Shift+P) y se busca algo como “snippet”. Desde ahí puedes elegir si quieres un archivo de snippets global o específico para un lenguaje concreto (por ejemplo, PHP). VS Code abrirá un archivo JSON (por ejemplo, php.json) en el que añadirás tus definiciones.

Dentro de ese JSON, cada snippet tiene tres campos principales: prefix (el atajo que vas a escribir), body (el contenido de código, línea a línea) y description (una explicación breve para reconocerte cuando tengas muchos snippets).

Una técnica útil es utilizar un mismo prefijo base para todos tus snippets personales, por ejemplo algo con guion bajo tipo _wpada. Así evitas choques con atajos creados por extensiones y puedes reconocer al vuelo qué snippets has definido tú.

Para que la inserción sea totalmente fluida, merece la pena revisar en la configuración que tienes activada la opción editor.tabCompletion. Con eso puedes escribir el prefijo y, al pulsar Tab, se inserta directamente el snippet seleccionado.

Ejemplo de snippet para WordPress y uso de tabstops

Imagina un snippet llamado “WP Add action” asociado al prefijo _wpada dentro de tus snippets de PHP. Al escribir ese prefijo en un archivo PHP, VS Code mostrará una lista con tus snippets que contengan ese texto, incluyendo la descripción que hayas puesto, y al confirmarlo insertará el código que hayas definido.

Una de las gracias de los snippets es que soportan tabstops numerados como $1, $2, $3. El cursor se va moviendo de uno a otro cada vez que pulsas Tab, lo que permite preparar varias posiciones donde escribir. Incluso puedes repetir el mismo número ($1) en varias partes del snippet para que se cree un multicursor y se escriba lo mismo en esos puntos a la vez.

De esta forma puedes montar un snippet que, por ejemplo, te inserte el esqueleto de una función con el nombre en varias zonas, un comentario de documentación y el interior listo para escribir, todo controlado a base de Tab. Es una manera muy cómoda de estandarizar patrones de código dentro de un proyecto, sin necesidad de recordar la estructura exacta cada vez.

Crear snippets todavía más rápido con extensiones

Si andar editando JSON te da pereza, hay extensiones como snippet-creator que permiten crear snippets directamente desde el código que ya tienes en un archivo. Su funcionamiento suele ser: escribes el bloque de código que quieres generalizar, abres la Paleta de Comandos, buscas algo tipo “Create snippet” y la extensión te pide nombre, prefijo, descripción y lenguaje.

Al finalizar, el snippet se guarda automáticamente en el JSON de snippets correspondiente y desde ese momento lo podrás invocar por su prefijo y Tab. Aunque algunas de estas extensiones dejan de mantenerse con el tiempo, sigue siendo una opción cómoda si vas a generar muchos snippets en poco tiempo.

Atajos de teclado en VS Code y su relación con los comandos

Los atajos de teclado son el pegamento que une todas estas piezas. A través de ellos puedes lanzar comandos nativos del editor, ejecutar tareas, activar extensiones o controlar la edición de código sin soltar el teclado. Cuanto más los uses, más sensación de fluidez tendrás en el día a día.

Visual Studio Code viene con una gran colección de atajos predefinidos para cosas como abrir archivos, cambiar entre pestañas, duplicar líneas, comentar código, abrir la terminal integrada, buscar y reemplazar, moverte entre símbolos, etc. Además, permite crear tus propios atajos y modificarlos a tu gusto.

Crear, modificar y eliminar atajos de teclado

Para gestionar atajos, puedes abrir el menú de preferencias de teclado desde la rueda dentada o mediante el comando Preferences: Open Keyboard Shortcuts. Se abrirá una pestaña con una tabla donde aparecen todos los comandos disponibles y las combinaciones actualmente asociadas.

Si quieres asignar un nuevo atajo a un comando, lo buscas en la lista (puedes filtrar por nombre, por ejemplo escribiendo “actualizaciones” o parte del nombre en inglés) y haces doble clic para indicar la combinación de teclas. Si usas, por ejemplo, Ctrl+Alt+a y está libre, quedará asignado al comando. Si tenía ya otra combinación, puedes cambiarla o eliminarla desde el menú contextual.

Además, hay un archivo JSON específico llamado keybindings.json en el que puedes definir atajos directamente como objetos JSON. Esto es muy útil si quieres copiar tu mapa de teclas entre máquinas o compartirlo con tu equipo, o si te sientes más cómodo editando todo de forma declarativa.

Archivo keybindings.json y alcance de los atajos

El archivo keybindings.json global se guarda en la misma carpeta de configuración de usuario donde está settings.json. Inicialmente suele estar vacío, y se va llenando a medida que personalizas o añades atajos desde la interfaz gráfica o los escribes a mano.

Dentro de este archivo puedes, por ejemplo, crear atajos para abrir archivos en distintos navegadores, lanzar tareas concretas o activar comandos de extensiones. Cada entrada indica la combinación de teclas, el comando y, opcionalmente, condiciones de contexto.

Hay que tener en cuenta que estos atajos tienen alcance global dentro de VS Code, es decir, se aplican en todas las áreas de trabajo. Si un atajo dispara una tarea pero esa tarea no existe en el workspace actual (porque no hay tasks.json con esa etiqueta), el atajo no hará nada, así que conviene mantener cierta coherencia entre tus bindings y las tareas que usas en cada proyecto.

Dominar los atajos: básicos, avanzados y trucos para recordarlos

Para sacarle partido de verdad a los comandos personalizados, merece la pena interiorizar unos cuantos atajos básicos de navegación y edición: abrir archivos con Ctrl+P, alternar pestañas con Ctrl+Tab, cerrar y reabrir pestañas con Ctrl+W y Ctrl+Shift+T, comentar y descomentar con Ctrl/, duplicar líneas o moverlas con combinaciones de Alt y cursores, etc.

Cuando ya tienes controlados los básicos, puedes pasar a funciones avanzadas como los múltiples cursores mediante Alt+clic, la selección vertical con Shift+Alt al arrastrar, la búsqueda de símbolos con Ctrl+T o saltar a definiciones con F12. Todo esto te permite dejar muy atrás la dependencia del ratón y moverte con mucha más agilidad.

Si te cuesta quedarte con todos los atajos, el propio VS Code incorpora un panel de referencia accesible con Ctrl+K Ctrl+S, y muchas acciones muestran el atajo correspondiente en los menús contextuales. También existen extensiones tipo “cheat sheet” y, si te va lo clásico, siempre puedes imprimir una chuleta con tus atajos favoritos y tenerla al lado hasta que te los sepas de memoria.

Visual Studio “clásico” y sus métodos abreviados personalizados

Aunque esta guía se centra en VS Code, conviene mencionar que el IDE Visual Studio también permite personalizar métodos abreviados de teclado de forma muy granular. La filosofía es similar, aunque la interfaz y los nombres de los menús cambian.

En Visual Studio clásico puedes abrir el cuadro de diálogo de opciones, entrar en la sección de Teclado dentro del entorno y buscar comandos por nombre sin espacios, por ejemplo “solutionexplorer”. A partir de ahí seleccionas el comando, eliges el contexto (como Global) y le asignas una combinación de teclas.

La idea de contexto es importante: si un atajo está definido solo en el contexto Global, siempre ejecutará el mismo comando. Pero es posible asignar la misma combinación a comandos distintos dependiendo de si estás en el Explorador de Soluciones, en un diseñador concreto, etc., en cuyo caso el contexto específico tiene prioridad.

Además, Visual Studio ofrece la opción de exportar e importar configuraciones de teclado. Puedes guardar solo la parte de “Teclado” en un archivo y compartirlo con compañeros para que todos tengáis el mismo esquema de atajos, del mismo modo que en VS Code puedes sincronizar tu keybindings.json.

Paleta de Comandos y GitHub Codespaces

La Paleta de Comandos de VS Code es el punto de entrada común para casi todo: ejecutar tareas, lanzar snippets, activar comandos de extensiones y manejar funcionalidades de GitHub Codespaces. Accedes a ella con Ctrl+Shift+P o F1, y a partir de ahí solo tienes que empezar a escribir el nombre del comando que buscas.

En el contexto de Codespaces, la Paleta de Comandos ofrece acciones específicas como detener el codespace actual, reconstruir el contenedor de desarrollo, añadir configuraciones predefinidas o exportar logs. Basta con escribir “Codespaces” y verás los comandos relacionados.

Si, por ejemplo, necesitas que se apliquen cambios de secretos o quieres cambiar el tipo de máquina, tendrás que detener y reiniciar el codespace. Esto se hace desde la Paleta escribiendo algo como “Stop Current Codespace”. Para reconstruir el contenedor tras modificar devcontainer.json o el Dockerfile, buscarías “Rebuild Container” y seleccionarías el comando correspondiente.

También hay comandos para exportar todos los registros relacionados con Codespaces o ver los logs de creación del contenedor. Estos son muy útiles cuando algo falla durante la configuración y necesitas diagnosticar qué ha pasado exactamente durante el proceso de build del entorno remoto.

Al final, la Paleta de Comandos se convierte en el lugar único desde donde descubrir y lanzar todos los comandos disponibles, tanto los nativos del editor como los aportados por extensiones o por el propio entorno de GitHub Codespaces.

Viendo todo lo anterior, se entiende por qué Visual Studio Code se ha ganado un hueco tan grande entre los desarrolladores: con un poco de mimo puedes combinar tareas, snippets, atajos y configuración JSON para construir un entorno que encaja como un guante con tu forma de trabajar, transformar texto casi a medida de lo que harías en editores como Geany y, en general, librarte de muchas tareas mecánicas para centrarte en lo que importa: escribir y mantener buen código con el mínimo esfuerzo extra posible.