plaintextintermediate160 snippets

VS Code Turbo: Atajos para Codear sin Ratón

Suelta el ratón. La diferencia entre un Junior y un Senior muchas veces es la velocidad de navegación. Domina los atajos de refactorización, multi-cursor y terminal integrado.

Secciones10

⌨️ Atajos Esenciales

21 snippets

Navegando rápidamente, editando código, aumentando productividad.

Quick Open

Abre la paleta de comandos "Quick Open" para navegación rápida y apertura de archivos, permitiendo buscar por nombre de archivo en el proyecto actual. Útil para localizar y abrir archivos rápidamente sin usar el explorador de archivos.

plaintext

Ctrl + P

Paleta de Comandos

Muestra la "Paleta de Comandos" (Command Palette), que permite acceder a todas las funcionalidades de VS Code, incluyendo comandos de extensión, configuración y atajos, por medio de búsqueda textual. Esencial para ejecutar acciones sin memorizar atajos específicos.

plaintext

Ctrl + Shift + P

Abrir Configuración

Abre el editor de configuración de VS Code, donde es posible personalizar el comportamiento del editor, temas, atajos y extensiones, tanto globalmente (User Settings) como por workspace (Workspace Settings).

plaintext

Ctrl + ,

Alternar Sidebar

Muestra u oculta la barra lateral (Sidebar) de VS Code, que contiene el Explorer, Search, Source Control, Run and Debug y Extensions. Ayuda a maximizar el espacio del editor.

plaintext

Ctrl + B

Abrir Terminal Integrado

Abre o alterna el foco al terminal integrado de VS Code, permitiendo ejecutar comandos de shell directamente en el editor. Si el terminal está cerrado, se abrirá; de lo contrario, se enfocará u ocultará.

plaintext

Ctrl + `

Mostrar/Ocultar Panel Inferior

Muestra u oculta el panel inferior (Panel), que puede contener el Terminal, Output, Debug Console y Problems. Útil para gestionar el espacio de la interfaz.

plaintext

Ctrl + J

Dividir Editor

Divide el editor activo en dos grupos de editor, permitiendo visualizar y trabajar en múltiples archivos lado a lado en la misma ventana. Puede repetirse para crear más divisiones.

plaintext

Ctrl + \

Alternar entre Grupos de Editor

Alterna el foco entre los grupos de editor abiertos, permitiendo navegar rápidamente entre diferentes diseños de archivos en el editor. Use 1 para el primer grupo, 2 para el segundo, y así sucesivamente.

plaintext

Ctrl + 1/2/3

Seleccionar Siguiente Ocurrencia

Selecciona la siguiente ocurrencia de la palabra o selección actual. Permite añadir múltiples cursores para edición simultánea de ocurrencias idénticas.

plaintext

Ctrl + D

Seleccionar Todas las Ocurrencias

Selecciona todas las ocurrencias de la palabra o selección actual en el archivo, añadiendo un cursor en cada una. Ideal para refactorizaciones masivas o renombrar variables rápidamente.

plaintext

Ctrl + Shift + L

Mover Línea hacia Arriba/Abajo

Mueve la línea (o líneas seleccionadas) hacia arriba o hacia abajo, alterando su posición en el código. Útil para reordenar bloques de código sin copiar y pegar.

plaintext

Alt + ↑/↓

Copiar Línea hacia Arriba/Abajo

Copia la línea (o líneas seleccionadas) e inserta la copia arriba o abajo de la posición original. Facilita la duplicación de líneas de código.

plaintext

Alt + Shift + ↑/↓

Eliminar Línea

Elimina la línea entera donde el cursor está posicionado o las líneas seleccionadas. Una forma rápida de remover código.

plaintext

Ctrl + Shift + K

Comentar/Descomentar Línea

Alterna el comentario de línea para la línea actual o para las líneas seleccionadas. Soporta la sintaxis de comentario del lenguaje del archivo (ej: `//` para JavaScript, `#` para Python).

plaintext

Ctrl + /

Alternar Comentario de Bloque

Alterna el comentario de bloque para la selección actual. Soporta la sintaxis de comentario de bloque del lenguaje del archivo (ej: `/* ... */` para JavaScript, `` para HTML).

plaintext

Ctrl + Shift + /

Ir a Línea

Abre un cuadro de diálogo para ir directamente a un número de línea específico en el archivo actual. Útil para navegación rápida en archivos grandes.

plaintext

Ctrl + G

Ir a Símbolo (Archivo)

Abre la paleta de comandos "Go to Symbol in File" para navegar rápidamente entre símbolos (funciones, clases, variables) definidos en el archivo actual. Escribe `:` seguido del nombre del símbolo.

plaintext

Ctrl + P + :

Ir a Símbolo (Workspace)

Abre la paleta de comandos "Go to Symbol in Workspace" para navegar rápidamente entre símbolos (funciones, clases, variables) definidos en todo el workspace. Útil para explorar la estructura de un proyecto.

plaintext

Ctrl + Shift + O

Ir a Definición

Navega a la definición del símbolo bajo el cursor. Por ejemplo, si el cursor está sobre el nombre de una función, lo llevará a donde esa función fue definida. Esencial para entender el código.

plaintext

F12

Ir a Definición al Lado

Abre la definición del símbolo bajo el cursor en un panel lateral (Peek Definition), permitiendo visualizar el código de la definición sin salir del archivo actual. Útil para referencia rápida.

plaintext

Shift + F12

Ir a Implementación

Navega a la implementación de una interfaz o método abstracto. Útil en lenguajes orientados a objetos para encontrar dónde un contrato es realmente implementado.

plaintext

Ctrl + F12

🎯 Multi-Cursor y Selección

10 snippets

Editando múltiples líneas, refactorización, ediciones masivas.

Añadir Cursor en Posición

Añade un nuevo cursor en la posición del clic del ratón, permitiendo editar múltiples ubicaciones en el archivo simultáneamente. Fundamental para ediciones paralelas y refactorizaciones.

plaintext

Alt + Click

Añadir Cursor Arriba/Abajo

Añade un nuevo cursor en la línea superior o inferior de la posición actual, manteniendo la alineación vertical. Ideal para añadir cursores en líneas consecutivas.

plaintext

Ctrl + Alt + ↑/↓

Deshacer Último Cursor

Elimina el último cursor añadido, útil para corregir errores al añadir múltiples cursores o para refinar la selección.

plaintext

Ctrl + U

Salir del Modo Multi-Cursor

Sale del modo multi-cursor, dejando solo un cursor activo en la última posición. También puede usarse para cerrar menús y paletas.

plaintext

Esc

Selección Rectangular (Box)

Realiza una selección rectangular o en bloque, permitiendo seleccionar y editar columnas de texto. Útil para manipular datos tabulares o bloques de código alineados.

plaintext

Shift + Alt + Arrastar

Selección Columnar Arriba/Abajo

Expande o contrae una selección columnar para las líneas de arriba o abajo. Permite la selección precisa de bloques verticales de texto.

plaintext

Ctrl + Shift + Alt + ↑/↓

Expandir/Contraer Selección Columnar

Expande o contrae una selección columnar horizontalmente, ajustando el ancho de la selección de bloque.

plaintext

Ctrl + Shift + Alt + ←/→

Seleccionar y Editar Siguiente Ocurrencia

Selecciona la siguiente ocurrencia de la palabra o selección actual y añade un nuevo cursor, permitiendo edición simultánea. Útil para renombrar variables en ámbitos controlados.

plaintext

Ctrl + D

Seleccionar Todas las Ocurrencias

Selecciona todas las ocurrencias de la palabra o selección actual en el archivo, añadiendo un cursor en cada una. Ideal para refactorizaciones masivas o renombrar variables rápidamente.

plaintext

Ctrl + Shift + L

Insertar Cursor al Final de Líneas Seleccionadas

Inserta un cursor al final de cada línea que forma parte de la selección actual. Útil para añadir puntos y comas u otros caracteres al final de múltiples líneas.

plaintext

Ctrl + Alt + I

🐛 Debugging y Breakpoints

15 snippets

Depurando código, analizando variables, encontrando bugs.

Toggle Breakpoint

Activa o desactiva un breakpoint en la línea actual. Los breakpoints son puntos de parada en el código que permiten inspeccionar el estado del programa durante la depuración.

plaintext

F9

Toggle Breakpoint (Alternativo)

Activa o desactiva un breakpoint en la línea actual. Este es un atajo alternativo para la función de toggle breakpoint, útil si F9 está en conflicto.

plaintext

Ctrl + F9

Toggle Conditional Breakpoint

Activa o desactiva un breakpoint condicional en la línea actual. Un breakpoint condicional solo pausa la ejecución si una expresión específica se evalúa como verdadera, ahorrando tiempo en la depuración.

plaintext

Shift + F9

Toggle Inline Breakpoint

Activa o desactiva un breakpoint inline, permitiendo pausar la ejecución en una expresión específica dentro de una línea de código, en lugar de en la línea entera, para una depuración más granular.

plaintext

Ctrl + Shift + F9

Continuar/Iniciar Debugging

Inicia la sesión de depuración si no hay una activa, o continúa la ejecución del programa hasta el siguiente breakpoint o el final del programa si ya está en depuración.

plaintext

F5

Detener Depuración

Interrumpe la sesión de depuración activa, terminando la ejecución del programa. Útil para salir de bucles infinitos o cuando la depuración ya no es necesaria.

plaintext

Shift + F5

Step Over

Ejecuta la siguiente línea de código. Si la línea contiene una llamada a función, la función se ejecutará completamente sin entrar en ella. Útil para saltar la depuración de funciones ya probadas.

plaintext

F10

Step Into

Ejecuta la siguiente línea de código. Si la línea contiene una llamada a función, el depurador entrará en la función para depurar su código interno. Esencial para inspeccionar el flujo de ejecución detalladamente.

plaintext

F11

Step Out

Sale de la función actual y continúa la ejecución hasta la siguiente línea después de la llamada a la función que invocó la función actual. Útil para salir rápidamente de una función en la que entró accidentalmente.

plaintext

Shift + F11

Reiniciar Debugging

Reinicia la sesión de depuración desde el inicio, recargando el programa y comenzando una nueva sesión. Útil para probar cambios en el código rápidamente.

plaintext

Ctrl + Shift + F5

Enfocar Debug Console

Enfoca el panel "Debug Console", donde es posible interactuar con el programa en ejecución, evaluar expresiones y visualizar logs de depuración. Esencial para monitorear el estado de la aplicación.

plaintext

Ctrl + Shift + Y

Abrir Developer Tools

Abre las Herramientas de Desarrollador (Developer Tools) para VS Code en sí (útil para depurar extensiones o el propio editor), no para el código que está siendo depurado.

plaintext

Ctrl + Shift + I

Mostrar Terminal Integrado

Alterna la visibilidad del terminal integrado, que puede ser usado en conjunto con el Debug Console para ejecutar comandos y observar la salida del programa.

plaintext

Ctrl + `

Añadir a Watch

Añade la variable o expresión seleccionada a la sección "Watch" del panel de depuración, permitiendo monitorear su valor en tiempo real durante la ejecución del programa, facilitando la identificación de cambios.

plaintext

Ctrl + Shift + W

Inspeccionar Valor (Debug)

Al pasar el mouse sobre una variable o expresión durante una sesión de depuración, muestra su valor actual en un tooltip. Permite una inspección rápida sin la necesidad de añadir a Watch.

plaintext

Alt + Hover

💻 Terminal Integrado

14 snippets

Ejecutando comandos, builds, tests, operaciones del sistema.

Abrir/Cerrar Terminal

Abre o cierra el terminal integrado de VS Code. Si el terminal está cerrado, se abrirá; de lo contrario, se enfocará u ocultará, maximizando el espacio del editor.

plaintext

Ctrl + `

Crear Nuevo Terminal

Crea una nueva instancia del terminal integrado, permitiendo tener múltiples terminales abiertos y activos simultáneamente en VS Code para diferentes tareas.

plaintext

Ctrl + Shift + `

Copiar Selección (Terminal)

Copia el texto seleccionado en el terminal al portapapeles. Este es el comportamiento predeterminado para la mayoría de los sistemas operativos, pero puede interrumpir procesos en ejecución.

plaintext

Ctrl + C

Pegar en el Terminal

Pega el contenido del portapapeles en el terminal. Este es el comportamiento predeterminado para la mayoría de los sistemas operativos y es esencial para la entrada de comandos.

plaintext

Ctrl + V

Copiar en el Terminal (Windows)

Atajo específico para copiar texto en el terminal integrado en sistemas Windows, en caso de que el Ctrl+C estándar sea interpretado como interrupción de proceso. Garantiza que la copia de texto funcione como se espera.

plaintext

Ctrl + Shift + C

Pegar en el Terminal (Windows)

Atajo específico para pegar texto en el terminal integrado en sistemas Windows, en caso de que el Ctrl+V estándar no funcione correctamente. Asegura la funcionalidad de pegar en todas las situaciones.

plaintext

Ctrl + Shift + V

Navegar entre Terminales

Alterna entre las diferentes instancias del terminal integrado abiertas, permitiendo gestionar múltiples procesos de línea de comandos sin perder el contexto de cada uno.

plaintext

Ctrl + Alt + ←/→

Navegar entre Terminales (Alternativo)

Atajo alternativo para navegar entre las instancias del terminal integrado, moviendo el foco al terminal anterior o siguiente en la lista, ofreciendo flexibilidad.

plaintext

Ctrl + Shift + ↑/↓

Dividir Terminal

Divide el terminal actual en dos paneles, permitiendo ejecutar y visualizar múltiples comandos de terminal lado a lado. Puede repetirse para más divisiones, optimizando el flujo de trabajo.

plaintext

Ctrl + Shift + 5

Cerrar Terminal Actual

Cierra la instancia del terminal integrado actualmente enfocada. Si hay múltiples terminales divididos, solo el panel activo será cerrado, liberando recursos.

plaintext

Ctrl + Shift + W

Abrir Configuraciones

Abre el editor de configuraciones de VS Code, donde es posible personalizar el comportamiento del terminal integrado, como el shell predeterminado, fuente, colores y comportamiento de desplazamiento.

plaintext

Ctrl + ,

Shell Predeterminado de Windows

Configuración para definir el shell predeterminado a usar en el terminal integrado de VS Code en sistemas Windows. Ejemplos incluyen `cmd.exe`, `powershell.exe` o `wsl.exe`.

plaintext

terminal.integrated.shell.windows

Shell Predeterminado de Linux

Configuración para definir el shell predeterminado a usar en el terminal integrado de VS Code en sistemas Linux. Ejemplos incluyen `/bin/bash` o `/bin/zsh`.

plaintext

terminal.integrated.shell.linux

Shell Predeterminado macOS

Configuración para definir el shell predeterminado a usar en el terminal integrado de VS Code en sistemas macOS. Ejemplos incluyen `/bin/bash` o `/bin/zsh`.

plaintext

terminal.integrated.shell.osx

🔀 Integración Git

15 snippets

Control de versiones, colaboración, gestión de branches.

Abrir Control de Código Fuente

Abre la vista de Control de Código Fuente (Source Control) en VS Code, donde es posible gestionar cambios Git, hacer commits, push, pull, e interactuar con el repositorio.

plaintext

Ctrl + Shift + G

Confirmar Cambios

Realiza un commit de los cambios staged en Git, utilizando el mensaje de commit insertado en la caja de texto del Control de Código Fuente. Equivale a `git commit -m "mensaje"`.

plaintext

Ctrl + Enter

Navegar entre Cambios (Git)

Navega entre las diferentes alteraciones (diffs) en el panel de Control de Código Fuente, permitiendo revisar las modificaciones hechas en los archivos antes de hacer un commit.

plaintext

Alt + ←/→

Clonar Repositorio Git

Abre la paleta de comandos para clonar un repositorio Git remoto a tu entorno local. Solicita la URL del repositorio y el directorio de destino para iniciar un nuevo proyecto.

plaintext

Ctrl + Shift + P > Git: Clone

Stage All Changes

Añade todos los cambios detectados en el repositorio Git al área de staging (index), preparándolos para el próximo commit. Equivale a `git add .`.

plaintext

Ctrl + Shift + A

Unstage All Changes

Elimina todos los cambios del área de staging (index), revirtiéndolos al estado de "modified" (no staged). Útil para deshacer un `git add .` antes de un commit.

plaintext

Ctrl + Shift + U

Stage Selected File

Añade el archivo seleccionado en la vista de Source Control al área de staging. Equivale a `git add <file>`, preparando solo los cambios de un archivo específico para el commit.

plaintext

Ctrl + Alt + S

Unstage Selected File

Elimina el archivo seleccionado del área de staging. Equivale a `git reset <file>`, útil para eliminar un archivo del staging sin deshacer sus modificaciones.

plaintext

Ctrl + Alt + U

Cambiar de Branch Git

Abre la paleta de comandos para seleccionar y alternar a una branch Git existente en el repositorio local. Equivale a `git checkout <branch-name>`, esencial para gestionar el flujo de trabajo.

plaintext

Ctrl + Shift + P > Git: Checkout

Crear Nueva Branch Git

Abre la paleta de comandos para crear una nueva branch Git a partir de la branch actual. Equivale a `git branch <new-branch-name>` y opcionalmente `git checkout <new-branch-name>`.

plaintext

Ctrl + Shift + P > Git: Create Branch

Merge de Ramas Git

Abre la paleta de comandos para realizar un merge de una rama en otra. Útil para integrar cambios de una feature branch en la rama principal, resolviendo conflictos si es necesario.

plaintext

Ctrl + Shift + P > Git: Merge

Pull del Repositorio Remoto

Ejecuta un `git pull` para buscar e integrar los últimos cambios del repositorio remoto a la rama local actual. Equivale a `git fetch` seguido de `git merge`.

plaintext

Ctrl + Shift + P > Git: Pull

Push a Repositorio Remoto

Ejecuta un `git push` para enviar los commits de la rama local actual al repositorio remoto. Requiere que la rama local esté configurada para rastrear una rama remota.

plaintext

Ctrl + Shift + P > Git: Push

Ver Historial de Commits Git

Abre la vista de historial de Git, mostrando una lista de commits, sus autores, mensajes y los cambios asociados. Requiere la extensión GitLens o similar para funcionalidad completa.

plaintext

Ctrl + Shift + P > Git: View History

Abrir GitLens History

Abre la vista de historial avanzada proporcionada por la extensión GitLens, ofreciendo detalles ricos sobre commits, autores, líneas cambiadas y navegación en el historial de archivos, para un análisis profundo.

plaintext

Ctrl + Shift + H

🧩 Extensiones Recomendadas

18 snippets

Personalizando entorno, aumentando productividad, herramientas específicas.

Importador de TypeScript (Extensión)

ID de la extensión oficial de VS Code para soporte de TypeScript, que incluye características como autocompletado, verificación de tipos, refactorización y navegación de código para proyectos TypeScript.

plaintext

ms-vscode.vscode-typescript-next

Prettier - Formateador de Código (Extensión)

ID de la extensión Prettier, un formateador de código opinativo que impone un estilo consistente en todo su proyecto, formateando automáticamente el código al guardar o por comando.

plaintext

esbenp.prettier-vscode

ESLint (Extensión)

ID de la extensión ESLint, que integra el linter ESLint en VS Code, proporcionando retroalimentación en tiempo real sobre problemas de sintaxis, estilo y posibles errores en el código JavaScript/TypeScript.

plaintext

dbaeumer.vscode-eslint

Soporte de Lenguaje JSON (Extensión)

ID de la extensión de soporte de lenguaje JSON, que ofrece características como validación de esquema, formato, autocompletado y resaltado de sintaxis para archivos JSON y JSONC, facilitando el trabajo con datos estructurados.

plaintext

ms-vscode.vscode-json

Soporte de Lenguaje YAML (Extensión)

ID de la extensión de soporte de lenguaje YAML de Red Hat, que proporciona validación de esquema, autocompletado, formato y resaltado de sintaxis para archivos YAML, esencial para configuraciones y CI/CD.

plaintext

redhat.vscode-yaml

GitLens - Git supercharged (Extensión)

ID de la extensión GitLens, que mejora las capacidades Git integradas de VS Code, añadiendo características como blame annotations, historial de commits detallado, navegación de repositorio y mucho más.

plaintext

ms-vscode.vscode-gitlens

Live Server (Extensión)

ID de la extensión Live Server, que lanza un servidor de desarrollo local con recarga en vivo para páginas HTML/CSS/JS estáticas, actualizando el navegador automáticamente con cada cambio en el archivo.

plaintext

ms-vscode.live-server

Auto Rename Tag (Extensión)

ID de la extensión Auto Rename Tag, que renombra automáticamente la etiqueta HTML/XML de cierre cuando la etiqueta de apertura es modificada, y viceversa, manteniendo la consistencia del código.

plaintext

formulahendry.auto-rename-tag

Tailwind CSS IntelliSense (Extensión)

ID de la extensión Tailwind CSS IntelliSense, que proporciona autocompletado inteligente, linting y resaltado de sintaxis para clases CSS del framework Tailwind CSS directamente en el editor.

plaintext

bradlc.vscode-tailwindcss

Color Picker (Extensión)

ID de la extensión Color Picker, que ofrece una interfaz gráfica para seleccionar colores en formatos como HEX, RGB, HSL, facilitando la elección e inserción de valores de color en el código.

plaintext

ms-vscode.vscode-color-picker

Material Icon Theme (Extensión)

ID de la extensión Material Icon Theme, que añade una vasta colección de iconos de archivo y carpeta al explorador de VS Code, mejorando la identificación visual de tipos de archivo.

plaintext

PKief.material-icon-theme

One Dark Pro Theme (Extensión)

ID de la extensión One Dark Pro Theme, un tema de colores popular y elegante para VS Code, basado en el tema One Dark de Atom, que ofrece una experiencia de codificación visualmente agradable.

plaintext

zhuangtongfa.Material-theme

Dracula Theme (Extensión)

ID de la extensión Dracula Theme, un tema de colores oscuro y vibrante, muy apreciado por la comunidad, que ofrece un contraste agradable y legibilidad para diversos lenguajes de programación.

plaintext

dracula-theme.theme-dracula

Monokai Theme (Extensión)

ID de la extensión Monokai Theme, un clásico tema de colores oscuro, conocido por su paleta de colores distintiva y legibilidad, ampliamente utilizado por desarrolladores.

plaintext

ms-vscode.theme-monokai

Debugger for Chrome (Extensión)

ID de la extensión Debugger for Chrome, que permite depurar su código JavaScript front-end (ejecutado en Chrome) directamente desde VS Code, configurando breakpoints e inspeccionando variables.

plaintext

ms-vscode.vscode-chrome-debug

Node.js Debugging (Extensión)

ID de la extensión para depuración de aplicaciones Node.js en VS Code, ofreciendo soporte para breakpoints, step-by-step execution, inspección de variables y evaluación de expresiones.

plaintext

ms-vscode.vscode-node-debug2

REST Client (Extensión)

ID de la extensión REST Client, que permite enviar solicitudes HTTP directamente desde el editor y visualizar las respuestas, ideal para probar APIs RESTful y GraphQL sin salir de VS Code.

plaintext

humao.rest-client

Test Explorer UI (Extensión)

ID de la extensión Test Explorer UI, que proporciona una interfaz gráfica para visualizar y ejecutar pruebas de diversas frameworks (vía adaptadores), integrando el proceso de prueba en VS Code.

plaintext

ms-vscode.test-adapter-converter

📁 Gestión de Workspace

13 snippets

Trabajando con múltiples proyectos, organización, configuraciones específicas.

Añadir Carpeta al Espacio de Trabajo

Comando para añadir una carpeta existente a un espacio de trabajo multi-root. Permite trabajar con múltiples directorios de proyecto en una única ventana de VS Code, manteniendo la organización.

plaintext

File > Open Folder from Workspace...

Guardar Espacio de Trabajo Actual

Guarda la configuración del espacio de trabajo actual (incluyendo carpetas abiertas y configuraciones específicas) en un archivo `.code-workspace`, permitiendo reabrir el entorno de trabajo fácilmente.

plaintext

File > Save Workspace As...

Abrir Workspace Reciente

Abre la lista de workspaces y carpetas abiertas recientemente, facilitando la alternancia entre proyectos en los que estás trabajando sin necesidad de navegar por los directorios.

plaintext

Ctrl + R

Abrir Carpeta (Open Folder)

Abre una nueva ventana de VS Code con la carpeta seleccionada como raíz del proyecto. Este es el comando estándar para iniciar un nuevo proyecto o abrir uno existente.

plaintext

Ctrl + K Ctrl + O

Guardar Workspace Como

Guarda el workspace actual (con todas las carpetas y configuraciones) en un nuevo archivo `.code-workspace`, permitiendo crear diferentes configuraciones de workspace para diferentes contextos de trabajo.

plaintext

Ctrl + K Ctrl + S

Alternar entre Archivos Abiertos

Alterna rápidamente entre los archivos abiertos en el editor, mostrando una lista de los archivos más recientemente accedidos. Mantenga Ctrl presionado y use Tab para navegar.

plaintext

Ctrl + Tab

Alternar en Dirección Inversa

Alterna entre los archivos abiertos en el orden inverso de la lista de archivos más recientemente accedidos. Útil para navegación inversa y para encontrar archivos específicos rápidamente.

plaintext

Ctrl + Shift + Tab

Ir a Editor Específico

Mueve el foco a un editor específico en un grupo de editores. Por ejemplo, Ctrl + 1 enfoca el primer editor, Ctrl + 2 el segundo, etc., agilizando la navegación en diseños divididos.

plaintext

Ctrl + 1/2/3...

Navegar entre Grupos de Editores

Navega el foco entre los diferentes grupos de editores (paneles) abiertos en VS Code, permitiendo alternar rápidamente entre diferentes diseños de archivos y contextos de trabajo.

plaintext

Ctrl + Alt + ←/→

Configuraciones del Workspace

Archivo JSON ubicado en la carpeta `.vscode/` de su proyecto, conteniendo configuraciones específicas para ese workspace. Estas configuraciones sobrescriben las configuraciones de usuario, garantizando consistencia en el proyecto.

plaintext

.vscode/settings.json

Configuraciones de Depuración

Archivo JSON ubicado en la carpeta `.vscode/` de tu proyecto, usado para configurar sesiones de depuración para diferentes entornos o tipos de aplicación (ej: Node.js, Chrome).

plaintext

.vscode/launch.json

Configuraciones de Tareas

Archivo JSON ubicado en la carpeta `.vscode/` de tu proyecto, usado para definir y configurar tareas personalizadas (tasks) que pueden ser ejecutadas en VS Code (ej: build, test, run scripts).

plaintext

.vscode/tasks.json

Recomendaciones de Extensiones

Archivo JSON ubicado en la carpeta `.vscode/` de tu proyecto, que lista extensiones recomendadas para el workspace. VS Code sugiere la instalación de estas extensiones a los colaboradores del proyecto.

plaintext

.vscode/extensions.json

📝 Snippets y Templates

18 snippets

Acelerando escritura, estandarizando código, templates reutilizables.

Snippet: Bucle for básico

Un snippet que, al escribir "for" y presionar Tab, se expande a una estructura básica de bucle `for` en JavaScript o lenguajes similares, con placeholders para variables y cuerpo del bucle, agilizando la escritura de código repetitivo.

plaintext

for + Tab

Snippet: Condicional if

Un snippet que, al escribir "if" y presionar Tab, se expande a una estructura básica de condicional `if` en JavaScript o lenguajes similares, con un placeholder para la condición a rellenar.

plaintext

if + Tab

Snippet: Console.log (JavaScript)

Un snippet que, al escribir "log" y presionar Tab, se expande a `console.log()` en JavaScript, con un marcador de posición para el argumento a registrar. Muy útil para depuración rápida e inserción de logs.

plaintext

log + Tab

Snippet: Console.log (abreviatura)

Una abreviatura de snippet que, al escribir "cl" y presionar Tab, se expande a `console.log()` en JavaScript, similar a "log + Tab", ofreciendo una alternativa rápida para insertar logs.

plaintext

cl + Tab

Snippet: Function declaration

Un snippet que, al escribir "fn" y presionar Tab, se expande a una declaración de función básica en JavaScript (ej: `function name(params) { ... }`), con marcadores de posición para nombre y parámetros.

plaintext

fn + Tab

Snippet: React Arrow Function

Un snippet que, al escribir "raf" y presionar Tab, se expande a una función de componente React en formato de arrow function (ej: `const Component = () => { return (...) };`), con placeholders para nombre y retorno.

plaintext

raf + Tab

Abrir Editor de Snippets

Abre el archivo de configuración donde puedes crear y editar tus propios snippets personalizados para lenguajes específicos o globalmente en VS Code, permitiendo automatización de código.

plaintext

File > Preferences > User Snippets

Archivo de Snippets Personalizados

Nombre de archivo para snippets personalizados de VS Code. Puede ser un archivo global (`.code-snippets`) o específico para un lenguaje (ej: `javascript.json`), permitiendo organización.

plaintext

nome-do-snippet.code-snippets

Estructura Básica de Snippet

Define el nombre legible del snippet dentro del archivo JSON de snippets. Este es el encabezado para la definición de un nuevo snippet, usado para identificarlo en IntelliSense.

plaintext

"Snippet Name": {

Prefijo para Activar Snippet

Define la cadena que, cuando se escribe en el editor y se sigue de Tab, activará la expansión del snippet. El prefijo debe ser único o lo suficientemente específico para evitar conflictos.

plaintext

  "prefix": "prefixo",

Cuerpo del Snippet

Define el contenido que se insertará en el editor cuando el snippet sea activado. Puede ser una string o un array de strings para múltiples líneas. Incluye placeholders como `$1` para la navegación del cursor.

plaintext

  "body": ["$1"],

Descripción del Snippet

Proporciona una breve descripción de lo que hace el snippet, que se mostrará en la lista de sugerencias de IntelliSense. Ayuda a identificar el snippet correcto y su propósito.

plaintext

  "description": "Descrição"

Cerrar Estructura de Snippet

Cierra la definición de un snippet individual dentro del archivo JSON de snippets, completando la estructura del objeto.

plaintext

Variable de Texto Seleccionado

Una variable de snippet que inserta el texto actualmente seleccionado en el editor en la posición del snippet. Útil para envolver texto existente con una nueva estructura o etiquetas.

plaintext

$TM_SELECTED_TEXT

Tab Stops

Marcadores numéricos que definen el orden en que el cursor se moverá después de la expansión del snippet. Presiona Tab para saltar al siguiente tab stop, agilizando la inserción de datos.

plaintext

$1, $2, $3...

Tab Stop con Valor Predeterminado

Un tab stop que, además de definir la posición del cursor, también proporciona un valor predeterminado. El usuario puede aceptar el predeterminado o sobrescribirlo, haciendo los snippets más flexibles.

plaintext

${1:default}

Variable de Año Actual

Una variable de snippet que inserta el año actual (ej: 2023) en el cuerpo del snippet. Útil para encabezados de archivo, licencias o comentarios de fecha.

plaintext

$CURRENT_YEAR

Variable de Fecha Completa

Una variable de snippet que inserta la fecha completa actual (ej: 2023-10-27) en el cuerpo del snippet. Útil para registros de fecha y hora o documentación automatizada.

plaintext

$CURRENT_DATE

🌐 Desarrollo Remoto

16 snippets

Desarrollo remoto, containers, WSL, acceso a servidores.

Conectar vía Remote SSH

Inicia una sesión de conexión SSH remota, permitiendo desarrollar en un servidor remoto como si estuviera localmente. Solicita el host SSH configurado o uno nuevo para establecer la conexión segura.

plaintext

Ctrl + Shift + P > Remote-SSH: Connect to Host...

Editar Configuración SSH

Abre el archivo de configuración SSH (`~/.ssh/config` o similar) para añadir, editar o remover hosts SSH, incluyendo detalles como HostName, User, IdentityFile, para gestionar sus conexiones.

plaintext

Ctrl + Shift + P > Remote-SSH: Open Configuration File...

Configurar Host SSH

Define un alias para un servidor remoto en el archivo de configuración SSH, facilitando la conexión con un nombre corto en lugar de la IP completa o dominio, mejorando la usabilidad.

plaintext

Host nome-do-servidor

Dirección del Servidor SSH

Especifica la dirección IP o nombre de dominio del servidor remoto al que el cliente SSH intentará conectarse. Usado dentro de la configuración de un `Host` para identificar el objetivo.

plaintext

HostName IP-ou-DOMAIN

Usuario SSH

Define el nombre de usuario a usar para autenticación en el servidor SSH remoto. Usado dentro de la configuración de un `Host` para especificar las credenciales de acceso.

plaintext

User nome-usuario

Clave SSH Privada

Especifica la ruta al archivo de clave privada SSH a usar para autenticación sin contraseña. Esencial para conexiones seguras y automatizadas con servidores remotos.

plaintext

IdentityFile ~/.ssh/chave_privada

Adjuntar a Contenedor en Ejecución

Conecta VS Code a un contenedor Docker ya en ejecución, permitiendo desarrollar dentro del entorno aislado del contenedor. Útil para depuración o desarrollo continuo en entornos estandarizados.

plaintext

Ctrl + Shift + P > Remote-Containers: Attach to Running Container...

Reabrir Carpeta en Contenedor

Reabre la carpeta del proyecto actual dentro de un contenedor Docker, utilizando las configuraciones definidas en un archivo `.devcontainer.json`. Ideal para entornos de desarrollo consistentes y reproducibles.

plaintext

Ctrl + Shift + P > Remote-Containers: Reopen in Container

Configuración del Dev Container

Archivo JSON ubicado en la carpeta `.devcontainer/` de su proyecto, que define cómo el entorno de desarrollo en contenedor debe ser construido y configurado (ej: imagen Docker, puertos, extensiones).

plaintext

.devcontainer/devcontainer.json

Dockerfile para Build de Contenedor

Propiedad en `.devcontainer.json` que especifica el Dockerfile a usar para construir la imagen del entorno de desarrollo en contenedor, permitiendo personalización de la imagen.

plaintext

"dockerFile": "Dockerfile"

Contexto de Docker

Propiedad en `.devcontainer.json` que define el directorio de contexto para el Docker build. ".." significa el directorio padre de `.devcontainer` (generalmente la raíz del proyecto), indicando dónde Docker debe buscar archivos.

plaintext

"context": ".."

Abrir Nueva Ventana WSL

Abre una nueva ventana de VS Code conectada a un subsistema de Windows para Linux (WSL), permitiendo desarrollar en un entorno Linux completo directamente desde Windows, con acceso a herramientas Linux.

plaintext

Ctrl + Shift + P > Remote-WSL: New WSL Window

Reabrir Carpeta en WSL

Reabre la carpeta del proyecto actual dentro del entorno WSL, transfiriendo el contexto de desarrollo al subsistema Linux y permitiendo el uso de herramientas nativas de Linux.

plaintext

Ctrl + Shift + P > Remote-WSL: Reopen in WSL

Acceder a Distribución WSL Específica

Comando para iniciar una distribución WSL específica (ej: Ubuntu) directamente desde el símbolo del sistema de Windows, permitiendo acceso al entorno Linux y sus herramientas.

plaintext

wsl.exe -d Ubuntu

Abrir Puerto en el Navegador (Remote Tunnels)

Abre un puerto expuesto por un túnel remoto directamente en el navegador local, facilitando el acceso a aplicaciones web en ejecución en máquinas remotas sin configuraciones de firewall complejas.

plaintext

Ctrl + Shift + P > Remote-Tunnels: Open in Browser

Reenviar Puerto Específico (Remote Tunnels)

Configura el reenvío de un puerto específico de una máquina remota a tu máquina local a través de un túnel seguro, permitiendo acceso a servicios remotos como si estuvieran localmente.

plaintext

Ctrl + Shift + P > Remote-Tunnels: Forward Port

🎨 Personalización y Temas

20 snippets

Personalizando entorno, ajustando preferencias, optimizando flujo.

Abrir Configuración

plaintext

Ctrl + ,

Tema de Colores del Workbench

Configuración que define el tema de colores general de VS Code (editor, paneles, barra lateral). Puede ser un tema preinstalado o de una extensión, alterando la estética visual del editor.

plaintext

workbench.colorTheme

Tema de Iconos del Workbench

Configuración que define el tema de iconos para archivos y carpetas mostrados en el explorador de VS Code. Requiere una extensión de tema de iconos instalada para funcionar, mejorando la identificación visual.

plaintext

workbench.iconTheme

Fuente del Editor

Configuración que define la familia de fuentes a usar en el editor de texto. Se recomienda usar fuentes monoespaciadas para codificación, como Fira Code o JetBrains Mono, para una mejor legibilidad.

plaintext

editor.fontFamily

Tamaño de la Fuente del Editor

Configuración que define el tamaño de la fuente en píxeles para el texto en el editor. Ajusta para una mejor legibilidad y confort visual, adaptándose a tus preferencias.

plaintext

editor.fontSize

Altura de Línea del Editor

Configuración que define la altura de la línea en relación con el tamaño de la fuente. Un valor mayor aumenta el espaciado entre las líneas, mejorando la legibilidad y reduciendo la fatiga ocular.

plaintext

editor.lineHeight

Tamaño de Tab

Configuración que define el número de espacios que un carácter de tabulación representa. Generalmente 2 o 4, dependiendo de las convenciones de estilo de código del proyecto.

plaintext

editor.tabSize

Usar Espacios en Lugar de Tabs

Configuración booleana que, si `true`, hace que VS Code inserte espacios en lugar de caracteres de tabulación cuando se presiona la tecla Tab, siguiendo convenciones de codificación.

plaintext

editor.insertSpaces

Ajuste de Línea Automático

Configuración que controla si las líneas de texto largas deben ser ajustadas automáticamente para adaptarse al ancho del editor, evitando la necesidad de desplazamiento horizontal.

plaintext

editor.wordWrap

Habilitar/Deshabilitar Minimapa

Configuración booleana que controla la visibilidad del minimapa, una vista en miniatura del archivo que ayuda en la navegación rápida por grandes bloques de código.

plaintext

editor.minimap.enabled

Mostrar Espacios en Blanco

Configuración que controla cómo VS Code renderiza caracteres de espacio en blanco (espacios, tabs, nuevas líneas), haciéndolos visibles con símbolos discretos para depuración de formato.

plaintext

editor.renderWhitespace

Reglas Verticales en el Editor

Configuración que permite definir columnas verticales en el editor (ej: `[80, 120]`), útiles para seguir convenciones de estilo de código que limitan el ancho de la línea, mejorando la legibilidad.

plaintext

editor.rulers

Habilitar Pestañas en el Editor

Configuración booleana que controla si los archivos abiertos deben ser mostrados en pestañas en la parte superior del editor. Generalmente `true` para facilitar la navegación entre archivos.

plaintext

workbench.editor.enableTabs

Auto-Guardar Archivos

Configuración que define el comportamiento de auto-guardar archivos. Opciones incluyen `off`, `afterDelay`, `onFocusChange`, `onWindowChange`, garantizando que sus cambios se guarden automáticamente.

plaintext

files.autoSave

Abrir Atajos de Teclado

Abre el editor de atajos de teclado, donde es posible visualizar, buscar y personalizar todos los atajos de teclado de VS Code, adaptando el editor a tu flujo de trabajo.

plaintext

Ctrl + K Ctrl + S

Menú de Atajos de Teclado

Ruta en el menú principal para acceder al editor de atajos de teclado, que permite mapear comandos a combinaciones de teclas personalizadas, o modificar atajos existentes.

plaintext

File > Preferences > Keyboard Shortcuts

Archivo de Atajos Personalizados

Archivo JSON donde se almacenan los atajos de teclado personalizados. Puede ser editado directamente para configuraciones avanzadas, permitiendo control total sobre los atajos.

plaintext

keybindings.json

Definir Atajo de Teclado

Propiedad dentro de `keybindings.json` que define la combinación de teclas para un atajo (ej: "ctrl+shift+a"), permitiendo crear atajos para comandos específicos.

plaintext

"key": "ctrl+shift+a",

Comando a Ejecutar (Atajo)

Propiedad dentro de `keybindings.json` que especifica el ID del comando interno de VS Code a ejecutar cuando se presiona el atajo (ej: `workbench.action.files.saveAll` para guardar todos los archivos).

plaintext

"command": "workbench.action.files.saveAll"

Condición de Activación (Atajo)

Propiedad opcional dentro de `keybindings.json` que define una condición (context key) para cuando el atajo debe ser activado (ej: `editorTextFocus` significa que el atajo solo funciona cuando el editor de texto está en foco).

plaintext

"when": "editorTextFocus"

Ver todos los cheatsheets