VS Code es uno de los editores de código más populares por el hecho de ser altamente personalizable y contar con una comunidad muy activa, pero lo genial de este increíble editor son el montón de extensiones que puedes instalar dependiendo de lo que estés desarrollando.
Si quieres elevar tus habilidades como desarrollador Javascript, te dejo una lista de extensiones para VS Code que te ayudarán a programar mucho más rápido, o simplemente te evitará dolores de cabeza 🤯 por errores al momento de escribir tu código.
Si alguna vez te ha pasado que empiezas a hacer funciones o ifs anidados, y no sabes cuando terminan, posiblemente Bracket Pair Colorizer te ayude a solucionar ese problema.
Como su nombre lo dice, esta extensión te ayuda a colorear de un color diferente cada par de llaves o paréntesis que inicies, con esto podrás identificar más rápido donde empieza y termina cada uno. Además si seleccionas un paréntesis en específico, marca con una línea de su mismo color donde termina ese scope.
<h4>Sin bracket pair colorizer</h4>
Esta extensión es de las más divertidas que me he encontrado, con ella nunca te cansarás de hacer commits. Te permite crear un mensaje personalizado con algún emoji de manera sencilla para que se vea en tus repositorios de github, incluso te da una recomendación de en que puedes usar ese emoji.
Personalmente los uso para saber cuando borré unas líneas de código, cambié los estilos de un componente o modifiqué la documentación de mi aplicación.
Así de fabulosos se verán tus commits en tu repositorio de Github 💅
Con esta extensión escribirás código de javasript en tiempo record, si estás familiarizado con emmet entenderás de manera rápida como funciona, sólo necesitas escribir unos cuantos caracteres, dar enter o tab y te escribirá automáticamente una estructura común de Javascript.
Por ejemplo, si escribes clg y das enter, te escribirá un console.log(object) de manera rápida y sencilla. ⚡
Esta es de las más sencillas de todas, lo único que hace es cambiar el icono de los archivos y folders de tu proyecto, aunque es muy simple, ayuda muchísimo al momento de ver la estructura general de archivos de tu proyecto. 🗃
Con tan solo hacer ctrl + shif + 1 podrás requerir módulos de Javascript super rápido, esto sirve tanto para los módulos de Node que tienes instalados como para los archivos que creas de manera local en tu proyecto.
Esta extensión creo que es la que me ha ahorrado más tiempo en mis proyectos de React, te permite crear estructuras generales de React como componentes de clase o componentes funcionales con un simple snippet. Tiene un MONTÓN de atajos, te invito a que los uses todos 💪.
Camel Case es de las convenciones más usadas en Javascript para dar formato a nuestro código; si quieres hacerlo de manera rápida, solo selecciona el texto que quieras transformar a y elige la funcionalidad de Camel Case en la barra de comando de VS Code, esta la puedes activar con ctrl + shift + P.
Por último si lo que quieres es hacer capturas muy bonitas de algún fragmento de código, ya sea para tu documentación o para un articulo que estés escribiendo , PolaCode es lo mejor.
Solo necesitas buscar Polacode en la barra de comando de VS Code, seleccionar el código al que le quieras tomar una “foto” y automáticamente se te guardara esa imagen en tu computadora.
Menú para tomar la captura 📷
Resultado de imagen 📸
Estos son algunos de las extensiones que más me han gustado y que más uso en Visual Studio Code, si conoces alguna que sea muy útil y no se encuentre en esta lista me encantaría que la pusieras en los comentarios, 😄
¡Happy Hacking! ⚡
Hola, no se si algun dia veas este mensaje, decirte que estubo genial utilizo actualmente varias de estas extenciones, solo me queda la incognita de la fuente de texto que usas, me la podrias compartir?
Hola, pregunta, hay una extensión de visual que hace que las funciones y variables en JS se vean de colores diferentes, con el fin de no volvernos locos a la hora de entender el Código. No estaría recordando el nombre y la borré por error 😌😌😌😌… Alguien q me ayude por fa
No se si sea “Material Theme Kit” o “Markdown Theme Kit”, pero esos uso yo para diferenciar las variables y funciones
Excelente POST, me robare algunas extensiones 😂😂
Estimados, quiero ayuda sobre una en particular, estoy migrando a ubuntu 18.04.3 LTS (fondo de escritorio verde)
esta maquina virtual me esta dando problemas por que no me dehja instalar muchas cosas y es diferente a la del escritorio naranja rojo, para instalar VScode escribi un poco de codigos en la terminal que vi en internet, y no abre solo abre con el comando
sudo code . --user-data-dir=’.’
si no me salen errores : cannot create user data directory… permisson denied.
por favor ayuda!!