VSCode

../../../_images/kelly-sikkema-Plso5cHu9w0-unsplash.jpg

Visual Studio Code (VSCode) es un entorno de desarrollo integrado 1 gratuito y de código abierto que ha ganado mucha relevancia en los últimos años. Permite trabajar fácilmente con multitud de lenguajes de programación y dispone de una gran cantidad de plugins. 2

Atajos de teclado

Conocer los atajos de teclado de tu editor favorito es fundamental para mejorar el flujo de trabajo y ser más productivo. Veamos los principales atajos de teclado de Visual Studio Code 3.

Ajustes generales

Acción

Atajo

Abrir paleta de comandos

Ctrl + Shift + P

Abrir archivo

Ctrl + P

Nueva ventana

Ctrl + Shift + N

Cerrar ventana

Ctrl + Shift + W

Ajustes del perfil

Ctrl + ,

Usabilidad

Acción

Atajo

Crear un nuevo archivo

Ctrl + N

Abrir archivo

Ctrl + O

Guardar archivo

Ctrl + S

Cerrar

Ctrl + F4

Abrir Terminal

Ctrl + '

Panel de problemas

Ctrl + Shift + M

Edición básica

Acción

Atajo

Cortar linea

Ctrl + X

Copiar linea

Ctrl + C

Borrar linea

Ctrl + Shift + K

Insertar linea abajo

Enter

Insertar linea arriba

Ctrl + Shift + Enter

Buscar en archivo abierto

Ctrl + F

Reemplazar

Ctrl + H

Linea de comentario

Ctrl + /

Bloque de comentario

Shift + Alt + A

Salto de linea

Alt + Z

Seleccionar lineas

Alt + Click Mouse

Tabular linea

Tab

Destabular linea

Shift + Tab

Renombrar símbolo

F2

Pantalla

Acción

Atajo

Acercar Zoom

Ctrl + +

Alejar Zoom

Ctrl + -

Barra lateral

Ctrl + B

Abrir debug

Ctrl + Shift + D

Panel de salida

Ctrl + Shift + U

Control de source

Ctrl + Shift + G

Acceder a extensiones

Ctrl + Shift + X

Abrir terminal integrado

Ctrl + Shift + Ñ

Truco

En macOS 🍏 sustituir Ctrl por Command.

Depurando código

La depuración de programas es el proceso de identificar y corregir errores de programación.​ Es conocido también por el término inglés debugging, cuyo significado es eliminación de bugs (bichos), manera en que se conoce informalmente a los errores de programación.

Existen varias herramientas de depuración (o debuggers). Algunas de ellas en modo texto (terminal) y otras con entorno gráfico (ventanas).

  • La herramienta más extendida para depurar en modo texto es el módulo pdb (The Python Debugger). Viene incluido en la instalación base de Python y es realmente potente.

  • Aunque existen varias herramientas para depurar en entorno gráfico, nos vamos a centrar en Visual Studio Code.

Lo primero será abrir el fichero (carpeta) donde vamos a trabajar:

../../../_images/vscode-debug-open.png

Apertura del fichero a depurar

Punto de ruptura

A continuación pondremos un punto de ruptura (también llamado breakpoint). Esto implica que la ejecución se pare en ese punto y viene indicado por un punto rojo 🔴. Para ponerlo nos tenemos que acercar a la columna que hay a la izquierda del número de línea y hacer clic.

En este ejemplo ponemos un punto de ruptura en la línea 10:

../../../_images/vscode-debug-breakpoint.png

Punto de ruptura

También es posible añadir puntos de ruptura condicionales pulsando con el botón derecho y luego Add Conditional Breakpoint…:

../../../_images/vscode-debug-cbreakpoint.png

Punto de ruptura condicional

Lanzar la depuración

Ahora ya podemos lanzar la depuración pulsando la tecla F5. Nos aparecerá el siguiente mensaje en el que dejaremos la opción por defecto Archivo de Python y pulsamos la tecla ⏎:

../../../_images/vscode-debug-config.png

Configuración de la depuración

Ahora ya se inicia el «modo depuración» y veremos una pantalla similar a la siguiente:

../../../_images/vscode-debug-zones.png

Interfaz en modo depuración

Zonas de la interfaz en modo depuración:
  1. Código con barra en amarillo que indica la próxima línea que se va a ejecutar.

  2. Visualización automática de valores de variables.

  3. Visualización personalizada de valores de variables (o expresiones).

  4. Salida de la terminal.

  5. Barra de herramientas para depuración.

Controles para la depuración

Veamos con mayor detalle la barra de herramientas para depuración:

../../../_images/vscode-debug-toolbar.png

Barra de herarmientas para depuración

Acción

Atajo

Significado

Continue

F5

Continuar la ejecución del programa hasta el próximo punto de ruptura o hasta su finalización

Step over

F10

Ejecutar la siguiente instrucción del programa

Step into

F11

Ejecutar la siguiente instrucción del programa entrando en un contexto inferior

Step out

⇧ + F11

Ejecutar la siguiente instrucción del programa saliendo a un contexto superior

Restart

⌃ + ⇧ + F5

Reiniciar la depuración del programa

Stop

⇧ + F5

Detener la depuración del programa

Seguimiento de variables

Como hemos indicado previamente, la zona de Variables ya nos informa automáticamente de los valores de las variables que tengamos en el contexto actual de ejecución:

../../../_images/vscode-debug-variables.png

Panel para visualizar variables

Pero también es posible añadir manualmente el seguimiento de otras variables o expresiones personalizadas desde la zona Watch:

../../../_images/vscode-debug-watch.png

Panel para seguimiento de expresiones

1

También conocido por IDE siglas en inglés de Integrated Development Environment.

2

Foto original de portada por Kelly Sikkema en Unsplash.

3

Fuente: Gastón Danielsen en Dev.To.