Snippets en Sublime Text

Durante el desarrollo de un proyecto, es frecuente que se repitan algunos fragmentos de código. Con los Snippets en Sublime Text podemos guardar un trozo de código para reutilizarlo más tarde de esta manera somos más productivos.

Snippets

Estructura básica de un Snippet

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

content
En la etiqueta content es donde vamos a poner el trozo de código que deseamos reutilizar <![CDATA[AQUÍ VA EL CÓDIGO]]>.

tabTrigger
Es la palabra clave, frase o secuencia de caracteres que tienes que teclear para insertar el código que esta almacenado en el Snippet.

Creando un Snippet

Para explicarte mejor voy a crear un Snippet para la estructura básica de un documento HTML5 con Bootstrap.

En Sublime Text en la barra superior Tools > New Snippet...

De inmediato se creará un documento con la estructura básica de manera que tienes que borrar el código que viene por defecto, mi Snippet quedo de la siguiente manera.

<snippet>
    <content><![CDATA[
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>$1</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    $2
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
]]></content>
    <tabTrigger>bootstrap</tabTrigger>
</snippet>

¡Recuerda guardar tu Snippet!

Si prestaste atención al código anterior habrás notado que coloque dos variables $1 y $2 que se les denomina campos y nos ayudan a modificar de manera más agil nuestro código.

Cuando ejecute mi Snippet el cursor aparecerá donde esta la variable $1 de manera que si quiero avanzar a los otros campos, tengo que presionar la tecla tab para avanzar o Ctrl+tab para retroceder.

Ejecutando mi Snippet

Únicamente es necesario crear un nuevo archivo escribir el nombre del Snippet y pulsar la tecla tab para que se inserte el código que esta almacenado en el Snippet.

En mi caso el cursor aparecerá entre las etiquetas <title></title>, colocaré el titulo de mi documento HTML y pulsaré nuevamente tab para que el cursor aparezca entre las etiquetas <body></body>.

Eso es todo ¡Experimenta creando tus propios Snippets!

Eduardo Ramírez

Escribo en @RetznerNet sobre los temas que me interesan para transmitir lo que pienso. Siempre me tomó el tiempo de leer sus comentarios para saber lo que ustedes opinan.