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:

Código con barra en amarillo que indica la próxima línea que se va a ejecutar.
Visualización automática de valores de variables.
Visualización personalizada de valores de variables (o expresiones).
Salida de la terminal.
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¶