Visual Studio Code

Instalar visual studio codeMuy 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í:

Visual Studio Code

 

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:

VSCode en ingles

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..

Solarized Dark

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:

Browse extension lenguaje

Ventana izquierda - Python

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

Instalar Python

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:

La terminal y las partes 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

CMD SHIFT P o sino CTRL SHIFT P

Y luego en “Install Additional Lenguajes

Añadir lenguajes adicionales

Y finalmente encontraremos el español a la izquierda. Bastará solo con dar clic en install.

 

Instalar Español

Luego de instalar el paquete de idioma nos pedirá reiniciar, damos clic en la advertencia “Change Lenguaje and Restart“:

Cambiar lenguaje y reiniciar

Y finalmente al volverlo a abrir en el caso que no se ejecute automáticamente debería estar en español:

VS CODE 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:

Screenshot_VSCODE

Yo he instalado las siguientes extensiones y son las que por ahora necesito, ni más ni menos:

  • Git Graph - VSCode Cyberpunk: Bueno es solo un theme pero queda muy chulo 😛
  • Kite: Por supuesto omito Jupiter porque aún ni se porque diablos la he instalado. Tal vez algún día recuerde, en fin. Kite es una extensión que nos permite auto-completar código de forma inteligente para diversos lenguajes de programación
  • PyLance: Nos otorga soporte inteligente para el lenguaje Python.

 

Atención! Si aún no aprendes GIT
Si aún no has aprendido a usar GIT / Github instala solo KITE + PYLANCE. Ya aprenderemos en la siguiente lección a usar otro software gratuito en vez de extensiones para Visual Studio Code. Si ya eres usuario experimentado de Git, adelanta instala las extensiones que necesites y mejor se adapten a tus requerimientos!

Kite para Visual Studio Code

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:

  1. 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.
  2. Error de sintaxis en pythonDetecció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.
  3. 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.
  4. 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.
  5. 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

 

 


 

 

Continúa leyendo!
Entrada anterior! Siguiente entrada!

Compartir es agradecer! :)

Hey no te vayas sin dejarme un comentario!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Aprende a programar de manera profesional!

¿Todavía sin obtener una retribución justa de tu aprendizaje?

Curso de Python Udemy

Convierteté en un verdadero Jedy de Python y comienza a desarrollar aplicaciones de forma profesional obteniendo un certificado de Udemy!. Pasate por la sección de Cursos Premium y realiza los mejores cursos con certificación válida a nivel internacional por apenas unos dolares!