Crear Snippets de Código en Visual Studio

Hoy toca hablar de una de las utilidades que nos aporta Visual Studio. Se trata de los Code Snippets, que son fragmentos de código previamente desarrollados que podemos añadir rápidamente a nuestro desarrollo.

Cómo insertar el snippet.

Hay varias formas de hacerlo. En la primera de ellas se utilizan las teclas rápidas, que van variando en función de la versión de Visual Studio y/o el idioma de la instalación. Lo habitual es utilizar Ctrl+K y una segunda combinación según lo que se quiera hacer. A continuación, enumero algunas posibles combinaciones:

Insertar fragmento de código en el sitio CTRL + K , CTRL + X
Delimitar código seleccionado CTRL + K , CTRL + S
Abrir el Code Snippet Manager CTRL + K , CTRL + B

 

La segunda forma de hacerlo es empleando la palabra clave asignada al snippet y después pulsando la tecla tabulador (una o dos veces, según el tipo de proyecto). Por ejemplo, si en C# escribes foreach y das al tabulador, te creará la siguiente estructura automáticamente: 8 Y por último, si no te manejas con las teclas rápidas ni conoces la palabra clave del snippet, puedes hacerlo con el botón derecho del ratón, accediendo a los menús emergentes. 1

 

Seleccionamos la opción Insertar fragmento de código y luego elegimos el repositorio de snippets que queramos. Cada lenguaje tiene su propio juego de snippets preinstalados, a los que sumamos los nuestros personalizados, que aparecerán por defecto en la opción My Code Snippets. 2 En mi caso, como ya hice cambios en la configuración, me aparece con el nombre mis snippets.3Tengo en este caso, dos snippets de pruebas. Fijémonos en que, al pasar por encima, aparece un tooltip describiendo el snippet, el cual podremos configurar más adelante. Si selecciono el primer snnippet, automáticamente me generará el siguiente código. 4   Si escribimos en las partes sombreadas en color naranja, se reemplazarán en todo el fragmento de código. Por ejemplo, si modifico el tipo de datos int, por bool, y el nombre de la propiedad nuevaPropiedad por compraRealizada, automáticamente se reemplaza todo quedando así: 5 Este es un ejemplo muy sencillo, pero podemos llegar a ahorrarnos mucho tiempo de reescribir código. Hemos usado la primera opción, que sirve solamente para insertar un fragmento de código en el sitio, pero tenemos la otra opción, que aparece en el menú emergente y que también indiqué en la tabla de resúmen de teclas rápidas, que sería la opción: Delimitar con De este modo, conseguimos poner código delante y detrás de otro código que ya tenemos. Lo mejor para entenderlo es un ejemplo real. Imaginemos que tenemos un método para conectarnos a la base de datos llamado conectarBBDD() y queremos incluirlo dentro de un bloque try. Bastaría con escribir conectarBBDD() , seleccionarlo y, usando el menú contextual Delimitar con, o en la versión inglesa SurroundWith, elegir la opción tryf. 6 Y el resultado sería el siguiente: 7 Como se ve, el texto seleccionado conectarBBDD() ha quedado envuelto por el bloque try y el finally.

Cómo crear nuestros propios Snippets

Vamos a lo interesante. Un snippet de Visual Studio no es más que un archivo XML. Cada snippet va en un fichero y estos se guardan en una carpeta determinada. Los snippets propios por defecto están en la ruta:

Mis documentos\Visual Studio 2012\Code Snippets\Visual C#\My Code Snippets

Estudiando la carpeta Code Snippets encontraremos subcarpetas de snippets para cada lenguaje instalado. Vamos a ver la estructura básica de uno de estos ficheros XML.

<!--?xml version="1.0"?--></pre>
<header>Crear propiedad get,set Daniel Catalá Crea una propiedad, con sus respectivos métodos get y set. getset Expansion</header>
<pre>		

					tipo
					Tipo de datos de la propiedad

					int

					propiedad
					Nombre de la propiedad
					nuevaPropiedad

			<code>
				<![CDATA[

					public $tipo$ $propiedad$
					{
					 get { return _$propiedad$; }
					 set{_$propiedad$=value;}
					}
					private $tipo$ _$propiedad$;
					$end$

				]]>
			</code>

Lo más fácil de ver, son los atributos Title, Description y Shortcut, que corresponden al Título, la Descripción y la palabra clave del acceso directo. Retomo una imagen anterior para mostrar cómo se muestran el título, la descripción y el acceso directo.   3 Recordando el Acceso directo getset, podemos ahorrarnos tener que navegar por menús. Simplemente lo escribimos y damos al tabulador. Fijemonos ahora en la parte <Declarations>.


        tipo
        Tipo de datos de la propiedad
        int

        propiedad
        Nombre de la propiedad
        nuevaPropiedad

Con cada nodo <Literal>  creamos una variable de sustitución: indicamos un nombre para identificarla llamado<ID>, un valor por defecto para mostrar<Default> y el mensaje que describe la variable <Tooltip>. Retomando el resultado de nuestro snippet, vemos que las dos variables que hemos creado con <Literal> se sombrean en amarillo. Por defecto, nos muestran su valor <Default> y, si ponemos el cursor encima de cada una de ellas, aparece un emergente con el contenido de <Tooltip> 4Pero hay algo que no hemos usado aún, y que no se ve, en el resultado en pantalla. ¿Para qué sirve el atributo <ID>? Bien, esto es el nombre de la variable que usaremos para componer la plantilla. Observemos la parte final del documento XML.

<code>
    <![CDATA[
        public $tipo$ $propiedad$
        {
            get { return _$propiedad$; }
            set{_$propiedad$=value;}
        }
        private $tipo$ _$propiedad$;
        $end$
    ]]>
</code>

Aquí con Language=”csharp” indicamos el lenguaje de programación en el que debe aparecer el snippet. Lo principal es componer la plantilla. Todo lo que esté dentro de <![CDATA[   …  ]]> formará parte de ella. Y los elementos claves, se marcan con el símbolo dólar $ delante y detrás de cada uno. Podemos así usar las variables que hemos creado antes llamándolos por su <ID>. Aparte de los <ID> que hemos definido, $tipo$ y $propiedad$, vemos que hay otra palabra clave, $end$, que sirve para indicar en qué lugar queremos que se sitúe el cursor una vez se haya insertado el snippet. En el caso anterior, el cursor se pondría al final del código, aunque lo más útil sería que se sitúe encima del primer parámetro que tenemos que utilizar, que sería el del $tipo$ en la primera línea, con lo cual pasaríamos desde este código:

 public $tipo$ $propiedad$

A este otro:

 public $end$$tipo$ $propiedad$

De esta forma ya podemos empezar a usar el snippet directamente sin tener que resituarnos en el tipo de dato. Hay otra palabra clave, que no conocemos aún y que no se ha usado en este ejemplo, que es la palabra $selected$. Al principio recordábamos que, aparte de insertar código, también podemos delimitarlo, como vimos con el ejemplo del try, que rodeaba el texto seleccionado conectarBBDD(); 7   Así comprobamos que la palabra clave $selected$ es la que contiene todo el texto seleccionado, al usar la opción Delimitar con. Por tanto el código del CDATA para crear este snippet sería:

<![CDATA[
    try
    {
        $selected$
    }
    finally
    {
    }
]]>

Un detalle importante, fijémonos en las cabeceras del fichero XML. Observemos que hay dos atributos <SnippetType>


    Expansion
    SurroundsWith

El tipo Expansion debe estar siempre porque es el que permite que aparezca el snippet con la opción Insertar fragmento de código. Por el contrario, el segundo, SurroundsWith, solamente deberemos ponerlo cuando nuestro snippet sea del tipo Delimitar Con, como en el ejemplo del try y requiera el uso de la palabra $selected$. Si no se indica SurroundsWith, ni siquiera aparecerá en los menus desplegables.

Administrador de fragmentos de código

Recomiendo echar un vistazo el Snippet Code Manager que tenéis en el menú Herramientas, o con CTRL + K, CTRL + B, donde podéis organizar mejor las rutas y contenidos que queréis usar para añadir vuestros snippets. Podéis agregar carpetas completas con vuestros XMLs y no será necesario compilar nada. Simplemente, editando los ficheros XML, con VS o cualquier editor, ya estarán los cambios disponibles en el editor VS. 9 La ruta My Code Snippets es la indicada en:

Mis documentos\Visual Studio 2012\Code Snippets\Visual C#\My Code Snippets

La que aparece en la imagen, como missnippets, es una prueba de Importar Snippets desde una carpeta diferente de mi disco duro.

Snippets en equipo

Finalmente, aunque no voy a entrar en ello, hay formas de crear instaladores VSI para compartir Snippets en equipos de trabajo. Dejo un enlace para quien esté interesado. http://msdn.microsoft.com/es-es/library/ms242311.aspx

Deja un comentario