Javier Artero

Crear un Snippet para Sublime Text 2

HTML y CSS

En este ejemplo vamos a crear un snippet para sublime text 2 que contenga la estructura de un documento formalizado en HTML5, con 2 puntos de tabulación.

Sublime Text 2

Crear un nuevo snippet

Una vez abierto Sublime Text en el menú superior hacemos click en Tool>New snippet

Modificar el contenido del snippet

Como podemos ver en la imagen anterior el contenido de nuestro snippet se encuentra entre las etiquetas content, este ha de empezar con:

<content><![CDATA[

Y finalizar con:

]]></content>

Lo que se encuentre entre esas etiquetas será incluido al aplicar nuestro snippet.

Borramos todo el documento que nos introduce por defecto y lo substituimos por el siguiente:

<snippet>
	<content><![CDATA[
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>${1:Título de la web}</title>
    </head>
    <body>
    	${2:contenido}
    </body>
</html>
]]></content>
	<tabTrigger>html5simple</tabTrigger>
</snippet>

 

Guardamos el documento con la siguiente extensión .sublime-snippet dentro de la carpeta
NombredeUsuario/Librería/Application Support/Sublime Text 2/Packages/User

Como podemos ver en el código he modificado el content con una estructura básica de HTML5, he quitado los comentarios de tabTrigger modificando el texto entre esas etiquetas por html5simple.

Dentro del contenido hemos introducido 2 puntos de tabulación uno que nos llevará directamente al título y otro que nos llevará al interior de la etiqueta body

¿Como utilizar mi snippet?

El tabTrigger es el comando que lanzara nuestro snippet, en nuestro caso lo hemos marcado como html5simple.

Abrimos un nuevo documento escribimos html5simple y le damos a la tecla de tabulación, como podemos ver genera automáticamente el código que le hemos introducido dentro de content, si volvemos a darle a la tecla tabulación este nos llevará directamente al interior del título con el contenido de este seleccionado.

Podemos crear tantos snippets como queramos para diferentes usos como introducir scripts, introducir fuentes de google font, etc…

También puedes  crear un snippet de HTML5 con una estructura mas interesante como la de boilerplate.

Por Javier Artero

,