VisualStudio Code: instalación, teclas de acceso directo, plugins e integraciones

Tengo que admitir que en los últimos dos años, no importa cuánto entre una actualización o algo así, prácticamente no puedo imaginarme sin VSCode. Lo uso como si fuera prácticamente una extensión de mi brazo, esto es malo cuando trabajo con alguien que usa otro editor... Pero de todas formas este es un tema para otra publicación, la idea aquí es contarte un poquito de cómo VSCode con sus features hoy me ayudan a ser productivo, además dejo una lista de los plugins e integraciones que tiene (créeme, es posible codificar en Java).

¿Por dónde empezar?

Para descargar el editor basta acceder al sitio web en el área de descargas, el soporte de hoy es muy bueno.

Mucha gente piensa que VsCode es solo para Desarrolladores Web, pero esto es una falacia, por supuesto, cada lenguaje tiene una herramienta elegida por la comunidad, pero VSCode encaja bien en varios casos como iré mencionando más adelante.

Cómo comenzar y teclas de acceso directo que te harán volver a esta publicación en el futuro

• ¿Cómo buscar archivos? Ctrl + P o Command + P, es súper útil para proyectos grandes o con muchos archivos, cuando trabajaba con Angular fue lo que me salvó.

• ¿Cómo ejecutar comandos? Ctrl + Shift + P o Command + Shift + P, lo uso mucho para ejecutar el comando para aplicar lint al archivo en el que estoy trabajando y para hacer una force refresh cuando siento que algo en VsCode está fallando.

• ¿Cómo seleccionar varias líneas?

• Con el mouse: Alt + Click u option + Click

• Con las flechas hacia arriba y hacia abajo: Alt + Ctrl + Click u option + Command + Click

• ¿Cómo hacer solo find para la próxima ocurrencia? Ctrl + D o Command + D, es sin duda uno de los comandos que más utilizo a diario, ya que facilita cambios de cosas repetidas en la página.

• ¿Cómo hacer refactorizaciones en el código? F2 es el comando que más he usado para cambiar nombres de variables y funciones, lo mejor es que VSCode es muy inteligente para lidiar con alcances e imports en otros archivos (en la mayoría de los casos).

• ¿Cómo utilizar el terminal integrado? Hoy en día es súper común que necesitemos del terminal para tareas como ejecutar pruebas, algunas tareas de build y VSCode tienen un terminal integrado que puede ser muy útil para evitar muchos cambios de pestañas e incrementar la productividad. Aquí te dejo un enlace a la documentación, porque hay un tutorial genial sobre cómo cambiar de terminal.

Si deseas otros datos, te recomiendo encarecidamente que acceda la Documentación de VsCode

¿La integración con Git es realmente buena?

Confieso que durante mucho tiempo tuve el sueño de ser ninja en Git, quería saber todos los comandos de memoria; y ser el mayor hackerman a la hora de solucionar conflictos y todo; sin embargo, el tiempo pasa y hoy en día para ser más productivo, luego de consolidar mi base, estoy utilizando los recursos proporcionados por VsCode para facilitar procesos que ya hacía por estándar:

Review pré commit

Hoy en día creo que es mucho más fácil revisar todos los archivos que moví antes de hacer un commit dada la coloración que hace VSCode sobre lo que se eliminó y lo que se agregó, ten cuidado con este recurso porque puede hacerlo mucho más difícil el cambiar de herramienta en el futuro (y así fue como no pude adaptarme a Web Storm).

Imagen directa de la documentación de VSCode

Resolución de conflictos más clara

Quien nunca ha resuelto el conflicto de merge incorrecto debería lanzar la primera piedra. Me he perdido mucho con esto y hoy usando VSCode me siento mucho más seguro, ¡nuevamente su interfaz para interactuar con los procesos de Git brilla! Echa un vistazo a esta imagen y ya te dejo la invitación para probar con algún conflicto con el que quizás estés lidiando ahora (o más adelante).

Imagen directa de la documentación de VSCode

Apoyos

• Flutter: Este es mi bebé :)
• JavaScript / TypeScript: Este es sin duda el mejor apoyo, creo que es mejor que VsCode para trabajar hoy con JS, pero solo si usas algo como WebStorm.
• Java
• Go
• Python
• Clojure: Para clojure sigo prefiriendo IntelliJ Community.
• Extras:
  • Debugger: Si trabajas con Back End y echas de menos un debug interesante, VsCode tiene un soporte muy bueno para trabajar con Node, Java y varias otras herramientas, basta buscar cómo configurar

Plugins geniales

En general evito los plugins, en la época del sublime era muy adicto y terminé sufriendo cuando formateé la computadora y perdí todo... Una de las ventajas de VSCode para mí, es que tiene bastante de forma nativa y prácticamente no siento la necesidad de agregar cosas adicionales. Lo que uso y que podría tener sentido para ti son las siguientes extensiones:

• Quit Control: Esta extensión es OBLIGATORIA, en caso de que no quieras frustrarte presionando Command + Q o su equivalente en Windows y perder aquello en lo que estabas trabajando.
• Git Lens: Este complemento es básicamente un Git Blame integrado con tu código, puedes saber quién agregó un código determinado y cuándo, me ayuda mucho en caso de duda para hablar con la persona o alguien que trabajó en conjunto.
• Gitignore: Este agrega un buen soporte para trabajar con Gitignore dentro de la herramienta, en general terminas usándolo en pocos momentos en el proyecto, pero como dije que dejaría todo lo que uso, entonces que siga en la lista.
• Quokka JS: Este lo uso para tener un feedback visual de los datos entre las variables que estoy trabajando cuando estoy solucionando problemas de maratón de programación.
• EsLint: Linter es vida y poder ejecutarlo usando Command + Shift + P es maravilloso, se me hace más cómodo que ordenar todo manualmente o ejecutar el Eslint a través de terminal.

Conclusión

Hay mucha pelea entre lo que es una IDE y lo que es un editor de texto, pero en la práctica lo que realmente hace la diferencia es lo productivo que eres con la herramienta.

Si te interesa este tema, aquí en Aluratenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.

Puedes leer también:

• HTTP: Diferencias entre GET y POST
• Vinculando elementos con HTML5
• Por una web más rápida: 26 técnicas de optimización de Sitios Web