Microsoft tiene una mala reputación. A lo largo de los años, se han ganado la reputación de estar un poco atrasados y no ser fáciles de usar. Hace años, incluso podrían haberlo merecido. Pero ya no más. Las últimas empresas de Microsoft son multiplataforma, intuitivas y superan los límites de la tecnología. Ahí es donde entra Visual Studio Code. Desde su lanzamiento en 2015, VS Code se ha convertido en el editor de código de facto para muchos desarrolladores, superando a Sublime Text y Atom como las mejores opciones. Y eso es decir mucho. Así que vamos a explicarte por qué VS Code es tan bueno y cómo Microsoft recuperó toda nuestra confianza.
En la superficie, Visual Studio Code se parece a la mayoría de los otros editores que existen. Resaltado de sintaxis, tema oscuro, extensiones, etc. Pero cuando profundizas un poco más, ves que, a diferencia de muchos otros editores e IDE, la experiencia que obtienes en VS Code es sencilla y, perdón por el juego de palabras, sublime.
Lo más positivo que tiene VS Code es que es de código abierto . Pero, de nuevo, también lo es Atom (y técnicamente también es propiedad de Microsoft, ya que adquirieron GitHub). Más que eso, Microsoft lo ha lanzado bajo la licencia MIT , la más indulgente y abierta de las licencias de código abierto. Para una empresa que históricamente ha sido bastante estricta con las patentes y su propiedad intelectual, este es un gran paso .
Debido a esta licencia, VS Code dirige una comunidad de desarrolladores acérrimos que no solo usan el software para su vida profesional, sino que también contribuyen al editor en sí o a algunas de las muchas extensiones y complementos que están disponibles para personalizarlo. Existe cierto debate sobre la amplitud de la licencia MIT para Visual Studio Code, pero eso no debería afectar a los usuarios ni a la mayoría de los desarrolladores.
¿Un IDE todo en uno?
Esta es la pregunta del momento: ¿VS Code es un editor de código o un IDE? Tiene integración Git incorporada , acceso a terminal y bash, una consola de depuración y un tipo especial de resaltado de sintaxis y finalización de código llamado IntelliSense.
Todo eso es inmediato desde la descarga, sin extensiones ni personalización alguna. Por lo general, ese tipo de funciones integradas y actualizadas por el equipo de desarrollo oficial están disponibles en aplicaciones premium como PhpStorm . Pero con VS Code… esa línea se vuelve borrosa. Ofrece muchas características similares a IDE.
Pero al final, no es un IDE completo . No obtiene la refactorización del código predeterminado, las actualizaciones oficiales específicas del idioma y la preparación para el futuro, y otras cosas pesadas que un IDE puede atravesar. Dicho esto, hay un IDE de Visual Studio . Es un producto premium independiente que Microsoft ha fabricado durante años, y Visual Studio Code es solo otro miembro de la familia de Visual Studio. Entonces, si está buscando un IDE completo y pesado, puede obtener uno de MS. Pero este es un segundo bastante cercano, sinceramente.
Además, la existencia de un IDE de Visual Studio es la razón por la que los desarrolladores se refieren a él como Código VS o simplemente Código en lugar de Visual Studio. De lo contrario, sería demasiado confuso.
Código VS: Listo para usar
Si aún no lo ha adivinado, hay muchas partes que componen VS Code. Comencemos por ver los conceptos básicos y cómo funciona todo desde el primer momento, antes de agregar cualquier tipo de extensión o personalizar cualquier cosa.
Cuando abra el editor por primera vez, notará dos cosas:
- El diseño y el diseño son similares a otros editores y, por lo tanto, familiares para la mayoría de las personas.
- Se carga más rápido que la mayoría de los otros editores de código ( Atomo , estamos mirando en su dirección)
Cuando haya terminado de sorprenderse con la capacidad de respuesta, podemos movernos a la barra lateral izquierda. Aquí es donde vivirá la mayoría de las herramientas adicionales que vienen con VS Code.
Los íconos predeterminados al lado abrirán cada uno una nueva columna cuando se haga clic en el que se puede cambiar el tamaño y personalizar.
1. Explorador
Su vista predeterminada en VS Code será la pestaña Explorador . En él, verá una sección llamada Editores abiertos , que es la jerga de VS Code para documentos. Cada archivo que tiene abierto se considera un nuevo Editor. Entonces, si tiene 8 archivos .css abiertos, verá una lista de 8 editores.
Luego tiene la lista de programas abiertos que pueden crear archivos para editar con VS Code. Para este ejemplo, verá que el único que tengo abierto en segundo plano es Snagit . Debajo está el esquema que muestra el esqueleto del archivo actual. Cuando obtiene un archivo gigantesco y necesita obtener una vista de arriba hacia abajo de toda la estructura, la vista Esquema en realidad funciona un poco mejor que incluso el minimapa a la derecha de la pantalla.
2. Buscar
La función de búsqueda en VS Code es fenomenal. No es que sea más poderoso que otros editores (porque tengo que ser honesto aquí: adoro Buscar/Reemplazar en Sublime Text). Es que es más fácil y transparente que otros editores.
Cuando realiza la búsqueda, cada instancia de su término de búsqueda se encuentra en la parte inferior de la columna derecha. Luego puede hacer clic en una sola instancia para resaltar la ubicación del término de búsqueda dentro del archivo. (Si hace CTRL/CMD-clic, se abrirá una segunda instancia del archivo resaltando la línea recién elegida).
Si elige reemplazar el término en el segundo campo, los resultados mostrarán una versión roja tachada del término de búsqueda y un reemplazo teñido de verde en los resultados. Cuando hace clic en buscar/reemplazar en los resultados, aparecerá una diferencia comparativa para obtener una vista previa de los cambios. Esta función es tan útil que te preguntarás cómo has podido vivir sin ella.
3. Git
Comenzaré diciendo que probablemente mi enfoque de Git sea parcial . Tiendo a ser un usuario de línea de comandos/bash, y los clientes gráficos para Git nunca me han parecido adecuados. Así que mucha integración de Git con otros editores e IDE no ha sido mi taza de té. Sin embargo, la implementación de VS Code es un híbrido entre la línea de comandos y una GUI, y funciona sorprendentemente bien sin importar qué versión de Git prefiera. Consíguelo… ¿ versión de Git?
La parte de la integración de Git en VS Code es que simplemente funciona. La columna de la izquierda que aparece cuando hace clic en el icono de Git es un indicador visual del estado de su repositorio. Puede hacer clic en los puntos suspensivos (…) para ver los comandos de Git que normalmente tendrían que escribirse de manera muy específica. Puede agregar, confirmar, enviar e incluso modificar sus archivos preparados y trabajar en varias ramas a través del menú contextual.
Además, tiene la opción de abrir una terminal bash en el propio editor. Hay un menú de Terminal en la barra de navegación, y el que está dentro de VS Code es rápido, limpio, fluido y bastante útil sin tener que personalizarlo. Puede dividirse en varias columnas si es necesario y mantener varios directorios abiertos en diferentes terminales entre los que puede cambiar a través del menú desplegable.
La terminal tampoco es específica de Git. Simplemente funciona tan bien con la función que se sintió natural incluirla aquí.
4. Consola de depuración
La consola de depuración también es una de las funciones predeterminadas de VS Code que lo hace destacar entre otros editores de código . Al momento de escribir este artículo, hay 171 entornos de depuración disponibles para instalar dentro de VS Code. No proporcionan un conteo, pero quería saber y supuse que tú también lo hacías, así que conté manualmente.
Dentro de los resultados, puedes encontrar depuradores para todo lo imaginable. JavaScript, CoffeeScript, Coffee, Java… todos los scripts de la marca cafeína, en realidad. Obtiene entornos LUA y Python y Ruby, Docker, PHP, SASS, LESS y… todo. De todos los lenguajes de programación oscuros y/o muertos para los que traté de encontrar un depurador, QBasic fue el único que no arrojó ningún resultado. Y nadie lo ha usado en mucho tiempo. Realmente creo que sería difícil encontrar algo de uso moderno que no esté disponible en Extensions Marketplace.
5. Mercado de extensiones
Dicho todo esto, una mirada más profunda al mercado de extensiones le da una idea del tipo de herramientas que puede esperar de la comunidad de desarrollo del editor. Puede ver en la captura de pantalla anterior los millones de instalaciones que tienen algunas extensiones, y si no está seguro de por dónde empezar, ordenar por Instalación o Popularidad puede ser su mejor opción.
Puede ordenar y buscar por palabra clave usando el parámetro @sort . Pero también puede hacer clic en los puntos suspensivos (2) para ver un menú desplegable con todas sus opciones. Las opciones para administrar sus propias extensiones instaladas también se encuentran aquí.
Una vez que encuentre algo que desee instalar, es muy sencillo hacerlo. Haga clic en el botón verde Instalar ,
Luego deberá volver a cargar el editor de VS Code para finalizar la instalación.
Eso es todo. Una vez que se completa, su extensión está lista para usar. Sin embargo, es posible que desee volver a la pestaña Detalles de vez en cuando porque allí se cubren varios problemas, a menudo a través de etiquetas actualizadas y codificadas por colores.
Poder verificar el estado de dependencia y vulnerabilidad es excelente, y puede ver cualquier problema abierto con las extensiones y cuánto tiempo lleva solucionarlo. No todas las extensiones mostrarán toda la información, pero cuando lo hacen, es increíblemente útil.
Métodos abreviados de teclado y mapas de teclas
Quizás la parte más importante de un editor de código son los atajos de teclado y los mapas de teclas. Todas las cosas de las que ya hemos hablado son geniales y son parte integral del éxito del editor y del proyecto. Pero una vez que te acostumbras a un mapa de teclas y tus dedos los usan a través de la memoria muscular, cambiar a uno nuevo es casi imposible.
En el mejor de los casos, el intercambio ralentizará el cronograma de su proyecto y reducirá su eficiencia y, en el peor de los casos, sus torpes dedos cometerán una inyección catastrófica en el código base.
No importa de dónde venga cuando migre a VS Code, la comunidad lo tiene cubierto. Ya sea de VIM, Emacs, Sublime Text o incluso Notepad++ , puede mantener los accesos directos y los mapas de teclas a los que está acostumbrado. Puede buscar Extensiones Marketplace con @recommended:keymaps o ir a Archivo – Preferencias – Keymaps para que aparezca la lista de extensiones disponibles.
Y si no tiene preferencia por los atajos, también está bien. Si siente la necesidad de personalizar algo (o simplemente quiere un resumen de los métodos abreviados de teclado disponibles en VS Code de forma predeterminada), puede ir a Archivo – Preferencias – Métodos abreviados de teclado .
Varios Funciones que debe conocer
Como descripción general, debería poder ver en este punto la mayor parte de lo que VS Code puede ofrecer como editor de texto y código. Dicho esto, hay un puñado de cosas útiles que debes saber.
Esto es útil sin importar el nivel de desarrollo que tengas, pero es especialmente útil si eres nuevo en los editores en general. El menú Selección tiene una serie de funciones que encontrará invaluables.
Específicamente, es bueno poder usar Agregar cursores a los extremos de línea con un clic, y poder ingresar al menú y Seleccionar todas las apariciones de una palabra, frase o fragmento resaltado dentro del archivo actual. La mayoría de los editores los tienen como accesos directos, pero no todos los tienen tan fácilmente etiquetados o disponibles como VS Code. Fue refrescante verlos desde el principio, ya que son algunos de los comandos más valiosos y destacados que usará.
El hecho de que trabaje en un editor de código no significa que sea un asistente de línea de comandos. De hecho, es posible que haya mirado la línea de comando y la sección de terminal anterior y haya pensado que nunca la usaría.
Pero eche un vistazo al menú Terminal . Incluso si no hace mucho con él, verá algunos comandos básicos que puede ejecutar desde el menú que pueden ayudarlo bastante en su desarrollo.
El simple hecho de tener acceso a estos a través de un menú en lugar de necesitar conocer los comandos de shell abre la terminal y bash y la línea de comandos de una manera que muchas aplicaciones simplemente pasan por alto. Son pequeños toques como estos los que hacen que VS Code realmente atraiga a todos, no solo a los programadores veteranos que vienen de VIM o Emacs.
3. Modo zen
En el menú Ver , encontrará un submenú llamado Apariencia que contiene una opción Alternar modo Zen . Vale la pena revisar y experimentar con las otras opciones en Ver , pero quiero llamar su atención sobre el Modo Zen porque espero que muchas personas nunca lo hayan probado.
Diferentes editores pueden llamarlo por diferentes nombres, pero la idea general es que llene toda su pantalla con solo el documento que está editando actualmente. Se diferencia del modo de pantalla completa en que no maximiza la aplicación, sino el documento.
Es difícil mostrar el modo con una captura de pantalla porque realmente no puede mostrar que toda la pantalla está cubierta por el editor de VS Code. Incluso la barra de tareas de Windows y el puerto de MacOS. Su proyecto actual toma cada píxel de la pantalla para que pueda concentrarse en él y nada más.
Y si no es para usted, simplemente presione ESC y volverá a su vista anterior.
Puede que no parezca mucho, y yo solía ser un escéptico. Pero después de usar una función similar en Scrivener para escribir ficción, me convertí. Puede entrar más fácilmente en un estado de flujo y realmente hacer las cosas. Muchas felicitaciones a VS Code por implementar el Modo Zen para que podamos conectar nuestros auriculares y trabajar sin distracciones cuando queramos (o tanto como podamos).
Terminando
A fin de cuentas, sería negligente no descargar Visual Studio Code y probarlo. Microsoft ha lanzado lo que podría ser el editor más estable, más compatible, más rápido y proporcionalmente liviano/con muchas funciones que existe. Nuevos codificadores, desarrolladores experimentados o aficionados que desean encontrar las herramientas adecuadas… VS Code se creó pensando en usted. No es una hazaña fácil de lograr, pero como lo ha hecho, VS Code vale los bits y bytes en su disco duro. Y tal vez incluso otra mirada a Microsoft si los hubiera descartado previamente.
¿Cuáles son tus aspectos favoritos de VS Code? ¿Has hecho el cambio?