Erfahren Sie, wie Sie ein TextMate-Champion werden

TextMate ist bei weitem der bevorzugte Texteditor für die meisten Webentwickler auf dem Mac. Im heutigen Screencast werfen wir einen Blick auf einige der Funktionen, die die meisten Entwickler einfach nicht verwenden. Dies kann Ihre Produktivität massiv steigern, indem Sie weniger eingeben!

Keine Mac Person? Jeffrey hat einen Screencast mit dem Titel "Wie kann ich zweimal so schnell wie Sie Code schreiben", wie ähnliche Aktionen mit einer "Textexpander" -Anwendung in Windows ausgeführt werden.


Full Screencast



Verwendete Abkürzungen

Sie können alle Verknüpfungen und Funktionen von TextMate unter dem Menü "Bundles" anzeigen. Hier einige, die ich regelmäßig verwende:

Schlüssel

Tab
Verschiebung
Steuerung
Option (Alt)
Befehl
Flucht (esc)
Rückkehr
↓ ← ↑ → Pfeiltasten der Tastatur
                                      

HTML

Abkürzung Aktion
⌃ ⇧ , Neues HTML-Tag-Paar
⌥ ⎋ Automatische Vervollständigung von Tags / Attributen
⇧ ⇧ 7 Konvertieren Sie die Auswahl in HTML-Entitäten
! ⇥ Internet Explorer-Bedingungen
⇧ ↩ Zeilenumbruch
⇧ ⇧ V Validieren Sie HTML / CSS
link ⇥ Stylesheet-Link-Tag
Stil ⇥ Inline-Stilblock
scriptsrc ⇥ Externes JavaScript-Tag
Skript ⇥ Inline-JavaScript-Block
                                      

PHP

Abkürzung Aktion
php ⇥
Echo ⇥
wenn ⇥

ifelse ⇥

für ⇥
foreach ⇥
während ⇥
Array ⇥
Schalter ⇥
Fall ⇥
Wie du es erwartet hast.
req ⇥
req1 ⇥
inkl. ⇥
incl1 ⇥
erfordern 'Datei';
request_once 'file';
Include 'Datei';
include_once 'file';
$ _ ⇥ Wählen Sie $ _ ['POST'], $ _ ['GET'] usw. (Globale Arrays)
⇧ ⇧ V Überprüfen Sie die Syntax
⇧ ⇧ R Führen Sie die PHP-Datei aus
                                      

Rubin

Abkürzung Aktion
wenn ⇥
ife ⇥ (if, elsif)
es sei denn ⇥
während ⇥
Wie du es erwartet hast.
req ⇥ benötigen ""
reqg ⇥ erfordern "Rubygems"
benötigen ""
Hash ⇥ Hash.new | hash, key | Hash [Schlüssel] =
: ⇥ : key => "value",
Datei ⇥ Wählen Sie für verschiedene 'File'-Objektmethoden (Lesen, Schreiben usw.).
⌘ R Führen Sie die Ruby-Datei aus
                                      

Schienen

Abkürzung Aktion
cla ⇥ Rails Controller erstellen
blinken ⇥ flash [: notice] = "
ra ⇥ Rendern: Aktion => "
vp ⇥ validates_presence_of: Eingabe
vl ⇥ validates_length_of: input,: within => 1… 12
⌃ P Params [: Objekt]
⌃ J Sitzung [: Objekt]
⌃ ⇧ . <%= %>
ff ⇥ <% form_for @model do |f| -%>

<% end -%>

f. ⇥ Wählen Sie für Rails 'Formularhilfe, Beschriftung, Feld, Kennwort, Textbereich, Kontrollkästchen etc.
slt ⇥ <%= stylesheet_link_tag"%>
jit <%= javascript_include_tag"%>
⇧ ⌥ ⌘ ↓ Wechseln Sie zu den entsprechenden Controllern, Modellen, Ansichten usw. für die aktuelle Datei
mcol ⇥ In Migrationen verwenden. Wählen Sie zum Hinzufügen, Bearbeiten, Umbenennen, Entfernen von Spalten usw.
                                      

Erstellen Sie Ihre eigene Abkürzung / Hotkey

Wir werden eine Verknüpfung erstellen (Zugriff mit ⌘⇧A), um den aktuell ausgewählten Text in einen Link einzufügen, und Sie werden direkt zum Attribut springen, um die URL einzugeben.

Gehen Sie in TextMate zu "Bundles> Bundle Editor> Bundle Editor anzeigen" (oder drücken Sie ⌃⌥⌘B). So sieht mein Redakteur aus. Ihre sehen möglicherweise anders aus, da ich einige benutzerdefinierte Bundles hinzugefügt und einige für Sprachen entfernt habe, die ich nicht verwende:


Klicken Sie auf das HTML-Dropdown-Menü (Bundle), klicken Sie auf das + links unten im Fenster und wählen Sie 'Neues Snippet'. Benennen Sie dieses Snippet 'Wrap Link' und wählen Sie dann 'Key Equivalent' aus. Geben Sie in das Feld die Tastenkombination ein, die Sie verwenden möchten (z. B. A)..


Geben Sie im Textbereich Folgendes ein:

 $ TM_SELECTED_TEXT

$ TM_SELECTED_TEXT ist eine Variable, die den ausgewählten Text enthält. Schließen Sie das Fenster und probieren Sie es aus. Öffnen Sie ein Dokument in TextMate, markieren Sie etwas Text und drücken Sie Ihre Tastenkombination. Die Auswahl wird in Ankertags eingebettet.

Trotzdem müssen Sie den Cursor in der aktuellen Position bewegen href = "" Attribut, um den tatsächlichen Link einzugeben. Wäre es nicht einfacher, wenn sich unser Cursor automatisch dort bewegt hätte??

Ändern Sie den Befehl 'Wrap Link' wie folgt:

 $ TM_SELECTED_TEXT

Das $ 1 teilt TextMate mit, wo der Cursor nach dem Ausführen der Aufgabe platziert werden soll. Sie können platzieren $ 2, $ 3 usw. und bewegen Sie sich dann mit der Tabulatortaste durch sie hindurch.

Ändern Sie schließlich den Befehl in:

 $ 2: $ TM_SELECTED_TEXT

Sie können mit $ 2: Standardtext Standardtext an einem Ort hinzufügen. 'Standardtext' wird angezeigt und automatisch hervorgehoben, wenn Sie darauf tippen.
In unserem Fall haben wir den ausgewählten Text als Registerkarte für die Registerkarte festgelegt, unter Umständen, wenn Sie den ursprünglichen Text ändern möchten.

Sie können auch an Registerkarten eingegebenen Text "spiegeln":

 

Text: $ 1

Ein anderer Text: $ 2: blah de blah de blah

Spiegel von 1: $ 1

Was Sie dann auf der ersten Registerkarte eingeben, wird automatisch an anderen Positionen mit demselben Wert eingegeben.


Weitere Beispiele:

Persönlich habe ich eigene Bundles erstellt, um die jQuery-Bibliotheken einzubinden, den Text 'Lorem Ipsum' einzugeben und auch Nettuts-Artikel zu schreiben. Zum Beispiel:

jQuery-Ausschnitte

Finden Sie sich selbst, indem Sie die jQuery-Tags unbedacht eingeben? Probiere diese:
'jQuery CDN' wird mit aufgerufen inc-jquery Tab-Trigger:

 

'jQuery UI CDN' wird mit aufgerufen inc-ui Tab-Trigger:

 

'jQuery Inline Script' wird mit aufgerufen Inline-Jquery Tab-Trigger:

 

'jQuery Document Ready' wird mit aufgerufen Jquery Tab-Trigger:

 \ $ (Funktion () $ 0);

Hinweis: Der Back-Slashes am Anfang von $ (Funktion () ist dem zu entkommen $ Zeichen - sonst wird TextMate denken, dass es eine Variable ist, die er versuchen und rendern kann!

Sie können auch alle einfach einem zuordnen Jquery tab-trigger, dann erhalten Sie beim Ausführen ein Dropdown-Menü zur Auswahl. Dies ist nützlich, wenn Sie keine großen Gruppen von Snippet-Namen merken möchten!


Nettuts Schnipsel

Ich habe auch ein Paket für die verschiedenen Tags, auf die Nettuts Artikel angewiesen sind, wie zum Beispiel:
'Pre Code Block', auf den mit nt-pre tab-trigger zugegriffen wird:

 
 $ 2 

'Tuts Image' Zugriff mit nt-img tab-trigger:

 

Beim Schreiben von Artikeln verwende ich eine kleine Vorlage, um das Lesen beim Korrekturlesen zu erleichtern. Dieses Snippet enthält ein Beispiel für das Spiegeln der Title- und H1-Tags. Ich greife darauf mit dem nt-template Tab-Trigger zu:

  $ 1: TITLE 

$ 1

$ 2: Zusammenfassungstext

$ 4: Header

$ 5: Beginnen Sie mit der Eingabe! Verwenden Sie H3 für Überschriften und H4 für Unterüberschriften.

$ 0