Escribiendo XHTML válido en Textmate

Una cosa que me sacaba el sueño todos los días a la hora de trabajar era corregir ciertas normas de código XHTML en resultado que generaba Textmate cuando picaba código XHTML usando los bundles que trae. Eran de esas cosas que, a pesar que las hacía de forma natural, rápida (y tampoco atentaba contra mi existencia), me tenía en jaque: escribir XHTML válido de forma natural y automática con Textmate.

Textmate es un editor genial. A pesar que lo utilizo al 30% de lo que debería, tanto yo como otros desarrolladores usamos Mac principalmente por Textmate. El problema de Textmate es que, la instalación de fábrica utiliza HTML como base como resultado de lo que escribas usando los bundles, snipets y otros atajos.

Siendo esto, escribir “input” y que dé como resultado:

<input type="text" name="some_name" value="" id="some_name">

Cuando debería ser:

<input type="text" name="some_name" value="" id="some_name" />

Todas estas pequeñas reglitas me quitaban el tiempo. Escribir siempre las barras al final de los elementos me quitaban un montón de tiempo. Además, el 80% de los casos siempre me olvidaba de corregirlas y para cuando corregía el tema había perdido un minuto o dos comprobando a ojo que todos los elementos de los formularios, reglas y otros elementos llevaban la / al final.

Pues ayer en casa de Choan me enteré de una forma práctica y automática de hacer esto. Hay una forma de cambiar el comportamiento de Textmate cuando escribas elementos que requieren la contra-barra al final. Para ello, debemos ir a las preferencias como lo muestro en esta imagen:

Preferencias de Textmate

En la pestaña de Shell variables de las preferencias de Textmate escribimos una nueva variable que diga (exactamente en mayúsculas) “TM_XHTML” y en valor ponemos la barra “/” (sin las comillas). Ahora siempre que escribas código y necesite llevar la barra saldrá como debe, eso sí, no te olvides de anteponer un espacio en el campo de valor porque sino las terminaciones estarán con la barra pegada al último atributo del elemento: <input ... id="some_name"/>

Et voilà!

11 Respuestas a la entrada “Escribiendo XHTML válido en Textmate”

Perfecto! A mí me molestaba cuando hacía un drag para subir imágenes a wordpress a través de textmate. Al hacerlo el código que me insertaba era un sin la barra. Ahora ya sale bien :)

Puedes poner como valor de TM_XHTML " /" en vez de "/". De esa manera, cuando te haga el completado del html(por ejemplo, con CTRL + <) te lo hará de forma correcta :)

Aun mejor, si defines el TM_XHTML como [espacio][/] ya no tienes que preocuparte por nada.

Sirva la moraleja para recordarle a los lectores de la importancia que tiene aprender a manejar bien las herramientas de tu trabajo. El “perder” uno o dos dias enteros investigando como funciona TextMate internamente, escribiendo tus propias extensiones y adaptando las ya existentes es una inversion que se vera pagada con creces.

Secundo lo que dice Sebastián.

Escrito por Pedro
Enero 30th, 2009 at 5:19 pm

Hola,

He probado esta funcionalidad, pero TM me genera la contrabarra entre apóstrofes:

‘ /’>

¿Sabeis cómo arreglarlo?. Lo que tengo ahora es esto:

Debes escribir el valor sin las comillas.

Genial me viene este “truco”, gracias!!

Un pequeño apunte, por supuesto que si acritud:
/ = barra
\ = contrabarra

Genial!
TextMate no para de sorprenderme, no hace mucho “descubrí” el personalizar las extensiones… ante ese problema que comentas, mientras leia tu entrada pensaba en andar modificando cada regla, vaya suplicio sería, pero con esta simple configuración todo solucionado.

En teoría no es necesario declarar una variable de Shell para obtener el resultado que buscas, para eso están los bundles. Quizás pudieras probar la siguiente secuencia de comandos para crear self-closing tags como el que indicas en tu ejemplo:

1. shift + >
2. tabulador
3. ingresa el nombre del tag

o container tags de la siguiente forma

1. crtl + shift + <
2. ingresa el nombre del tag
3. tab para ingresar el contenido del container tag

Déjame saber si te funciona.

Saludos

For more information please check out this screencast!
http://macromates.com/screencast/insert_html_tags.mov