El mono de El Rey León sosteniendo una caja con extensiones de VSCode saliendo de ella.

Cómo crear tus propios snippets de VSCode

Escrito - 10 de Jul, 2023 · Publicado - 04 de Oct, 2023 · 4 min - Pietro Bondioli

Los snippets de Visual Studio Code (VSCode) son pequeñas porciones de código que pueden reutilizarse en tus proyectos, acelerando el flujo de trabajo y aumentando la productividad. Este artículo te guiará sobre cómo crear tus propios snippets, permitiéndote personalizar tu entorno de desarrollo.

Introducción a los snippets

Los snippets son una forma de ahorrar tiempo al programar, ya que permiten a los desarrolladores reutilizar partes predefinidas de código en lugar de teclearlas repetidamente. Al crear tus propios snippets, puedes adaptar VSCode para que se ajuste mejor a tu estilo/rutina de desarrollo.

Cómo agregar snippets específicos para un proyecto

Para agregar un snippet específico para un proyecto, necesitarás crear un archivo .vscode/snippets.json en la raíz de tu proyecto. Aquí te mostramos un ejemplo de cómo podría ser el archivo:

{
	"Log to console": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": ["console.log($1);"],
		"description": "Log output to console"
	}
}

En el ejemplo anterior, cada vez que escribas "log" y presiones TAB en tu código JavaScript o TypeScript, VSCode automáticamente llenará console.log(); por ti.

Cómo agregar snippets para el usuario

Para agregar snippets que estarán disponibles en todos tus proyectos, necesitarás usar la paleta de comandos de VSCode.

  1. Abre la paleta de comandos con Ctrl+Shift+P (Linux, Windows), Cmd+Shift+P (Mac) o F1.
  2. Escribe "User Snippets" y selecciona la opción.
  3. Elige el lenguaje para el que deseas agregar el snippet o crea un nuevo archivo de snippets global.
  4. Añade tu snippet al archivo .json abierto, de la misma manera que lo harías para un snippet específico del proyecto.

Propiedades de un snippet

Cada snippet contiene varias propiedades que definen su comportamiento:

  • scope: Define los idiomas en los que se puede usar el snippet.
  • prefix: Define el disparador de texto para el snippet.
  • body: Define el contenido del snippet.
  • description: Define la descripción del snippet.

Los identificadores de lenguaje (para la propiedad scope) se pueden encontrar en code.visualstudio.com/docs/languages/identifiers.

Variables útiles

Además, hay varias variables útiles que puedes usar al crear snippets, como:

  • CLIPBOARD: Accede al contenido actual del portapapeles.
  • TM_FILENAME_BASE: Devuelve el nombre del archivo actual sin la extensión.
  • TM_SELECTED_TEXT: Devuelve el texto actualmente seleccionado.
  • TM_DIRECTORY: Devuelve la ruta del directorio actual.

Además de las mencionadas, hay muchas otras variables disponibles. Puedes encontrar una lista completa en code.visualstudio.com/docs/editor/userdefinedsnippets#_variables.

Conclusión

Este artículo proporcionó una introducción básica a la creación de snippets en VSCode. Para usos más complejos, consulta la documentación oficial de VSCode en code.visualstudio.com/docs/editor/userdefinedsnippets.

"Sé tolerante con los demás y estricto contigo mismo." — Marcus Aurelius

0

Comments