Cómo editar fragmentos de código (snippets) en VS Code para Flutter Leave a comment

¿Trabajas con Flutter en Visual Studio Code y te encanta Awesome Flutter Snippets? 🚀
Entonces sabrás que estos fragmentos de código prediseñados te ahorran muchísimo tiempo. Pero ¿qué pasa cuando quieres modificar los snippets existentes o crear los tuyos personalizados? Aquí te muestro cómo hacerlo paso a paso.

📌 ¿Qué es Awesome Flutter Snippets?

Es una extensión de VS Code creada para desarrolladores Flutter que ofrece una colección de fragmentos (snippets) listos para usar. Desde widgets comunes como StatelessWidget, Container, hasta clases completas como Bloc, Provider, etc.

Sin embargo, puede que necesites adaptar un snippet a tu estilo de codificación o agregar uno nuevo. ¡Vamos a ello!

---

🧭 Ruta del archivo snippets.json

Para editar los snippets predeterminados, dirígete a la carpeta de instalación de la extensión:

C:\Users\TU_USUARIO\.vscode\extensions\nash.awesome-flutter-snippets-4.0.1\snippets

🔁 Reemplaza TU_USUARIO con tu nombre de usuario de Windows.

Allí encontrarás el archivo:

snippets.json

Este archivo contiene todos los fragmentos de código de la extensión. Puedes editar los existentes o agregar nuevos respetando su formato.

---

✏️ Ejemplo de edición de un snippet

Supongamos que quieres modificar el snippet de un StatelessWidget para agregar un comentario personalizado:

"Flutter StatelessWidget": { "prefix": "stl", "body": [ "// Widget creado por Washington Sinchiguano", "class ${1:MyWidget} extends StatelessWidget {", " const ${1:MyWidget}({Key? key}) : super(key: key);", " ", " @override", " Widget build(BuildContext context) {", " return Container();", " }", "}" ], "description": "Create a StatelessWidget class" }

Puedes cambiar el contenido del body, el prefix (para activarlo con otra palabra clave), o la description.

---

🆕 ¿Cómo agregar un nuevo snippet?

Agrega un nuevo bloque en el mismo archivo JSON:

"Custom ListView Builder": { "prefix": "lvb", "body": [ "ListView.builder(", " itemCount: ${1:10},", " itemBuilder: (context, index) {", " return ${2:ListTile(", " title: Text('Item \$index'),", " )};", " },", ")" ], "description": "ListView Builder personalizado" }

💡 Guarda el archivo, y reinicia VS Code para que los cambios surtan efecto.

---

✅ Conclusión

Personalizar tus snippets en VS Code te permite ahorrar tiempo, mantener un estilo de código consistente y trabajar de forma más fluida con Flutter.

Aprovecha al máximo las herramientas que ya tienes instaladas y crea tu propia colección de fragmentos personalizados.