Tips and tricks Visual Studio Code

Shortcut Emoji Picker

Para obtener la ventana de Emojis.

Windows / Linux: Tecla Window ⊞ + .

Mac: ⌃ Ctrl + ⌘ Cmd + Barra Espaciadora

Eliminar líneas duplicadas

  1. Remplazar Windows / Linux: Ctrl + H Mac: Alt ⌥ + Cmd ⌘ + F
  2. Usar Expresión Regular Botón [.*] o Windows: Alt + R o Mac: Alt ⌥ + Cmd ⌘ + R
  3. En Find: ^(.*)(\r?\n\1)+$
  4. Remplace: $1
  5. Botón Remplace All o Windows: Ctrl + Alt + Enter ⏎ Mac: Cmd ⌘ + Enter ⏎

Moverse entre documentos abiertos

Ctrl ⌃ + Tab ↹

Moverte entre pestañas abiertas

Agregaremos nuevos Shortcuts / Teclas de rápido acceso editando el archivo de configuración.
Windows: File > Preferences > Keyboard Shortcuts o Ctrl + K Ctrl + S
Mac: Code > Preferences > Keyboard Shortcuts o Cmd ⌘ + K Cmd ⌘+ S

Clic al icono de Open Keyboard Shortcuts (JSON)

Pega este código y presiona en File > Save o Windows / Linux: Ctrl + S Mac: Cmd ⌘ + S

// Place your key bindings in this file to override the defaults
[
    {
        "key": "cmd+l",
        "command": "expandLineSelection",
        "when": "textInputFocus"
    },
    {
        "key": "cmd+l",
        "command": "-expandLineSelection",
        "when": "textInputFocus"
    },
    {
        "key": "cmd+0",
        "command": "workbench.action.openLastEditorInGroup"
    },
    {
        "key": "cmd+1",
        "command": "workbench.action.openEditorAtIndex1"
    },
    {
        "key": "cmd+2",
        "command": "workbench.action.openEditorAtIndex2"
    },
    {
        "key": "cmd+3",
        "command": "workbench.action.openEditorAtIndex3"
    },
    {
        "key": "cmd+4",
        "command": "workbench.action.openEditorAtIndex4"
    },
    {
        "key": "cmd+5",
        "command": "workbench.action.openEditorAtIndex5"
    },
    {
        "key": "cmd+6",
        "command": "workbench.action.openEditorAtIndex6"
    },
    {
        "key": "cmd+7",
        "command": "workbench.action.openEditorAtIndex7"
    },
    {
        "key": "cmd+8",
        "command": "workbench.action.openEditorAtIndex8"
    },
    {
        "key": "cmd+9",
        "command": "workbench.action.openEditorAtIndex9"
    },
    {
        "key": "ctrl+1",
        "command": "workbench.action.focusFirstEditorGroup"
    },
    {
        "key": "ctrl+2",
        "command": "workbench.action.focusSecondEditorGroup"
    },
    {
        "key": "ctrl+3",
        "command": "workbench.action.focusThirdEditorGroup"
    }
]

Ahora puedes usar Windows / Linux: Ctrl + 1 al … 9 o Mac: Cmd ⌘+ 1 … 9 y moverte entre pesañas

Mover una o varias líneas

Selecciona la o las lineas y presiona

Alt ⌥ + Arriba ↑ o Alt ⌥ + Abajo ↓

Duplicar linea o lineas

Posicionate en la linea o selecciona las lineas a duplicar y presiona

Alt ⌥ + Shift ⇧ + Arriba ↑ o Abajo ↓

Comentar lineas de código

Sin importar en donde estes codificando HTML, JS, Python, etc.,

Windows y Linux: Ctrl + }

Mac: Cmd ⌘ + / (Shift ⇧ + 7)

Ordernar lineas alfabéticamente Asendente o Desendente

Seleccionamos las líneas o todas las líneas a ordenar y
Windows / Linux: Ctrl +A > Ctrl + Shift ⇧ + P > Escribimos y seleccionamos Sort Lines Ascending A a la Z o Sort Lines Descending Z a la A
Mac: Cmd ⌘ + A > Cmd ⌘ + Shift ⇧ + P > Escribimos y seleccionamos Sort Lines Ascending A a la Z o Sort Lines Descending Z a la A

Remplazar un caracter por una retorno de carro

Usualmente hay una cadena completa de caracteres que podamos separar, un archivo CSV, una lista en Python o JSON separado por comas u otro caracter y nos agradaria desplegarlo en lineas.

  1. Edit > Remplace o Windows / Linux: Ctrl + H Mac: Alt ⌥ + Cmd ⌘ + F
  2. En el primer campo escribimos el caracter a remplazar puede ser por ejemplo una , coma con un espacio en el segundo campo escribimos el retorno de carro representado por \n
  3. Marcamos Expresiones Regulares o Windows / Linux: Alt +R Mac: Alt + Cmd +R
  4. Presionamos Remplazamos Todos o Windows / Linux: Ctrl + Alt + Enter Mac: Cmd +Enter .

Eliminar lineas vacías o en blanco

Usaremos remplazar Ctrl + H en Windows / Linux y Alt + Cmd + F en MacOS, en el primer campo buscamos \n\n y los remplazamos por \n marcamos Expresiones Regulares Alt +R Windows / Linux y Alt + Cmd +R MacOS Remplazamos Todos Ctrl + Alt + Enter Windows / Linux y Cmd +Enter MacOS.

Seleccionar todas las palabras o frases

Esto es muy practico cuando queremos cambiar el nombre de una variable dentro de nuestro archivo o buscar un parrafo que se repite varias veces dentro de nuestro documento.
Para seleccionar la palabra nos posicionaremos dentro a un lado o seleccionamos la frase con el Mouse o Shift ⇧ y las flechas Arriba ↑ Abajo ↓ Izquierda ← Derecha y presionamos.

Windows / Linux: Ctrl + D
Mac: Cmd ⌘ + D

Si presionamos nuevamente esto seleccionara la palabra o frase siguiente

Seleccionarlas todas.
Windows / Linux: Ctrl + Shift ⇧ + L
Mac: Cmd ⌘ + Shift ⇧ + L

Para la frase o el conjunto de caracteres los seleccionamos con el mouse o sosteniendo Shift + las flechas luego Ctrl + Shift + L Windows / Linux y Cmd + Shift + L en MacOS.

Bricar entre palabras

Windows / Linux: Ctrl + Izquierda ← o Ctrl + Derecha→
Mac: Alt ⌥ + Izquierda ← o Alt ⌥ + Derecha→

Ajustar linea de código a ventana (Word wrap)

Hay ocasiones que nuestro código es muy largo y para no desplazar la barra de manera horizontal podemos usar Word Wrap y ajustarlo al tamaño de la ventana.

Windows / Linux / Mac: Alt ⌥ + Z

Múltiples cursores

Windows / Linux / Mac: Mantén presionado Alt ⌥ + Clic izquierdo donde requieras un cursor.

Ctrl ⌃ + Alt ⌥ + Arriba ↑

Ctrl ⌃ + Alt ⌥ + Abajo ↓

Tab ↹  Shift ⇧ Ctrl ⌃ Alt ⌥ Cmd ⌘ Tab ⇥ Enter ⏎ Mac  Window ⊞ Barra espaciadora ␣ Arriba ↑ Abajo ↓ Izquierda ← Derecha→ Retroceso⌫ Supr ⌦

View more articles
  • Como usar Esptool

    Esptool es un conjunto de herramientas creadas en Python para programar las placas de desarrollo ESP8266, ESP8585, ESP32, ESP32-C2, ESP32-C3, ESP32-C6, ESP32-H2, ESP32-S2 y ESP32-S3. 1.- Instala la ultima versión de Python (ocupas 3.10 o superior., sigue la guía) 2.- Instala Visual Studio Code (Sigue el tutorial) 3.- Crea una carpeta por ejemplo esptool y…

  • Como configurar un entorno de desarrollo para el lenguaje C / C++

    Para crear un entorno de trabajo para poder jugar con el lenguaje C recomiendo 1. Instalar compilador C / C++ Para Windows Descarga e instala MinGW Ejecuta MinGW Installer Manager selecciona los paquetes básicos e instálalos (durara algunos minutos ya que los descarga) Agregar MinGW al PATH Es importante agregarlo a las variables del sistema…

  • Python 101: Instalar entorno de trabajo IDE Visual Studio Code

    Existe un sin fin de editores de código IDE (Integrated development environment / Entorno de desarrollo integrado) especiales para Python como: Pero la que recomiendo es Visual Studio Code (descarga e instala el adecuado para tu Sistema Operativo Windows, Linux o Mac) E instala estas extensiones: En VSC le damos clic al Icono de Extensiones…