¡Saludos! 🖖

Este articulo tiene como objetivo ayudarte a configurar tu entorno de trabajo en Visual Studio Code y para que tu experiencia de aprendizaje sea lo más agradable posible; para ello deberás seguir detenidamente esta serie de pasos para que todo salga exitoso. ¿Estás listo? ¡VAMO A DARLE!.

Nota: Pueden haber confusiones con el editor Visual Studio y Visual Studio Code, si bien ambas nos permiten desarrollar estas son distintas, Visual Studio tiene herramientas más robustas que sirven para el desarrollo de proyectos más complejos en algunos lenguajes en especifico (al igual que su peso y tiempo de instalación es mayor al de Visual Studio Code ), una vez explicado este apartado podemos continuar.

Descarga de Visual Studio Code.

Comenzaremos en dirigirnos a la página oficial de Visual Studio Code para descargar su editor de texto, para ello daremos clic aquí. Posteriormente nos aparecerá un menú para descargar el instalador dependiendo de nuestro sistema operativo actual, basta con elegir nuestro sistema operativo correspondiente dando clic y segundos después empezará a descargar el instalador.

Instalación y selección de propiedades.

Una vez descargado el instalador procedemos a ejecutarlo dando doble clic en él, y realizamos los siguientes pasos:

• Aceptamos el acuerdo de licencia de VSCode.
  
  
  
  
  
• Dejamos por defecto la ruta de instalación del programa.
  
  
  
  
  
• Permitimos la creación de la carpeta de Visual Studio Code.
  
  
  
  
  
• Nos aparecerá una sección de accesos adicionales las cuales podemos seleccionar, aquí una breve descripción de cada tarea:
  • El primer acceso nos permite un acceso directo en escritorio para poder ejecutar Visual Studio Code.
  • El segunda acceso nos permite abrir un archivo utilizando clic derecho y seleccionar dicha opción.
  • El tercer acceso nos permite abrir un directorio utilizando clic derecho y seleccionar dicha opción.
  • El cuarta acceso nos permite abrir un archivo de cualquier extensión utilizando Visual Studio Code.
  • El quinta acceso nos permite agregar Visual Studio Code a nuestras variables de entorno para su óptima ejecución.
    Seleccionamos todos los accesos directos y damos clic en “Siguiente”.
    
    
    
    
    
• Confirmamos las características seleccionadas y damos clic en “Instalar”.
  
  
  
  
  

Posteriormente comenzará la instalación, una vez finalizada nos saldrá una ventana de instalación exitosa junto con un recuadro con la opción de ejecutar Visual Studio Code, marcamos ese recuadro y finalmente damos clic en “Finalizar”.

Configuración de nuestro workspace.

Una vez ejecutado Visual Studio Code comenzaremos a realizar unos cuantos ajustes. Como te pudiste dar cuenta, vscode está configurado en el idioma inglés (lo cual a mi opinión va de maravilla) pero si actualmente se te dificulta el idioma vscode cuenta con una extensión con la que podemos cambiar el idioma inglés a español. Para ello tendremos que digirinos a nuestro menú lateral izquierdo y seleccionar el icono de un cuadrado que es el de la tienda, posteriormente escribimos “Spanish Language” en el buscador, seleccionamos la primera opción y lo instalamos (una vez terminada la instalación tendrás que recargar el programa para que los cambios se reflejen), ¡Y listo! Ya tenemos nuestro Visual Studio Code en idioma español.</br></br>
</br></br>

• La siguiente extensión que instalaremos es Material Icon Theme, esta contiene un catálogo de iconos de lenguajes de programación que asigna a nuestros archivos, estas se dan de acuerdo al tipo de archivo con el que estemos trabajando. En lo personal, es una herramienta que ayuda demasiado a tener un mejor control de los archivos con los que estamos trabajando, al igual que sus iconos están muy bonitos.
  
  
  
  
  

• La siguiente extensión que instalaremos será ident-rainbow, esta manejará un papel importante al momento de estar programando, ya que nos ayudará a poner guías de identación en nuestro código Python. En la sintaxis actual de Python no se manejan corchetes como símbolo de separación y estructuración por lo que es muy común que ocurran errores en el código por estar mal identado, esta extensión nos ayudará a evitar eso en la medida de lo posible.
  
  
  
  
  

• Otra configuración que en lo personal es mi favorita es que podemos cambiar el tema que viene por defecto en nuestro Visual Studio Code. Para ello nos tendremos que dirigir al icono de configuración y seleccionamos la opción de color de tema (o si bien lo prefieres, utilizar la combinación de teclas Ctrl + K + Ctrl + T), se nos desplegará una lista con temas predeterminados, basta con elegir el que más te agrade.
  
  
  
  
  

En lo personal, yo recomiendo utilizar temas que sean suaves y agradables a la vista, cuando programamos dedicamos una gran parte de horas trabajando por lo que llega a agotarnos la vista estar mucho tiempo frente al monitor. Recomiendo mucho utilizar el tema de Outrun, este tiene una temática estilo neón pero sin ser exagerado, utiliza colores oscuros pero a la vez suaves que son del agrado para la vista. Basta con dirigirse a la tienda de Visual Studio Code y escribir Outrun, una vez instalado se activará en nuestro editor y nos preguntará si queremos la versión night o electrics, recomiendo mucho la versión electrics ya que es más sutil.

De igual manera, puedes buscar más temas en la tienda de Visual Studio Code, que usualmente la comunidad es quien los crea y comparte. Basta con digirse a la tienda y escribir la palabra “theme”, aparecerá un catálogo donde puedes explorar y elegir a tu gusto.

Hasta este momento hemos hecho muchas cosas, puedes notar que nuestra interfaz está tomando un aspecto muy amigable. Por otra lado, puede que te parezcan un poco pequeño el tamaño de fuente de las letras y/o que el tamaño de vista de nuestro editor esté muy “espacioso”, ¿sabías que lo podemos modificar a nuestro gusto? Para ello, tendremos que realizar la siguiente combinación de letras ctrl/command+shift+p donde se nos desplegará un menú de opciones, luego procederemos a escribir “settings” seleccionando así la primera opción.

Notarás que se abrirá un archivo con .json con los datos de extensiones y temas que hemos instalado (sino te aparecen no te preocupes). Ahora, dentro de las llaves escribiremos entre comillas las dos lineas que aparecen en la imagen. Una de ellas es “window.zoomLevel”, corresponde al nivel de zoom que queremos que tenga nuestro editor de texto que por defecto está en cero, mientras que “editor.fontSize” corresponde al tamaño de la fuente de texto de nuestro editor y que por lo general está por defecto con el tamaño 14. Te recomiendo mucho jugar con estos valores y dejarlos con el que más te sientas más cómodos, para que puedas ver los resultados basta sólo con guardar los cambios del archivo.

¡Agradezco mucho la atención prestada! Espero de todo corazón que esta información te sea de mucha ayuda, recuerda que la práctica hace al maestro 🦾.

Team Código Facilito. 🐊🤘