Joram Höfs - Blog, Pizza und mehr

Artikel mit Tag textmate:

Mittwoch, 25. November 2009

TextMate und Zen-Coding

Tags für diesen Artikel: , , , , , ,

Editoren unter Mac OS X gibt es wie Sand am Meer: BBEdit, TextWrangler, SubEthaEdit, skEdit, Coda, Espresso, Textmate und zig andere. Daneben IDEs wie Aptana, PHPEclipse und was der Markt nicht noch so anbietet. Aber am Ende des Tages bleibt nur einer: TextMate.

Ja er hat

  • keinen (S)FTP Support,
  • keinen CSS-Edit Klon,
  • und keine super tolle Live-Preview.

Aber wer braucht das schon? Wofür (S)FTP wenn man am Subversion hängt, wofür ein grafisches CSS-Design Tool wenn man CSS denkt und was will man mit einer integrierten Live-Preview wenn man auf Firebug, WebInspector und die IEDeveloperBar steht? Ergibt es nicht mehr Sinn eine Seite mit den Browsern zu betrachten und zu testen in denen sie später gerendert wird?

Natürlich kann man auch mit den anderen Editoren vernünftig arbeiten (sofern man die so genannten „Vorteile” außer Acht lässt), aber sie haben einen erheblichen Mangel: Sie haben keine Bundles. Diese netten kleinen Pakete die einem (fast) alle Wünsche erfüllen (können), diese Anhäufungen von Script und Code die TextMate so mächtig machen.

Smarty, Markdown, Ruby, Java, Python, CSS, SQL, SVN, Latex, PHP, Textile, CSSDoc, Javascript, jQuery und noch extrem viel mehr. Nichts für das es kein Bundle gibt und sollte doch mal wirklich ein Thema nicht besetzt sein kann man direkt anfangen und sich selbst die Lösung schreiben.

Das ist es was ich von einem mächtigen Editor erwarte: Flexibilität.

Ein solches Bundle bzw. Bundleset ist Zen-Coding, ein neuer Ansatz um Markup und CSS zu schreiben. Vor gut 2 Monaten mal irgendwo entdeckt und seit dem hat es im täglichen Einsatz die beiden HTML und CSS Bundles von minimaldesign.net bei mir (zum Großteil) ersetzt.

Mit Zen-Coding spart man sich das Schreiben des Markups - man schreibt „nur” einen CSS-Selektor der dann evaluiert und in Markup transformiert wird.

So wird aus dem Selektor:

div#wrap>h1+div>h2+p+div.meta>p+ul.nav>li*3>a

Folgendes Markup generiert:

<div id="wrap">
	<h1></h1>
	<div>
		<h2></h2>
		<p></p>
		<div class="meta">
			<p></p>
			<ul class="nav">
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</div>
	</div>
</div>

Einfach, praktisch und tierisch schnell - Zen Coding ist selbstverständlich nicht nur für TextMate erhältlich und integriert sich eben so gut in Coda oder Aptana - aber da müsste ich ja auf alle anderen Bundles verzichten.

TextMate rockt.


Bookmark TextMate und Zen-Coding  at del.icio.us Digg TextMate und Zen-Coding Technorati TextMate und Zen-Coding wong it!


Sonntag, 7. September 2008

Die 5 wichtigsten TextMate-Plugins

Tags für diesen Artikel: , ,

TextMate ist von Haus aus ein sehr mächtiger (wenn nicht der mächtigste) Texteditor, aber leider gibt es ein paar Features die er nicht mitbringt oder ungenügend bis unpraktisch umsetzt.

Im folgendem werde ich auf die TextMate-Plugins MissingDrawer, TMCodeBrowser, TMLabels, ProjectTree und SVNMate eingehen und darlegen warum man diese nicht mehr missen mag. Die entsprechenden Links finden sich am Ende des Beitrags.

MissingDrawer

Die Projektleiste die TextMate mitbringt ist zwar nicht schlecht hat aber einen für mich schwerwiegenden Nachteil: Wenn man das Fenster maximiert ist die ausfahrbare Leiste nur noch unpraktisch und sieht zudem unschön aus.

TextMAte Screenshot

Quelle: Wikipedia – Haldir 24.7.2007

Zur Lösung dieses „Problems” gibt es das MissingDrawer-Plugin welches die Projektleiste X-Code ähnlich in das Fenster einbindet:

Das sieht doch schon besser aus, aber leider hat die Projektleiste noch einige andere Probleme die es zu lösen gibt.

TMLabels

Wer mit umfangreichen Projekten umgeht wird früher oder später die Etiketten des Finders entdecken und damit beginnen die verschiedenen Dateien farbig zu kennzeichnen:

Diese Etiketten lassen sich wunderbar dafür einsetzen um die Dateien und Ordner zu gruppieren oder mit einem Status zu versehen. Leider wird diese Metainformation nicht von TextMate dargestellt – zumindestens nicht ohne ein weiteres Plugin. Um die Etiketten in der Projektleiste nutzen zu können gibt es das Plugin TMLabels:

TMLabels zeigt nicht nur die Etikettenfarbe an sondern erlaubt es auch das Etikett zu ändern. Eine sehr praktische Funktion die ich nicht mehr missen möchte.

Wo ich gerade von umfangreichen Projekten schreibe kommen wir gleich zum nächsten Plugin welches uns wertvolle Zeit und Nerven im täglichen Umgang mit TextMate sparen wird.

ProjectTree

Wenn Projekte eine gewisse Größe und Komplexität erreicht haben schlägt sich dies viel zu oft auch in einer tiefen und komplexen Datei- und Ordnerhierarchie wieder. Leider merkt sich TextMate von Haus aus nicht welche Ordner in der Projektleiste geöffnet waren und so muss man sich jedes mal (wenn man das Projekt neu öffnet) wieder und wieder durch ein dutzend verschiedene Ordner klicken bis man dort angelangt ist wo man hin möchte.

ProjectTree löst dieses Problem indem es den Zustand der Projektleiste mit in der Projektdatei speichert und beim öffnen dieser auch wiederherstellt.

Nun kommen wir zum vorletzten der Plugins und wie könnte es anders sein erweitert auch dies die Projektleiste von TextMate:

SVNMate

Wenn man an komplexen Projekten arbeitet wird man in der Regel auf ein Versionskontrollsystem wie z.B: Subversion setzen um die Projektedaten zu versionieren und mit anderen Entwicklern zu teilen.

In einem solchen System können die Dateien verschiedene Zustände haben z.B. geändert, aktuell, etc.. Um sich diese Zustände innerhalb der Projektleiste anzeigen zu lassen gibt es SVNMate.

Zugegebener Maßen ist SVNMate eher ein Gadget aber man behält den Überblick über seine Änderung und wird daran erinnert mal wieder ein Commit zu machen.

Kommen wir nun zum letzen Plugin in dieser Runde – aber eine Warnung zuvor: Diesmal geht es nicht um die Projektleiste!

TMCodeBrowser

TextMate verfügt zwar über eine „Funktionsliste” mit der man die Methoden innerhalb einer Datei direkt anspringen kann – diese hat aber leider zwei Nachteile:

  1. Befindet sie sich unten in der Statusleiste und ist somit schwer erreichbar.
  2. Listet sie nur die Methodennamen aber weder Klassen noch Variablen auf

Dieses Problem löst das Plugin TMCodeBrowser welches ein Fenster mit einer durchsuchbaren Liste an Klassen-, Variablen- und Methodennamen darstellt.

Mittels der Tastenkombination „Strg + Apfel + B” wird das Fenster aufgerufen, man tippt seinen Funktionsnamen ein oder klickt sich durch die Liste, bestätigt, das Fenster verschwindet wieder und man ist in der richtigen Zeile.

Mit dem TMCodeBrowser kann man also sehr schnell durch seine Datei navigieren ohne jetzt jeden Funktionsnamen 100% parat zu haben – sehr praktisch!

Download Links


Bookmark Die 5 wichtigsten TextMate-Plugins  at del.icio.us Digg Die 5 wichtigsten TextMate-Plugins Technorati Die 5 wichtigsten TextMate-Plugins wong it!