SnippetFlow

Guarda, organiza, comparte e inserta tus fragmentos de código directamente desde VS Code.

SnippetFlow es una extensión para Visual Studio Code que te permite gestionar tu biblioteca personal de snippets de código sin salir del editor. Cada fragmento se almacena en la nube, por lo que puedes acceder a él desde cualquier equipo, en cualquier momento.

Características

Gestión de snippets

📁 Organización por lenguaje — snippets agrupados automáticamente
✂️ Guardar selección — selecciona código → clic derecho → guarda con título sugerido automáticamente
🏷️ Etiquetas — categoriza tus snippets con tags personalizados
↵ Inserción directa — inserta en el cursor con un clic o desde el buscador rápido
🗑️ Eliminar — botón directo en cada tarjeta sin necesidad de abrir el editor
👁️ Preview desde sidebar — clic en el sidebar muestra opciones: insertar, copiar o abrir en editor
📝 Formulario simplificado — solo Título + Lenguaje + Código por defecto; descripción, tags y toggles en "Opciones avanzadas"
📋 Duplicar — usa un snippet como base para crear uno nuevo

Búsqueda y filtros

🔍 Alt+S — buscador emergente al lado de tu código: busca, filtra y presiona Enter para insertar
🔎 Búsqueda en tiempo real por nombre, descripción, lenguaje o etiqueta
↕️ Ordenar por más reciente, más antiguo, alfabético, más usado o favoritos primero
🌐 Explorar snippets públicos de otros usuarios con filtros

Lenguajes soportados (+60)

Web, Backend, Sistemas, Bases de datos (MySQL, PostgreSQL, PL/SQL, T-SQL, MongoDB, Redis, GraphQL...), Shell, Ciencia de datos, DevOps, Markup y más.

Organización avanzada

⭐ Favoritos — marca tus snippets más usados para encontrarlos primero
📊 Estadísticas globales — métricas de toda la plataforma + estadísticas personales (botón 📊 en toolbar)
🕐 Historial de uso — últimos snippets insertados (botón 🕐 en toolbar)
🏷️ Etiquetas inteligentes — sugerencias cambian según el lenguaje elegido; tus etiquetas previas aparecen primero
☁️ Etiquetas en la nube — las etiquetas que creas se guardan y están disponibles en futuros snippets
📜 Historial de uso — los últimos snippets que insertaste
📋 Historial de versiones — cada edición guarda una versión anterior; puedes restaurar cualquiera

Colaboración

🔗 Snippets públicos — activa el switch en el editor y comparte con un enlace único
💬 Comentarios — deja comentarios en snippets públicos de otros usuarios
⬇️ Exportar — descarga todos tus snippets en JSON
⬆️ Importar — carga snippets desde un archivo JSON

Instalación

Abre VS Code
Ve a Extensions (Ctrl+Shift+X)
Busca SnippetFlow
Clic en Install

Cómo usar

Guardar un snippet con título automático

Selecciona código en el editor
Clic derecho → "Guardar Selección como Snippet"
El título se sugiere automáticamente según la función/clase detectada
Ajusta si quieres y guarda

Buscar e insertar rápidamente

Presiona Alt+S en cualquier momento
El buscador aparece al lado de tu código
Escribe para filtrar, ↑↓ para navegar, Enter para insertar
El snippet se inserta en el cursor y el buscador se cierra

Ver historial de versiones

Abre un snippet en el editor
Clic en 📋 Versiones (botón en la barra inferior)
Ve todas las versiones guardadas automáticamente con fecha
Clic en una versión para previsualizarla
Restaurar para volver a esa versión

Explorar snippets públicos

Panel SnippetFlow → pestaña 🌐 Explorar
Filtra por lenguaje o busca por nombre
⎘ Copiar — copia el código al portapapeles
↵ Insertar — inserta en el editor activo
+ Guardar — lo agrega a tu biblioteca personal
💬 Comentarios — deja un comentario o lee los de otros

Estadísticas

Panel SnippetFlow → pestaña 📊 Estadísticas

Tarjetas con totales: snippets, favoritos, públicos, usos
Barras por lenguaje
Top 5 snippets más insertados

Comandos (`Ctrl+Shift+P`)

Comando	Atajo	Acción
`SnippetFlow: Abrir Panel`	—	Abre el panel principal
`SnippetFlow: Buscar e Insertar Snippet`	`Alt+S`	Buscador rápido flotante
`SnippetFlow: Nuevo Snippet`	—	Crea un snippet nuevo
`SnippetFlow: Guardar Selección como Snippet`	—	Guarda el código seleccionado con título sugerido
`SnippetFlow: Actualizar`	—	Refresca la lista del sidebar
`SnippetFlow: Cerrar Sesión`	—	Cierra la sesión actual

Configuración

Configuración (Ctrl+,) → Buscar "snippetflow" → SnippetFlow: Api Url

Cambia la URL si tienes tu propio servidor desplegado.

Tecnologías

Capa	Tecnología
Extensión	TypeScript + VS Code API
Backend	PHP 8.2 + PDO
Base de datos	MySQL
Autenticación	JWT (JSON Web Tokens)
Hosting	Hostinger (snippetflow.fun)

Historial de versiones

Versión	Cambios
0.3.5	README actualizado con todas las funcionalidades
0.3.4	Sidebar con preview de opciones, 2 tabs principales, Historial y Stats como modales, tags inteligentes por lenguaje, etiquetas del usuario guardadas en la nube, formulario simplificado con opciones avanzadas colapsables
0.3.3	Estadísticas globales de la plataforma, etiquetas predefinidas sugeridas, +60 lenguajes organizados por categoría
0.3.2	Eliminar snippet desde tarjeta, historial de versiones, comentarios en snippets públicos
0.3.1	Título automático al guardar selección, tab de estadísticas con gráficas
0.3.0	Tab Explorar con snippets públicos, buscador `Alt+S` abre al lado del código
0.2.5	Reescritura completa del panel con event delegation (compatibilidad VS Code 1.86+)
0.2.0	Favoritos, vista previa, historial de uso, ordenar, exportar/importar, contador de líneas
0.1.0	Buscador emergente `Alt+S` con ventana flotante y arrastrable
0.0.9	Popup de búsqueda con filtros por lenguaje
0.0.7	Ícono `</>` en la barra lateral
0.0.5	Publicación inicial en el Marketplace

Autor

Andres Felipe Alvarez Arenas Curso: Calidad de Software — 30111 Institución: Corporación Unificada Nacional de Educación Superior (CUN) Docente: Ivan Andres Trujillo Gutierrez

SnippetFlow

SnippetFlow

SnippetFlow

Características

Gestión de snippets

Búsqueda y filtros

Lenguajes soportados (+60)

Organización avanzada

Colaboración

Instalación

Cómo usar

Guardar un snippet con título automático

Buscar e insertar rápidamente

Ver historial de versiones

Explorar snippets públicos

Estadísticas

Comandos (Ctrl+Shift+P)

Configuración

Tecnologías

Historial de versiones

Autor

Licencia

Comandos (`Ctrl+Shift+P`)