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 extensiones. [2]

Instalación#

VSCode tiene disponibles paquetes autoinstalables para todos los sistemas operativos.

Extensiones recomendadas#

Para escribir un «mejor» código Python en VSCode sería deseable tener instaladas las siguientes extensiones:

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#