1

Tips para el uso del Editor Visual Studio code

Visual Studio Code cuenta con una amplia oferta de plugins para agregar a tu editor y hacer que tu trabajo sea más sencillo en algunos aspectos.

Para instalar plugins nos dirigimos a la barra a la izquierda de tu editor, es la columna que esta debajo del logo VS Code es el quinto Icono (me recuerda a un cubo rubik 😄)para buscar e instalar extensiones, o también lo podes desplegar usando las teclas → ctrl + shift + x.

Captura de pantalla de 2020-10-27 09-26-22.png
<h3>Bracket Pair Colorizer 💚</h3>
  • ¿No te ha pasado que no encuentras donde termina el cierre de llaves de una función?
  • Por ejemplo, y más cuando estamos con if anidados o bucles for es muy fácil perderse entre tanto código. Este plug-in te va a salvar la vida!

Captura de pantalla de 2020-10-27 09-24-33.png
Con un color diferente te muestra cada llave y paréntesis de la función que este trabajando.

<h3>Code Runner 🕺🏽</h3>
  • Otra extensión muy buena para poder correr tu código en el mismo editor es Code Runner .run te ayuda a verificar si funciona tu programa sin tener que ir al browser en el caso de JavaScript, pero también funciona con otros lenguajes.
Captura de pantalla de 2020-10-27 09-27-37.png
<h3>Quokka 🙃</h3>
  • Este plugin te ayudará a saber en tiempo real si tu código está optimo o si puedes mejorarlo, con cuadrados al costado del código te irá indicando verde si esta bien, rojo si tienes algún error, amarillo en caso que este bien pero se puede hacer alguna mejora.
Captura de pantalla de 2020-10-27 10-56-12.png
<h3>Live Server & Live Server Preview 🤓</h3>
  • Como desarrollador front-end este plugin te permite evitar tener que estar recargando la página cada vez que guardes tus cambios, permitiéndote ver en tiempo real todos tus avances 😉
Captura de pantalla de 2020-10-27 10-55-13.png
Captura de pantalla de 2020-10-27 10-59-07.png
<h3>Git Lens 👩🏾‍💻</h3>
  • GitLens te ayuda a comprender mejor el código. Podrás ver quién, por qué y cuándo se cambió una línea o un bloque de código. También retroceder a través de la historia para obtener más información sobre cómo y por qué evolucionó el código. Explorar la historia y la evolución de un código base.
  • Además de ser potente y poseer varias funciones, también es súper personalizable para satisfacer tus necesidades. Si consideras que la lente del código es intrusiva o la anotación del blame de la línea actual te distrae, podes desactivar o cambie su comportamiento a través del editor interactivo de configuración de GitLens. Para personalizaciones avanzadas, echa un vistazo a la documentación de GitLens y edita tu configuración de usuario.
Captura de pantalla de 2020-10-27 10-54-48.png

Hasta acá llegamos con la lista de plugins que sin dudas van hacer más fluido tu tarea de programador o mientras estudias.

<h3>Me gustaría agregar algunos tips de personalización del Visual Studio Code</h3>
  • Mientras trabajas, olvidate de guardas los cambios activando el Auto Save. ¿Cómo?
  • En file, después de Save All y antes de preferences, haces click en Auto Save. Así de simple y todos tus cambios se irán guardan automáticamente. 😍
Captura de pantalla de 2020-10-27 11-00-44.png
  • Comando como Alt + z para ver todo tu código en una sola página, o desde la sección de view → Togle Word Wrap
Captura de pantalla de 2020-10-27 13-35-14.png

Sin dudas, existen muchas cosas más que podría agregar pero este artículo serían demasiado largo. Ahora te toca a ti escribir en la sección de comentarios añadir algunos plugins que utilizas en tu día a día como programador y consideras que serían muy útiles para que tus compañeros también puedan implementar!

Entre todos hacemos está comunidad más rica de información! Vamos hacer nuestro entorno de trabajo más amigable.


Escribe tu comentario
+ 2
1
2307Puntos

Genial, muchas gracias por la info.