Visual Studio Code (VS Code) es uno de los mejores editores de código o IDE que puedes conseguir hoy en día para obtener una experiencia de desarrollo impresionante gracias a su diseño simple y elegante, además de sus ricas características y rendimiento en comparación con otros editores de códigos que compartes el mismo conjunto de características.
IDEs vs. Editores de texto
Primero, verifiquemos las diferencias entre ambos términos. Para los desarrolladores de muchos lenguajes de programación, la práctica estándar dicta el uso de un IDE, Integrated Development Enviroment, que en español sería, ambiente integrado de desarrollo. Los IDEs son generalmente editores de códigos con funciones que incluyen cosas como la configuración de la construcción y compilación, depuradores, herramientas de análisis de código y más. Algunos ejemplos de IDEs son Eclipse, Visual Studio y XCode.
Por otro lado, los desarrolladores web han utilizado tradicionalmente editores de texto, que son muy livianos y que no contienen muchas características por si solos. Algunos editores códigos son Notepad++, Sublime Text y VSCode.
¿Por qué utilizar VS Code?
El editor de texto de VS Code de Microsoft cuenta con poderosas características similares a las del IDE. En otras palabras, VS Code tiene lo mejor de los dos mundos entre los IDEs y los editores de texto.
Cabe mencionar que VS Code es un producto totalmente independiente a Visual Studio, que vendría siendo un IDE.
A continuación, se presenta algunas razones adicionales para utilizar VS Code:
- Puede ser instalado en cualquier sistema operativo.
- Es completamente gratis.
- Es de código abierto.
- Es fácil de personalizar y tiene muchas extensiones útiles.
- Puedes utilizar tus atajos favoritos de otros editores de textos.
- Tiene poderosas características similares a las del IDE, incluyendo un depurador y una terminal incorporados.
Interfaz de usuario de VS Code
La principal intefaz de usuario de Visual Studio Code se divide en cinco secciones:
- Barra de menú
- Barra de visión
- Barra lateral
- Editor
- Barra de estado
La primera sección en la parte superior será la barra de menú, luego en el extremo izquierdo tienes la barra de vista. Junto a la barra de vista tienes la barra lateral. El área gran en el centro es donde tiene el editor y en la parte inferior hay una barra de estado.
En la barra de menú, tienes un menú de archivos, el cual te dará acceso a varias funciones relacionadas con los archivos para que puedas abrir archivos o carpetas, guardas archivos, cerrar el editor, entre muchas otras tareas.
El menú de edición, te dará acceso a varias funciones básicas de edición como deshacer, rehacer, cortar, copiar, pegar y también las funciones de encontrar y reemplazar.
En el menú de vista, puedes acceder y también alternar varios de los componentes relacionados con la interfaz de usuario para poder cambiar entre varias áreas de la barra de vista.
El menú ir, te permite hacer una navegación básica en el código para que puedas navegar hacia delante, hacia atrás, acceder al historial de navegación, así como ir a un archivo específico, símbolo, definición o un número de línea.
El menú de ayuda, te da acceso a la documentación y a las notas de lanzamiento y también comprueba si hay actualizaciones.
La barra de vista del lado izquierdo funciona en conjunto con la barra lateral, a medidas que navegas entre estas diversas áreas funcionales, también cambiarás la vista de la barra lateral.
En la barra de estado, podrás acceder a varias funciones relacionadas con la extensión. También verás iconos relacionados con el soporte de git, así que desde aquí puedes realizar funcionalidades como cambiar entre ramas y también puedes sincronizar los cambios en tu repositorio local con tu repositorio remoto.
Además, hay errores y advertencias que van a depender del tipo de proyecto que estés editando, así que si tienes errores y advertencias, podrás verlas aquí abajo.
En el lado derecho de la barra de estado, muestra el número de líneas y columnas actuales, nos muestra que estamos usando espacios o pestañas y el número de espacios. Mostrará la codificación actual y también nos permitirá establecer la secuencia de fin de línea.
También puedes enviar un bug desde aquí, así que esto te llevará al repositorio de Visual Studio Code en GitHub desde donde puedes abrir un problema.
Características principales
IntelliSense
En pocas palabras, el VS Code es excelente para completar el código. Por defecto, leerá comentarios especiales llamados cadenas de documentos para guiarte sobre los argumentos de las funciones y los tipos de variables sobre la marcha.
VS Code también mirará en los módulos de software importados y te dará información sobre los tipos de argumentos de función y descripciones. También recuerda qué tipos de variables son y te guía a través de los métodos disponibles.
Emmet
Emmet es una colección de plug-ins para editores de texto que realizan diferentes tareas que facilitan la edición de páginas web. Emmet está incluido en VS Code por lo que no necesitas instalar ninguna extensión para poder utilizarlo.
Emmet usa la sintaxis del selector CSS para generar trozos de HTML en cualquier archivo .html. Las abreviaturas Emmet también funcionan en cualquier hoja de estilo (archivo .css). Se completará con tabulaciones y colocará automáticamente el cursor en cualquier valor de atributo adicional que necesite ser añadido, el cual puede ser tabulado.
También puedes utilizar y crear tus propios fragmentos o snippets de VS Code. La sintaxis es muy similar a la de otros editores de textos. También puedes descargar fragmentos de otras personas.
Terminal
VS Code tiene un terminal incorporado que, por defecto, es exactamente el mismo a cualquier terminal que hayas utilizado con anterioridad. Los comandos de Python o cualquier otro funcionan normalmente, y los entornos virtuales también se aplicarán. También puedes tener abiertas sesiones de terminales anidadas.
Integración de Git
VS Code también rastrea automáticamente los cambios de control de fuentes para cualquier proyecto que sea un repositorio válido de git. Los archivos modificados aparecerán con una M al lado, mientras que los archivos no rastreados, es decir nuevos, obtendrán una U. Los colores cambiarán dependiendo del estado del git.
Además, la resolución de conflictos de merge visual ya está incorporada, por lo que la gestión de conflictos de merge nunca ha sido más fácil. Los archivos con conflictos aparecerán con una C al lado de ellos.
Depurador
El depurador de VS Code incorporado es muy potente. Puedes depurar y ejecutar fácilmente tus aplicaciones en un entorno de depuración aislado para arreglar e interactuar fácilmente con la aplicación durante el tiempo de ejecución, puede utilizar más de una configuración para probar diferentes comportamientos.
Comandos y abreviaciones
Cuando trabajas en un proyecto en VS Code necesitarás ejecutar un comando de vez en cuando o incluso buscar dentro de un archivo un símbolo específico o navegar entre los editores abiertos muy rápidamente todo gestionado por VS Code ya sea usando abreviaciones o shortcuts para un acceso rápido o desde el menú superior.
A continuación, se presentan algunos comandos básicos para manejar VS Code usando los comandos:
- Zoom: para aumentar o disminuir el tamaño del editor o la fuente.
- Recargar: permite recargar la instancia del trabajo actual del editor de VS Code en caso de cualquier problema o comportamiento incómodo.
- Ajuste del área de trabajo: para acceder y cambiar la configuración actual del espacio de trabajo del editor.
- Si tienes extensiones instaladas puedes acceder y activarlas a través del panel de comandos.
- Ir a la línea: para ir a un número de línea específico en un archivo.
Muchas otras cosas más puedes hacer desde el panel de comandos que puedes tomar como tu centro de operaciones para tomar el control de todos los ajustes y acciones a través de tu editor de código.
Veamos ahora los atajos que puedes usar para llegar rápidamente a una acción:
- Ctrl+F mientras un archivo este abierto podrá buscar y/o reemplazar una palabra clave en el archivo actualmente abierto.
- Ctrl+P ir a un archivo abierto o en el espacio de trabajo te pedirá el nombre del archivo, también verás la lista de los archivos recientemente editados.
- Ctrl+Tab salta hacia atrás y adelante entre los archivos actualmente abiertos, es decir archivos que se están editando.
- Ctrl+G para ir rápidamente a un número de línea específico del archivo actual.
- Ctrl + Mayúsculas + / para comentar automáticamente un bloque de código seleccionado.
- Ctrl +` abrir el terminal integrado de VS Code.
- Ctrl+Shit+FlechaArriba/FlechaAbajo para mover una línea o bloque de código seleccionado hacia arriba o hacia abajo en el archivo.
Existen muchos otros atajos, pero estos son los más básicos y los que necesitarás el 90% del tiempo mientras trabajas en VS Code.
VS Code tiene un montón de extensiones y características que aún no las menciones pero que la puedes ir descubriendo a medida que los utilices. Este editor tiene la capacidad de hacer el trabajo de un desarrollados más eficiente y divertido.
