Indice del contenido
Muy buenas a todos mis lectores, en este caso les traigo un sencillo tutorial de Visual Studio Code a quienes aún no lo están utilizando. La realidad es que estoy desarrollando una guía muy completa pero para no omitir nada decidí escribir este post donde enseñare a configurar este editor de código fuente para trabajar con Python y gestionar nuestros proyectos de la manera que nos sea más cómoda y practica posible. Aún así fuera el caso de que no les gustará este editor también esta muy bien Atom, que quizás ya muchos lo conozcan. En mi caso decidí usar Visual Studio Code por una cuestión de que me ha parecido muuuy práctico y me ha ahorrado mucho tiempo habiéndolo personalizado a mi gusto, claro.
- ¿Y de qué guía hablabas?.
- – Em.. Lo verás cuando la publique, atentí que voy a reventar el blog a contenido!
¿Qué es Visual Studio Code y por que debería usarlo?
Visual Studio Code es un editor de código fuente desarrollado por Microsoft (si, Windows) pero resulta que es gratuito y multi-plataforma. Eso significa que lo podemos usar también los usuarios de Linux ( como io! :3 )
Había leído por allí algunas criticas, de usuarios despechados. Pero al probarlo me ha simplificado la vida.
Aquí te dejo el link de la página oficial para que lo descargues e instales. El proceso de instalación es muy sencillo en realidad, no requiere más que siguiente, siguiente, siguiente. Vamos, que si estas aprendiendo a programar ya debes saber instalar un programa. Al abrirlo te encontrarás algo así:
Conociendo Visual Studio Code
O puede que te aparezca en Ingles como es mi caso y quieras pasarlo a español. Si es así a continuación vamos a ver como sería la primera ejecución y como configurar e instalar algunas extensiones básicas:
Primero que nada podemos elegir algún estilo para cambiar el theme por defecto simplemente dando clic en Browse Color Theme.. En mi caso voy a elegir el último..
Seguido tenemos la opción «Rich support for all your lenguages» y donde se refiere a lenguajes de programación. Lo normal sería en nuestro caso añadir soporte para Python 3:
Haciendo clic allí se nos abrirá a la izquierda la lista de lenguajes de programación y scripting donde seleccionamos Python y damos en «Install«. Aquí estamos instalando el soporte del editor de código fuente para el lenguaje. Pero en mi caso me ha solicitado instalar Python 3 puesto que no se encontraba instalado ya que he creado un nuevo usuario de mi Debian para simular una nueva instalación. A la derecha como verás me sale el clásico código que todos los usuarios de Linux conocemos para instalar Python 3. Así que en mi caso lo voy a instalar.. Dando clic en «Open Terminal»
Así va a abrirse debajo una terminal tradicional de Linux pero en este caso «dentro» por decirle así del mismo Visual Studio Code por lo que podremos trabajar desde allí sin necesidad de minimizar y abrir una terminal como lo haríamos tradicionalmente.. Pero en este caso voy a aprovechar para hablar de las partes y la funcionalidad del diseño de VScode:
En el recuadro blanco normalmente veremos el código del archivo que se ha abierto (claro que podemos abrir múltiples archivos de un mismo proyecto o proyectos diferentes) y estos son gestionados en pestañas desde la parte superior. En este caso también sucederá lo mismo con las propias configuraciones de Visual Studio Code, es decir se mostrar en una pestaña, en este caso llamada «Welcome» ya que es la que se abre al inicio.
A la izquierda de este recuadro que marque de blanco encontraremos una especie de Barra lateral que si queremos podemos cerrar, donde en este caso ha seguido mostrando la lista de lenguajes que soporta el editor. Pero en ella también encontraremos diferentes funciones, como una lista de archivos pertenecientes al proyecto en el que estamos trabajando. Para cambiar esta vista solo hace falta hacer clic en algún icono del recuadro que te marque con amarillo donde se clasifican una especie de pestañas que contienen:
- Gestor de archivos,
- Búsqueda de código o archivos (como una lupa)
- Manejador o controlador de GIT y donde nos mostrará los cambios.
- Un apartado de Ejecución y depuración.
- Los paquetes y extensiones.
- Y finalmente puede que te muestre o bien una especie de pipeta o un icono de Github como en mi caso en mi ordenador actual.
Y finalmente como te decía abajo encontramos otro apartado que también contiene pestañas donde podemos navegar por la Terminal, Salidas del código (Output), Problemas (donde se mostrarán los errores [resaltado con rojo]) y por supuesto la consola de Debug.
Pasar Visual Studio Code de Ingles a Español
Y siguiendo con lo que estábamos es momento de pasarlo a español. Para ello debemos utilizar el siguiente atajo:
CMD + Shift + P
o
Ctrl + Shift + P
Así se nos abrirá el siguiente apartado donde debemos buscar «Configure display lenguaje»
Y luego en «Install Additional Lenguajes»
Y finalmente encontraremos el español a la izquierda. Bastará solo con dar clic en install.
Luego de instalar el paquete de idioma nos pedirá reiniciar, damos clic en la advertencia «Change Lenguaje and Restart«:
Y finalmente al volverlo a abrir en el caso que no se ejecute automáticamente debería estar en español:
Te recomiendo que pruebes abrir alguna carpeta de algún proyecto en Python para que comiences a familiarizarte con el editor y notarás por ejemplo que apenas detecte un error de sintaxis va a marcarte en el apartado de problemas. Pero ya veremos esas características más adelante al igual que el auto-completado.
Instalar nuevas extensiones
Es importante hacer uso de las extensiones que nos ofrece puesto que así podemos sacarle el máximo provecho a este editor de código. Cada desarrollador tiene una setup o una configuración por defecto en su ordenador que es donde siempre se sentirá más cómodo. Pero también es importante recordar que demasiadas extensiones suman tiempo a la carga de nuestro editor y eso se traduce en consumo de memoria y lentitud cuando te levantas temprano y deseas comenzar a programar de una bendita vez.
Te recomiendo instalar solo aquellas extensiones que sepas que vas a utilizar y te van a facilitar las cosas que de otra manera te llevarían más tiempo. En mi caso tengo una setup (configuración) en Debian KDE de mi VSCode que te muestro a continuación, y donde te dejare los nombres de cada extensión. Recordemos que para instalar nuevas extensiones simplemente debes hacer clic en el recuadro de la izquierda:
Yo he instalado las siguientes extensiones y son las que por ahora necesito, ni más ni menos:
Cyberpunk: Bueno es solo un theme pero queda muy chulo 😛- Kite: es una extensión que nos permite auto-completar código de forma inteligente para diversos lenguajes de programación. ATENCIÓN: Esta extensión esta obsoleta pero nadie lo menciona, por lo que creo que es importante saber que es mejor instalar TabNine IA. Obviamente la instalas como cualquier extensión y luego debes crearte una cuenta y loguearte para comenzar a disfrutar de sus beneficios!
- PyLance: Nos otorga soporte inteligente para el lenguaje Python. Es un paquete algo pesado por lo que preparate un café y dejalé instalar!
Y con esas extensiones deberías estar más que en sobra. Hay algunas otras muy útiles que te recomiendo buscar en google o revisar algunos vídeos de Youtube donde se recomienden más extensiones. Para mi, con estas son suficientes.
Características de Visual Studio Code y como aprovecharlas a la hora de programar
Si tu trabajas con algún otro editor sencillo en proyectos pequeños o ejercicios tal vez no notarás mucha diferencia y tampoco merecería la pena realizar toda esta setup. Sin embargo a medida que avanzamos en nuestro aprendizaje comenzaremos a trabajar con múltiples archivos, y no solo de extensión correspondiente a Python. Puede que un mismo proyecto tengas Python, JSON, HTML, CSS, JS y en este caso visual studio nos será muy útil para mantenernos organizados sin necesidad incluso de ser un IDE completo. Pero no termina allí veamos algunas características de las que yo más aprecio a la hora de picar código:
- A la hora de importar una librería VS Code nos va a mostrar si esta se está utilizando en alguna parte del código. Porque me ha sucedido de importar como loco y luego utilizar la mitad de las cosas. Sin dudas bastará con revisar si el código en la importación no esta opaco para saber si dicha librería la estamos utilizando o no en alguna parte.
Detección de errores en tiempo real. Cuando escribimos código a veces nos equivocamos al tipear ya sea porque estamos con sueño o porque tipeamos a lo loco, como es mi caso. En esas circunstancias tan amargas, Visual Studio Code + Kite inmediatamente te marcará los errores e incluso te indicará en que linea se encuentran.- Explorador de archivos y búsqueda: Otra ventaja que me encanta es poder navegar en los archivos de mi proyecto y tenerlos a la izquierda del código. Y no olvidemos la funcionalidad de búsqueda y reemplazo que nos favorece mucho cuando hemos creado aplicaciones de muchas lineas de código y necesitamos reemplazar algún nombre de variable o modificar grandes archivos de bases de datos no relaciones.
- Integración con GIT: Sin duda otra característica que me encanta; la facilidad de poder realizar un commit en segundos o cambiar de rama fácilmente mientras podemos ver gráficamente como se organiza nuestro proyecto y los cambios realizados.
- Otras ventajas: Te invito a descubrir por ti mismo la cantidad de ventajas que presenta utilizar Visual Studio Code de manera consistente, una vez que te acostumbras es posible que nunca quieras dejar de utilizarlo!.
Atajos de teclado
Revisa la documentación oficial de Visual Studio Code y conoce los atajos de teclado y modos que te van a facilitar mucha la vida a la hora de programar:
Atajos de teclado con imágenes explicativas.
Espero este post le sirva a aquellos que a menudo me preguntan que IDE utilizar o que herramientas les podrían ayudar en su camino de aprendizaje!. Nos vemos pronto e ir instalando Visual Studio Code que no os vais a arrepentir!
Me despido habiendo dejado una entrada más en este tan abandonado blog!. En la siguiente aprenderemos a trabajar usando Visual Studio Code y crearemos un proyecto!
Allí nos vemos! Si tienes problemas con Visual Studio Code no dudes plantearlos en nuestro Chat para poderte ayudar: Ir al CHAT
| Entrada anterior! | Siguiente entrada! |
