En este articulo comentaré algunas extensiones de VSCode que te ayudarán a ser mas productivo/a. Como sabes, trabajo con Javascript / Typescript y mayormente react asi que estarán enfocadas a eso. ¡Empecemos!
Snippets
Utilizo esta extensión para crear componentes o hooks de react:
Tiene soporte para Typescript también, lo que es genial.Para usar el snippet pero con Typescript, solo tienes que añadir ts delante (en vez de rfac, tsrfac por ejemplo):
Si quieres una personalización avanzada de tus componentes y crear directorios customizados como por ejemplo añadir ficheros de tests o storybook por defecto, puedes usar Hygen. De esta herramienta hablaré en otro post.
Error linting
Utilizo Error Lens para detectar errores en mi código.:
Si te preocupa cuanto ocupa una librería al importarla (y si no te preocupa, debería 😉), import cost te informará de el coste de importarla. En el caso de React, tiene un coste de 3.3K.
Esta es una de mis favoritas. Te genera interfaces de Typescript utilizando un JSON como origen, lo que es mágico. SI necesitas generar un modelo a partir de un JSON, es perfecta. Yo normalmente lo utilizo para generar modelos a partir de respuestas de APIs de terceros:
Si quieres generar el tipado para este JSON, solo presiona comando + shift + P y escribe:
Open quicktype for JSON
Un fichero TS aparecera con todo tipado. Maravilloso ¿verdad? 🤩
Jest Runner
Si trabajas con JEst y creas test para tu codigo ( si no lo haces, es un buen momento para empezar a hacerlo), esta extension te ayudara a ejecutar ficheros de test de forma individual.
Haciendo click derecho en el fichero y seleccionando Git History puedes ver toda la información además de comparar los cambios con tu workspace actual.
Quokka
Esta extensión te ayudará a crear archivos Javascript / Typescript que se ejecutan en modo watch, por lo que puedes fácilmente comprobar el resultado del código. Es muy útil para probar rapidamente funciones.
Hay muchas mas extensiones interesantes, muchas de ellas. Algunas famosas que seguro conoceras son ESLint, Prettier y Debugger for Chrome. Si conoces alguna otra interesante, te agradecería que lo compartieras en un comentario.
date: "2020-05-08" img: "https://res.cloudinary.com/ivanbtrujillo/image/upload/c_scale,h_341,q_60/v1590083273/photo-1556075798-4825dfaaf498_gktxez" summary: En este post veremos una serie de extensiones de VSCode que nos harán mas productivos a la hora de trabajar.
En este articulo comentaré algunas extensiones de VSCode que te ayudarán a ser mas productivo/a. Como sabes, trabajo con Javascript / Typescript y mayormente react asi que estarán enfocadas a eso. ¡Empecemos!
Snippets
Utilizo esta extensión para crear componentes o hooks de react:
es7 React/Redux/GraphQL/React-Native snippets
Tiene soporte para Typescript también, lo que es genial.Para usar el snippet pero con Typescript, solo tienes que añadir ts delante (en vez de rfac, tsrfac por ejemplo):
Si quieres una personalización avanzada de tus componentes y crear directorios customizados como por ejemplo añadir ficheros de tests o storybook por defecto, puedes usar Hygen. De esta herramienta hablaré en otro post.
Error linting
Utilizo Error Lens para detectar errores en mi código.:
Error Lens
Import cost
Si te preocupa cuanto ocupa una librería al importarla (y si no te preocupa, debería 😉), import cost te informará de el coste de importarla. En el caso de React, tiene un coste de 3.3K.
Import Cost https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
Npm intellisense
Te ayudará a autocompletar el import de modulos que hayas instalado a traves de npm:
NPM Intellisense
Paste JSON as Code
Esta es una de mis favoritas. Te genera interfaces de Typescript utilizando un JSON como origen, lo que es mágico. SI necesitas generar un modelo a partir de un JSON, es perfecta. Yo normalmente lo utilizo para generar modelos a partir de respuestas de APIs de terceros:
Paste JSON as Code
Imagina que tenemos este JSON:
Si quieres generar el tipado para este JSON, solo presiona comando + shift + P y escribe:
Un fichero TS aparecera con todo tipado. Maravilloso ¿verdad? 🤩
Jest Runner
Si trabajas con JEst y creas test para tu codigo ( si no lo haces, es un buen momento para empezar a hacerlo), esta extension te ayudara a ejecutar ficheros de test de forma individual.
Jest Runner
Clickando con el boton derecho dentro del fichero de test y seleccionando Run Jest File, ejecutaras los test de ese fichero:
(En este caso el test ha fallado intencionadamente 😜)
Git Blame
Cuando trabajas en equipo y quieres saber quien cambió el código, utilizando esta extension puedes verlo fácilmente.
Git Blame
Solo haz click en la linea que quieres mirar, y Git Blame te dirá quién lo cambió y cuando:
Git History
Esta extensión te dará información sobre el historial de cambios en un fichero.
Git History
Haciendo click derecho en el fichero y seleccionando Git History puedes ver toda la información además de comparar los cambios con tu workspace actual.
Quokka
Esta extensión te ayudará a crear archivos Javascript / Typescript que se ejecutan en modo watch, por lo que puedes fácilmente comprobar el resultado del código. Es muy útil para probar rapidamente funciones.
Quokka
Para usarlo, pulsa cmd + shift + p y escribe Quokka. Verás las opciones disponibles:
Ahora si dentro de un fichero generado por Quokka utilizas un console.log para ver el resultado, lo veras directamente en el fichero.
Theme
Si te preguntas que tema utilizo en VSCode, es el siguiente:
Atom One Dark Theme
vscode-icons
Hay muchas mas extensiones interesantes, muchas de ellas. Algunas famosas que seguro conoceras son ESLint, Prettier y Debugger for Chrome. Si conoces alguna otra interesante, te agradecería que lo compartieras en un comentario.
¡Nos vemos en el próximo post!