arrow_back Volver
Inicio keyboard_arrow_right Art铆culos keyboard_arrow_right Art铆culo

Configura Visual Studio Code como un pro

Darwin Jim茅nez

Estudiante

av_timer 7 Min. de lectura

remove_red_eye 849 visitas

calendar_today 12 Septiembre 2022

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



  • 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 鈥渢heme鈥, 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 鈥渆spacioso鈥, 驴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 鈥渟ettings鈥 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 鈥渨indow.zoomLevel鈥, corresponde al nivel de zoom que queremos que tenga nuestro editor de texto que por defecto est谩 en cero, mientras que 鈥渆ditor.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. 馃悐馃