Crea tu propio Extension Pack para Visual Studio Code

26 Apr, 2020

Uso multipoles extensiones de VSCode para aumentar mi productividad a diario. Cuando en un proyecto importante quisimos estandarizar el desarrollo, e implementar un set basico de extensiones necesarias para el proyecto, fue cuando se nos hizo necesario crear un Extension Pack. Asi poder gestionar de manera mas adecuada el listado de extensiones necesarias.

¿Qué es un Extension Pack?

Es una extensión única que agrupa otras extensiones. Al instalar el pack, todas las extensiones incluidas se instalan juntas. Es ideal para:

• Compartir tus herramientas favoritas con compañeros
• Mantener configuraciones consistentes en equipos
• Actualizar colecciones fácilmente

Requisitos previos

1. Instalar Node.js

2. Instalar Yeoman y el generador de VSCode:

   npm install -g yo generator-code
   

Genera tu Extension Pack

1. Ejecuta el generador:

   yo code
   

2. Selecciona "New Extension Pack"
   

3. Elige si incluir tus extensiones actuales (yo seleccioné No para personalizar después)
   

Añade tus extensiones

1. Abre el proyecto generado en VSCode (code .)

2. Edita package.json y añade los IDs de extensiones al array extensionPack:

   "extensionPack": [
     "eamodio.gitlens",
     "aaron-bond.better-comments",
     "Gruntfuggly.todo-tree",
     "yzhang.markdown-all-in-one",
     "bierner.emojisense",
     "usernamehw.errorlens",
     "IBM.output-colorizer",
     "PKief.material-icon-themee"
   ]
   

   

   TIP, Estos son los IDs

   

   Los IDs aparecen al final de la URL como 'itemName=Gydunhn.vsc-essentials', el ID es: Gydunhn.vsc-essentials.

Mis extensiones favoritas:

• GitLens — Git supercharged
• Better Comments
• Todo Tree
• Markdown All in One
• :emojisense:
• Error Lens
• Output Colorizer
• Material Icon Theme

El Icono de tu Pack

1. Fijate que agregue el campo icon en el archivo package.json, con la ruta img/essentials.png, por lo que si creas una carpeta con ese nombre puedes pone un icono con ese nombre de archivo ahi, debe ser de 250px x 250px, para que al estar instalado sea identificable.
   1. Ejemplo:
      

Empaqueta tu extensión

1. Asegúrate de que publisher esté configurado en package.json

2. Ejecuta:

   vsce package
   

3. Se generará un archivo .vsix en tu proyecto
   

Nota: Puedes publicar en el Marketplace de VSCode siguiendo la documentación oficial.

Instala tu pack

Instalación manual en VSCode

1. Abre Extensiones (Ctrl+Shift+X)
2. Haz clic en el menú ⋮ → Instalar desde VSIX...
3. Selecciona tu archivo .vsix
4. Reinicia VSCode

¡Ahora tu equipo completo puede disfrutar de tus extensiones con un solo clic!

Consejos

• Actualiza el README.md para explicar el propósito del pack
• Agrega un archivo de Licencia
• Usa versionado semántico al actualizar
• Evalua si es necesario publicar en el Marketplace para compartirlo ampliamente o no.

Fuente:

Medium - VSCode: How to create your own Extension Pack

View original

#Desarrollo #Extensiones #Herramientas #Productividad #VSCode