Twig Sugar para Espresso 2

Si desarrollas con un mac y no lo haces con Espresso, debes probarlo. Si no desarrollas con un mac: hazlo :)

Actualmente Espresso es uno de los mejores IDE que puedes encontrar para el completo desarrollo de una web. Aunque en esto siempre hay opiniones y opiniones. Podría enumerar todas sus características y seguro que me contestais algo así como “bah! pero si eso ya lo hace fulanoid 34.2!”. Pero en su versión 2.0, macRabbit (la empresa desarrolladora) ha decidido incrustarle una de las más prácticas herramientas del mundo: CSSEdit. Por lo tanto, ahora Espresso 2.0 no es solo un completo y ligero editor de código con mil posibilidades, sino que además es el mejor editor de CSS del mercado incluyendo todas las plataformas.

Espresso tiene la posibilidad añadirle plugins, a los que llama Sugars. La verdad es que no he visto muchos Sugars disponibles, pero puedes encontrar algunas joyitas hechas por terceros buscando un poco. Y no son muy difíciles de crear o modificar, son todo XML, así que tienes la opción de cambiarlos a tu gusto.

Eso es lo que he hecho. Encontré un solo Sugar que me ayudara con los documentos Twig. No me terminaba de gustar y también fallaban algunas cosas, así que lo he tuneado cambiando un poco la syntax highlighting y añadiendo algunos snippets.

Os comento un poco los snippets que he hecho por si quereis modificarlos.


<snippet id="com.rleal.espresso" category="tools.Snippets">
    <title>Do something</title>
    <text>{% ${1:do} $2 %}
$3
{% end${1} %}
$0
    </text>
    <syntax-context>twig, twig *</syntax-context>
    <text-trigger>%%</text-trigger>
</snippet>

Este snippet es el que más me gusta. Si escribes %% y pulsas tab, te crea la estructura completa de {% %}
que se usa en Twig para indicar que haga algo. Cuando digo completa quiero decir que no solo te abre y cierra las llaves. También te crea el endtag. Además si pulsas repetidas veces el tabulador vas pasando de un campo a otro para ir escribiendo por la estructura. Y es perfecto porque hace mirror y te crea el endtag en función de como lo has abierto. Es decir, que si despues de lanzar el snippet escribes block, te creará automáticamente el {% endblock %}


<snippet id="com.rleal.espresso" category="hidden">
    <title>Comment</title>
    <text>{# $1 #}</text>
    <when-disabled>hide</when-disabled>
    <syntax-context>twig, twig *</syntax-context>
    <text-trigger>##</text-trigger>
</snippet>

<snippet id="com.rleal.espresso" category="tools.Snippets">
    <title>Comment</title>
    <text>{# $EDITOR_SELECTION #}</text>
    <syntax-context>twig, twig *</syntax-context>
    <key-equivalent>control escape</key-equivalent>
</snippet>

De estos dos solo se mostrará uno en la ventana de snippets. Hacen lo mismo: crear un bloque de comentarios. Pero mientras que el primero se activa con ## + tab, el segundo lo hace pulsando la combinación de teclas control + esc, y si lo haces teniendo un texto seleccionado, te lo pondrá dentro del bloque comentado.

Estos son los casos que más prácticos me parecen, pero he creado unos pocos más.


css + tab => <link href="$1" rel="stylesheet" type="text/css" />$0
ext + tab => {% extends "$1" %}$0
img + tab => <img src="$1" alt="$2" />$0
path + tab => {{ path('$1') }}$0

Puedes descargar el Sugar desde aquí

Links:
Twig Sugar original
Documentación oficial sobre snippets
Página oficial de Espresso