VS Code: una revisión en profundidad para desarrolladores de WordPress

Microsoft tiene mala reputación. A lo largo de los años, se han ganado la reputación de estar un poco atrasados ​​y menos 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 traspasan los límites de la tecnología. Ahí es donde entra en juego Visual Studio Code. Desde su lanzamiento en 2015, VS Code se ha convertido en el editor de código de facto para muchos desarrolladores, destacando a Sublime Text y Atom como las mejores opciones. Y eso dice mucho. Así que veamos por qué VS Code es tan bueno y cómo Microsoft recuperó toda nuestra confianza.

Código de Visual Studio: código abierto y amor

En la superficie, Visual Studio Code se parece a la mayoría de los demás 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, 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, desde 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 cuenta con una comunidad acérrima de desarrolladores que no solo usan el software para sus vidas profesionales, sino que también contribuyen al editor en sí oa 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?

Aquí está 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 en absoluto. 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 de código predeterminada, las actualizaciones oficiales específicas del idioma y la preparación para el futuro, y las otras cosas pesadas que un IDE puede superar. Dicho esto, existe un IDE de Visual Studio. Es un producto premium separado que Microsoft ha fabricado durante años, y Visual Studio Code es solo otro miembro de la familia Visual Studio. Entonces, si está buscando un IDE completo y pesado, puede obtener uno de MS. Pero este es un segundo bastante cercano, honestamente.

Además, el hecho de que exista un IDE de Visual Studio es la razón por la que los desarrolladores se refieren a él como VS Code o simplemente como Code 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 mirando los conceptos básicos y cómo funciona todo de inmediato, 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 los de otros editores y, por lo tanto, familiares para la mayoría de la gente.
• Se carga más rápido que la mayoría de los demás editores de código (Atom, estamos mirando en tu dirección)

Cuando termine de sorprenderse de lo receptivo que es, podemos movernos a la barra lateral izquierda. Aquí es donde vivirán la mayoría de las herramientas adicionales que vienen con VS Code.

Cada uno de los iconos predeterminados del lateral abrirá una nueva columna cuando se haga clic en ella, que se puede cambiar de 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 los 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 ser editados 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 con un poco más de fluidez 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 texto sublime). 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 de la 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 haga 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 se preguntará cómo ha podido vivir sin ella.

3. Git

Voy a comenzar diciendo que probablemente estoy sesgado en mi enfoque de Git. Tiendo a ser un usuario de línea de comandos / bash, y los clientes gráficos para Git nunca se han sentido realmente bien para mí. 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 sobre la integración de Git en VS Code es que simplemente funciona. La columna de la izquierda que aparece al hacer 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 almacenados 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 utilizable sin tener que personalizarlo. Puede dividir 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. Funciona tan bien con la función que me pareció natural incluirla aquí.

4. Consola de depuración

La consola de depuración es también una de las funciones predeterminadas de VS Code que la distingue de otros editores de código. Al momento de escribir estas líneas, hay 171 entornos de depuración disponibles para instalar dentro de VS Code. No proporcionan un recuento, pero quería saberlo y pensé que tú también, así que conté manualmente.

Dentro de los resultados, puede encontrar depuradores para todo lo imaginable. JavaScript, CoffeeScript, Coffee, Java… todos los scripts de cafeína, de verdad. Obtienes 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 obtuvo 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 a Extensions Marketplace 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 por 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 de hacer. Haga clic en el botón verde Instalar ,

A continuación, deberá volver a cargar el editor de código VS para finalizar la instalación.

Eso es todo. Una vez que esté completo, su extensión estará lista para usar. Sin embargo, es posible que desee volver a la pestaña Detalles de vez en cuando porque allí se tratan 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 generalmente se tarda en solucionarlo. No todas las extensiones mostrarán toda la información, pero cuando lo hacen, es increíblemente útil.

Atajos 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, sus dedos torpes cometerán una inyección catastrófica en la base de código.

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 conservar los atajos y mapas de teclas a los que está acostumbrado. Puede buscar en el mercado de extensiones 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 desea un resumen de los atajos de teclado que están disponibles en VS Code de forma predeterminada), puede ir a Archivo - Preferencias - Atajos de teclado .

Misc. Características 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 debe conocer.

1. El menú de selección

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ú de selección tiene una serie de funciones que le resultarán invaluables.

Específicamente, es bueno poder usar Agregar cursores a los extremos de línea con un clic, y poder ir 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 atajos, pero no todos los tienen tan fácilmente etiquetados o disponibles como VS Code. Fue refrescante verlos tan al frente, ya que son algunos de los comandos más valiosos y destacados que usará.

2. El menú de la terminal

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 comandos y la sección de terminal anteriores 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 ayudar bastante a su desarrollo.

El simple hecho de tener acceso a estos a través de un menú en lugar de tener que 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 sea realmente atractivo para todos, no solo para los programadores veteranos que vienen de VIM o Emacs.

3. Modo Zen

En el menú Ver , encontrará un submenú llamado Apariencia que contiene la opción Alternar modo Zen . Vale la pena echarle un vistazo a las otras opciones de Ver y experimentar con ellas, pero quiero llamar su atención sobre el Modo Zen porque espero que muchas personas nunca lo hayan probado.

Los diferentes editores pueden llamarlo por diferentes nombres, pero la idea general es que llene toda la pantalla solo con el documento que está editando actualmente. Es diferente 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 la base de MacOS. Cada píxel del espacio real de la pantalla lo toma su proyecto actual para que pueda concentrarse en él y en nada más.

Y si no es para usted, simplemente presione ESC y volverá a su vista anterior.

Puede que no parezca mucho, y solía ser un escéptico. Pero después de usar una función similar en Scrivener para escribir ficción, soy un converso. 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 programadores, desarrolladores experimentados o aficionados que quieren encontrar las herramientas adecuadas ... VS Code se ha creado pensando en usted. Esa 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?