Visual Studio Code: analicemos todas las herramientas que ofrece el IDE de Microsoft para editar archivos de proyecto
.
Ya bien sea que lo llames IDE o editor de código, debe quedar claro que la parte principal de Visual Studio Code es el área de escritura de texto.
Descubramos sus principales características.
El editor de Visual Studio Code
El editor de texto se encuentra a la derecha de la barra lateral de la interfaz predeterminada, antes de poder trabajar con los archivos, debes abrir un proyecto o carpeta.
Abrir un proyecto
Si has abierto Visual Studio Code por primera vez es muy probable que, al hacer clic en el icono del explorador del panel, aparezca una interfaz con dos botones:
- Uno para abrir una carpeta.
- Otro para clonar un repositorio.
Alternativamente, puedes abrir una nueva carpeta usando la barra de menú: Archivo > Abrir carpeta (Ctrl+K).
Una vez que se abre una carpeta, el explorador muestra el contenido en una vista de árbol.
Las líneas que contienen archivos se marcarán con iconos que simbolizan su naturaleza (js para JavaScript, llaves para json, etc).
Por lo contrario, otros íconos solamente muestran un símbolo en forma de flecha que indica si están abiertos (expandidos) o cerrados (contraídos).
Solamente en el primer caso, podrás ver el contenido que incluye cada carpeta en su interior.
Sin embargo, algunas de estas características pueden variar si instalas un nuevo tema de iconos, puedes hacerlo desde las extensiones de Visual Studio Code.
En cuanto a los archivos que corresponden a una carpeta, estos incluyen 4 iconos junto a su nombre. En orden de izquierda a derecha:
- Crear un nuevo archivo.
- Crear una nueva carpeta.
- Recargar el contenido de la carpeta.
- Contraer todas las subcarpetas: Útil si tienes muchas subcarpetas expandidas y deseas ordenarlas, buscar un archivo o carpeta específica.
También, puedes utilizar el botón derecho de tu ratón sobre cualquier carpeta o archivo para visualizar un importante menú que ofrece diferentes posibilidades: Cambiar el nombre, abrir en el explorador de archivos, copiar, etc.
Trabajar en un archivo
Una vez que una carpeta o proyecto se encuentre abierta, simplemente debes hacer clic en cualquiera de los archivo para que se muestre en el editor de texto.
Si realizas algún cambio en un archivo, al hacer clic en uno nuevo se abrirá en una nueva pestaña. Las pestañas de todos los archivos abiertos se irán apareciendo en la parte superior.
El título de la pestaña cambia de estilo según el estado de modificación del archivo:
- Nombre de la pestaña en cursiva: el archivo está en modo de vista previa.
- Si hay un punto negro al lado del nombre: El archivo ha sido modificado pero no guardado.
- Nombre de la pestaña escrito normalmente: El archivo ha sido modificado y guardado.
En realidad, hay otros estados de archivo, descritos por diferentes colores e íconos que se relacionan con la versión del archivo o la cantidad de problemas y errores indicados por cada idioma.
Además, debes de tener en cuenta de que estos parámetros pueden modificarse a la hora de cambiar el tema o plantilla de colores y diseño de toda la aplicación.
Vista del Minimapa
La función de minimapa está presente en muchos editores, incluso en los más sencillos.
Esta barra te permite tener una vista previa minimizada de todo el código, generalmente posicionada a la derecha del editor.
Al hacer clic en esta vista previa, es posible moverse muy rápidamente a través del código.
Trabajar en varios paneles
Si lo deseas, puedes abrir varios archivos en una sola vista al mismo tiempo, utilizando varios paneles.
Para hacer esto, debes arrastrar el archivo desde la pestaña del explorador al editor, colocándolo en uno de los cuatro puntos cardinales, según el lugar donde desees verlo.
Al realizar la acción de arrastrar, se previsualizará el área a la que se anclará el archivo una vez lo sueltes.
La visualización de archivos en cajas es muy útil, sobre todo si necesitas comparar varios archivos al mismo tiempo o quieres tener siempre a la vista varios archivos en concreto.
Editores abiertos
Además de tener varias pestañas en la parte superior del editor, es posible ver todos los editores abiertos en la lista de archivos del explorador.
Debes ir al Explorador y luego, si aún no visualizas una ventana en la parte superior con los editores abiertos; pulsar en los 3 puntos que despliegan un menú con la opción de Mostrar Editores Abiertos.
Eso debería mostrar un menú desplegable con todos los archivos abiertos en el editor sobre la lista de todos los archivos del proyecto.
Al hacer clic en uno de estos archivos, el editor correspondiente obtendrá el foco, por lo que podemos escribir en ese archivo.
Específicamente, varias pestañas abiertas pasarán a formar parte del mismo grupo de archivos. Si se utiliza la vista en mosaico en su lugar, se crea un nuevo conjunto de archivos.
Desplazándote sobre un archivo abierto, es posible cerrarlo mediante la cruz que aparece a la izquierda del nombre.
Los archivos abiertos en el modo de vista previa aparecerán en cursiva, si aparece un punto negro a su lado significa que hay cambios sin guardar.
Junto al nombre del menú desplegable de “Editores abiertos” de la barra lateral, también verás una etiqueta con el número de archivos no guardados, si es que fuese el caso.
Menú contextual y espacio de trabajo
El menú contextual es la ventana emergente que se muestra al presionar el botón derecho del mouse sobre un elemento determinado.
En Visual Studio Code, este último sufre muchas variaciones según el contexto y el elemento sobre en el que pulses.
Menú contextual del panel
En función del elemento seleccionado y de la zona del panel o editor donde pinches, el menú contextual (el del botón derecho, para ser claros) cambiará de contenido.
Comencemos desde el menú que aparece al hacer clic en un área vacía del panel del explorador, desde aquí puedes:
- Crear nuevos archivos (“Nuevo archivo”).
- Crear nuevas carpetas (“Nueva carpeta”).
- Abrir la carpeta actual en el administrador de archivos del sistema (“Abrir carpeta”).
- Agregar carpetas a nuestro espacio de trabajo (“Agregar carpeta al espacio de trabajo”).
- Abrir la configuración específica de la carpeta (“Abrir configuración de carpeta”).
Si haces clic en un archivo en particular, se agregan algunas opciones a las vistas anteriormente. Los más interesantes son:
- Abrir en el lateral (o “Abrir lateralmente”) que abre el archivo en un editor separado propia.
- Seleccionar para comparar: Selecciona un archivo para compararlo respecto a otro.
- Compararseleccionados: Esta opción aparece solamente si seleccionadas varios archivos, usando el botó nde Cntrl + Click en los archivos que desees comparar. Compara los archivos seleccionados en formato
diff. - Configuraciones que normalmente están disponibles en los archivos, como copiar/pegar/cortar.
Algunas funciones cambian según el tipo de archivo, por ejemplo en un proyecto Java encontrarás la posibilidad de crear y administrar el pom.xml maven o ejecutar una clase JAVA específica y depurarla.
Esta y otras opciones que podremos encontrar a lo largo de toda la interfaz, hacen que Visual Studio Code se aproxime más a las funcionalidades ofrecidas por un IDE que las de un editor al uso.
Espacio de trabajo
El concepto de espacio de trabajo debe analizarse no solamente como el de un espacio en el que se incluyen todos los archivos de un proyecto.
El crear un *espacio de trabajo de Visual Studio Code** también ofrece ampliar las posibilidades de su uso, permitiendo al usuario unir múltiples carpetas de diferentes puntos del sistema sin la necesidad de “moverlas físicamente”.
Lo que es muy útil desde el punto de vista organizativo.
Vas a poder acceder a las opciones de un espacio de trabajo desde la opción Archivo del menú principal. Dodne encontrarás las muy útiles opciones de:
- Abrir área de trabajo desde archivo..
- Agregar carpeta al área de trabajo
- Guardar área de trabajo como..
- Área de trabajo duplicada
Menú contextual en el editor
El menú contextual del editor cambia según el contenido del archivo y las extensiones instaladas. Patiendo de las operaciones más comunes y habituales.
Con las extensiones adecuadas, el menú no solo aumenta considerablemente la cantidad de elementos; sino que ayudará a optimizar y automatizar los flujos de trabajo con infinidad de opciones adicionales.
Barra del panel inferior
Por último, nos queda por revisar / mencionar el panel inferior que nos muestra el editor de Visual Studio Code, que muchas veces pasa totalmente inadvertido; pero no por ello, deja de ser menos importante.
Las opciones que afectan a la edición de archivos y se muestran en la barra inferior; son sin lugar a dudas las que se muestran a la derecha, donde vas a poder ver:
- El número de línea donde se encuentra el cursor.
- El número de columna donde se encuentra el curso.
- El carácter de sangría utilizado (tabulador o espacio, con su tamaño también).
- La codificación del archivo (UTF-8 en el caso de sistemas similares a UNIX)
- El terminador de línea (LF en sistemas similares a UNIX o también puede ser CRLF)
- La naturaleza del archivo o al menos, el idioma en el que está escrito el archivo que se edita en el momento actual.
Puedes hacer clic en cada opción para cambiar/configurar todos estos valores. Por tanto, puedes cambiar rápidamente (y temporalmente) el número de líneas, el carácter de sangría, la codificación, el lenguaje de programación, etc.
Todo ello, sin necesidad de acceder a una configuración avanzada, tan simple como hacer un solo clic.