7 extensiones de VsCode para aumentar la productividad y velocidad

Visual Studio Code o VsCode hoy en día sigue siendo el rey de los editores de texto, este es construido con typescript y es totalmente gratuito.

Una de las grandes ventajas que tenemos con este editor es que contiene muchas, pero muchas extensiones, que nosotros podemos instalar para mejorar nuestra experiencia, agilizar y hacer que nuestro trabajo como desarrolladores sea mucho más fácil.

---

Hoy hablaremos sobre extensiones para el editor VsCode, puedes leer este post ó ver y escuchar esta información en formato de video en nuestro canal de youtube, te dejamos el link por si prefieres este formato. 😃 👍

---

Tenemos, desde las que nos ayudan a mejorar lo estético del editor hasta algunas que nos ayudarán a detectar errores tempranamente en nuestro código.

Ahora, si quieres aprender a usar este editor para construir tus proyecto

Sin más comenzamos:

1.- Auto Rename Tag

Cuando te encuentras desarrollando con lenguajes que usan etiquetas HTML o XML, hay ocasiones en las que tendrás que cambiar de etiquetas o componentes, ya sea que encontraste cómo resolver mejor un problema, vas a mejorar el SEO o para tener una mejor semántica en la estructura de tu código.

Pues la extensión Auto Rename Tag nos va a permitir hacer esto de una manera más sencilla

El funcionamiento es sencillo, cuando renombres una etiqueta de apertura está automáticamente cambiará la etiqueta de cierre, así no tendrás que buscarla para renombrarla de manera manual, ahorrándote todo este tiempo. Además, que soporta también etiquetas XML y JSX, así que también podrás ahorrarte este tiempo mientras escribes aplicaciones en React.

Vamos con un ejemplo:

¿y cómo haríamos para ver los cambios que hagamos?, para eso podemos utilizar live server:

2.- Live Server

Dentro de tus primeros pasos como desarrollador frontend, tendrás que aprender HTML, CSS y JavaScript como parte de tus primeras tecnologías, y cuando desarrollamos es importante que observemos cómo es nuestra interfaz con fin de generar una gran experiencia para nuestros usuarios,

¿y cómo hacemos esto?,

Abriendo el archivo index HTML, el navegador lo interpretará y nos mostrará nuestra aplicación,

El problema es que por cada cambio tendremos que recargar la página, una y otra vez hasta terminar nuestro proyecto.

Pues Live Server nos soluciona este problema, ya que despliega un servidor de desarrollo el cual va a monitorear los cambios que hagamos con cada guardado y nos mostrará esto en el navegador en tiempo real.

Con esta extensión podemos tener visibilidad de los cambios de interfaz, pero para la lógica también tenemos a Code Runner:

3.- Code Runner

Cuando desarrollamos, probamos o practicamos cómo mejorar nuestra lógica de programación, necesitamos probar estos, afortunadamente esta extensión nos permite probar estos algoritmos dentro de nuestro editor con una ventana que nos mostrará el output ya sea de un documento entero o de una sesión de este.

Code Runner acepta una vasta cantidad de lenguajes como C, C++, Java, JavaScript, PHP, python M, Ruby, Go entre muchos otros más.

Y con un solo click podemos ver el resultado de ejecutar este algoritmo o ver si tenemos un error para poder corregirlo y hablando de errores, la siguiente es “Error Lens”

4.- Error Lens

Durante el proceso desarrollo, podemos múltiples errores como tener tipos, olvidar un paréntesis o punto y coma, cambiar el nombre de una variable y no cambiarla en todo el código, u olvidar algún componente de la sintaxis,

Pues Error Lens nos permite ver estos errores en VsCode, antes siquiera de compilarlo o ejecutarlo, estos los vas a ver mientras escribes el código, pero no solo eso, nos da una descripción del error para que podamos corregirlo sin perder mucho más tiempo.

Otra extensión útil, para manejar tener más control del estilo de código, tenemos a Ident Rainbow:

5.- Ident Rainbow

Esta extensión es una enfocada en la parte visual que tendremos en nuestro editor, nos va a permitir ver con diferentes colores, la indentación que tienen las líneas de nuestro código, además si nos faltará un espaciado en cada indentación este no lo marcará en color rojo para que lo podamos arreglar.

Estas ventajas nos permiten tener un code style mejor estructurado para que permita la fácil lectura de nuestro código y aún más importante, para lenguajes como lo son por ejemplo Python, en el que la indentación define cada uno de los bloques de código.

Siguiendo con posibles errores que podemos cometer, esta el escribir las rutas de nuestros ficheros, para eso tenemos nos puede ayudar Path Intellisense

6.- Path Intellisense

Cuando tenemos un proyecto lo suficiente robusto en su estructura de archivos, se nos puede comenzar a dificultar el encontrar un módulo a través de tantos ficheros.

Esta extensión nos facilita las importaciones de módulos o utilidades en nuestro código, Path Intellisense ayuda a que encontremos fácilmente estos archivos con el autocompletado de rutas.

Cuando comenzamos a escribir una ruta, nos mostrará sugerencias de nuestros ficheros y archivos existentes que se encuentren en la ruta que estamos escribiendo, permitiéndonos tener una vista previa y eligiendo el correspondiente, o, en su caso, regresar cuando no estamos en la ruta adecuada.

Y la última extensión que veremos el día de hoy, y va a ahorrarte dolores de cabeza cuando tenemos que escribir correctamente es Code Spell Checker:

7.- Code Spell Checker

Ya sea que nombremos variables, coloquemos texto directo en el código. Te tengo la siguiente pregunta:

¿Sabes cómo se escribe length? ¿cuál de estas opciones es la correcta?

Colocar texto en pantalla: lenght o length?…

Pues es Length.

Tener errores ortográficos es algo que no podemos permitirnos en el código, pensemos en la experiencia de usuario cuando lee el contenido de nuestras aplicaciones, en cómo un tipo puede generarnos un error o el cómo nombramos correctamente nuestras variables o funciones.

Pues esta extensión nos revisa la ortografía, nos muestra los errores que tenemos y nos ofrece poder corregir estos errores y si la combinas con error lens se vuelve una poderosa herramienta.

De manera predeterminada la vamos a encontrar en inglés, y, aunque siempre programamos en inglés, podríamos construir un proyecto para usuarios en español, para este caso, podemos instalar diferentes versiones para distintos idiomas, como español, portugués, alemán, francés, entre muchos otros.

Aunque ninguno de estas extensiones te va a salvar de no saber inglés, como por ejemplo en una página del gobierno de Chile, que indica charging en lugar de loading… you charge your phone’s battery, but a website is loaded, not charged. A menos que estés cobrando para hacer una web… en ese caso la web te estaría realizando un cargo a tu tarjeta…

---

Aprende a usar VsCode

¡Y esto ha sido todo!, hemos visto 7 extensiones que te ayudarán en tu día a día como desarrollador o desarrolladora, pero no son todas las que puedes incluir en tu configuración, si quieres una segunda parte hazlo saber ¡golpeando al del botón de me gusta de este post!

En nuestro canal de youtube tenemos un curso gratuito para aprender a usar este editor, te dejamos el enlace aquÍ.

Y ahora que tienes estas herramientas y quieres aprender a desarrollar con diferentes tecnologías te recomendamos la Academia de Hola Mundo donde podrás formarte como un excelente desarrollador o desarrolladora has click aquí donde podrás ver todos los cursos, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter e Instagram, y por último, te invitamos a escuchar nuestra música «Hola Beats» diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, estamos en Spotify y en Apple Music.

¡Hasta la próxima!, y chao mundo