Sublime Text 2 Tipps und Tricks (Aktualisiert)

Sublime Text 2 ist einer der schnellsten und unglaublichsten Code-Editoren, die seit langem veröffentlicht wurden! Mit einem Community- und Plugin-Ökosystem, das so leidenschaftlich ist wie dieses, ist es möglicherweise unmöglich, dass ein anderer Editor aufholt. Ich zeige Ihnen heute meine Lieblingstipps und -tricks.

Sublime Text 2 ist derzeit für alle wichtigen Plattformen verfügbar: OS X, Linux und Windows.

1 - Bleeding Edge-Versionen

Sublime befindet sich in aktiver Entwicklung. Wenn Sie wie ich die neueste Version der App verwenden möchten, können Sie den Entwickler-Build herunterladen. Sie werden feststellen, dass jeden zweiten Tag oder so neue(automatische) Updates verfügbar sind.

Laden Sie hier einen Entwickler-Build von Sublime 2 herunter.

2 - Holen Sie sich ein besseres Symbol

Update: Hier ist ein besseres Symbol.

Zu seiner Verteidigung befindet sich Sublime Text 2 noch in einem Beta-Zustand. Das offizielle Symbol wird sich wahrscheinlich / hoffentlich mit der offiziellen Veröffentlichung ändern. Bis dahin hat Nate Beaty ein alternatives Symbol erstellt, wenn Sie es bevorzugen.

Um es zu integrieren, müssen Sie die vorhandene Datei "Sublime Text 2.icns" durch diese neue ersetzen. Navigieren Sie auf einem Mac zu Sublime 2 in Ihrem Applications/ Ordner, klicken Sie mit der rechten Maustaste und klicken Sie auf "Paketinhalt anzeigen". Navigieren Sie zum Schluss zu Contents/Resources/ und ziehen Sie das neue Symbol hinein, wobei Sie das vorhandene überschreiben.

Bitte beachten Sie, dass bei Verwendung der häufig aktualisierten Entwicklungsversion von Sublime Text bei jedem Update das Symbol entfernt wird. Machen Sie sich vorerst keine Sorgen um das Symbol.

3 - Greifen Sie auf die Befehlspalette zu

Ähnlich wie bei TextMate können wir die Befehlspalette von Sublime verwenden, indem wir auf das Menü Extras zugreifen oder auf dem Mac Shift + Command + P drücken. Egal, ob Sie eine Einstellungsseite besuchen oder ein Snippet einfügen müssen, all dies können Sie hier erreichen.

4 - Blitzschnelles Umschalten von Dateien

Drücken Sie Control oder Command + P, geben Sie den Namen der Datei ein, auf die Sie zugreifen möchten (Fuzzy-Finder), und ohne die Eingabetaste zu drücken, werden Sie sofort zu dieser Datei weitergeleitet. Während Vim und Apps wie PeepOpen eine ähnliche Funktionalität bieten, sind sie bei weitem nicht so schnell wie die Implementierung von Sublime.

5 - Wie haben wir vor der Mehrfachauswahl überlebt?

Editoren wie TextMate bieten seit langem vertikale Auswahl an, was ziemlich ordentlich ist. Bei Mehrfachauswahl können Sie jedoch mehrere Cursor auf der Seite haben. Dies kann die Notwendigkeit der Verwendung regulärer Ausdrücke sowie der erweiterten Suche und Ersetzung von Abfragen drastisch reduzieren. Vielleicht ist eine schnelle visuelle Demonstration angebracht ...

Um die Mehrfachauswahl zu aktivieren, haben Sie mehrere Möglichkeiten:

• Drücken Sie Alt oder Command und klicken Sie dann in jede Region, in der Sie einen Cursor benötigen.
• Wählen Sie einen Zeilenblock aus und drücken Sie dann Shift + Command + L.
• Platzieren Sie den Cursor über einem bestimmten Wort und drücken Sie wiederholt Control/Command + D, um weitere Vorkommen dieses Wortes auszuwählen.
• Alternativ können Sie bei allen Vorkommen eines Wortes einen zusätzlichen Cursor hinzufügen, indem Sie unter Windows Alt+F3 oder unter Mac Ctrl+Command+G eingeben. Tolle!!

6 - Einrückungshandbücher

Aktualisierung: Diese Funktion ist jetzt mit Sublime Text 2 vorinstalliert.

Es ist eine so kleine Funktion, aber ich habe es immer geliebt, wie Notepad++ unter Windows Einrückungshandbücher anzeigt. Dies erleichtert das Navigieren und Formatieren der Seite erheblich. Sublime Text 2 bietet diese Möglichkeit über ein von Nikolaus Wittenstein erstelltes Plugin.

So integrieren Sie dieses Plugin:

• Laden Sie es herunter
• Benennen Sie den Ordner in "Einrückungshandbücher" um und ziehen Sie ihn in den Packages-Ordner. Auf einem Mac wäre dieser Pfad Application Support/Sublime Text 2/Packages

7 - Package Control

Die im vorherigen Tipp (Nr. 6) beschriebenen Schritte sind etwas mühsam, nicht wahr? Stattdessen können wir die hervorragende Sublime Package Control installieren, die den gesamten Prozess rationalisiert.

Um "Package Control" zu installieren, öffnen Sie Sublime und drücken Sie Control+ `. Fügen Sie als Nächstes das folgende Snippet in die Konsole ein.

1

 import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

Machen Sie sich keine Sorgen, wenn Sie den obigen Code nicht verstehen. einfach kopieren und einfügen!

Zuletzt starten Sie Sublime Text neu und navigieren Sie zu Preferences -> Package Settings. Wenn die Installation erfolgreich war, wird in dieser Liste jetzt ein Package Control-Element angezeigt.

Mit der installierten Package Control wird das Hinzufügen neuer Plugins und Funktionen unglaublich einfach!

Ein Verwendungsbeispiel finden Sie im nächsten Element in dieser Liste.

8 - Ausrichtung

Wenn Sie der Typ sind, der es vorzieht, Ihre Gleichheitszeichen auszurichten - zum Beispiel in Ihrem JavaScript ...

1

// Before  

2

var joe = 'joe'; 

3

var johnny = 'johnny'; 

4

var quaid = 'quaid';

5

6

// After

7

var joe    = 'joe';

8

var johnny = 'johnny';

9

var quaid  = 'quaid';

... dieser Prozess kann über das Sublime Alignment Plugin automatisiert werden. Anstatt es manuell herunterzuladen und zu installieren, verwenden wir stattdessen die Paketsteuerung (siehe Nr. 7).

• Drücken Sie Shift + Command + P.
• Geben Sie "install" ein, um die Option "Package Control: Install Package" aufzurufen, und drücken Sie die Eingabetaste
• Suchen Sie nach "Ausrichtung" und drücken Sie die Eingabetaste, um es zu installieren.
• Sie sind fertig; so einfach! Geben Sie Shift + Command + A ein, um die Ausrichtung automatisch vorzunehmen.

Dieser Vorgang kann für alle typischen Plugins, die wir installieren, wie z. B. Zen Coding, wiederholt werden.

9 - Vim Fanatic

Ich bin ein großer Fan von Vim. Die Menge an Kraft, die es liefert, ist verrückt. Die Tatsache, dass ich auf Sublime Text 2 umgestellt habe, sollte dann Bände sprechen!

Wenn Sie einen Entwickler-Build von Sublime Text verwenden (siehe Nr. 2 in dieser Liste), können Sie den Vintage-Modus aktivieren, der die Vi-Befehle unterstützt, die wir kennen und lieben - okay ... einige von uns lieben. Der Rest von euch hasst es! :) :)

Um den Vintage-Modus zu aktivieren, navigieren Sie zu Preferences/Global Settings - Default. Navigieren Sie nach dem Öffnen dieser Datei ganz nach unten und ändern Sie "ignored_packages": ["Vintage"] in "ignored_packages": []. Starten Sie anschließend Sublime neu, drücken Sie die Escape-Taste und tada: Befehlsmodus!

Cursor blockieren

Eine Sache, die Sie möglicherweise bemerken, ist, dass es im Befehlsmodus schwierig sein kann, den Cursor zu finden (insbesondere, wenn Sie Dinge wie Lesezeichen ausnutzen). Bei mehr als einer Gelegenheit habe ich versucht, seinen Standort zu finden.

Obwohl es keine perfekte Lösung ist, versucht ein Plugin namens "SublimeBlockCursor", dieses Problem zu beheben.

Hinweis: Während in der Readme-Datei angegeben ist, dass SublimeBlockCursor über Package Control installiert werden kann, konnte ich es nicht finden. Stattdessen musste ich das Projekt manuell in den Ordner Packages klonen.

10 - Ablenkungsfreie Bearbeitung

Manchmal müssen wir alle zusätzlichen Flusen herausfiltern, die unserer Codierung im Wege stehen. Verwenden Sie den "Ablenkungsfreien Modus", um diese Idee so weit wie möglich zu bringen. Diese Option ist über das Menü Ansicht verfügbar. Wählen Sie "Ablenkungsfreier Modus aktivieren" oder verwenden Sie die Mac-Tastenkombination Control + Shift + Command + F.

11 - Sie können weiterhin TextMate-Bundles verwenden

TextMate-Snippets und -Themen lassen sich gut auf Sublime Text übertragen. Sie müssen sie nur im Ordner "Pakete" ablegen - die Erweiterung .tmbundle ist intakt, und Sublime erkennt die Dateien. Dies bedeutet, dass der gesamte Katalog der TextMate-Themen in Sublime!

Zum Beispiel habe ich in letzter Zeit ein gutes Stück mit der (fantastischen) Slim-Template-Engine gearbeitet und brauchte eine bessere Syntaxhervorhebung. Fred Wu hat ein Bundle für TextMate erstellt, aber tada, es funktioniert auch perfekt in Sublime Text! Wenn Sie interessiert sind, können Sie das Slim-Bundle hier herunterladen. Es enthält sowohl Snippets als auch Syntaxhervorhebungen.

12 - Benutzerdefinierte Themen

Das Standardthema für Sublime Text ist ausgezeichnet, aber ich bevorzuge ein benutzerdefiniertes helles und dunkles Thema, Soda, das von Ian Hill erstellt wurde.

Installation

Wie aus der Github-Seite entnommen ...

"Wenn Sie ein Git-Benutzer sind, können Sie das Thema am besten installieren und auf dem neuesten Stand halten, indem Sie das Repo direkt in Ihr Paketverzeichnis im Bereich der Sublime Text 2-Anwendungseinstellungen klonen."

Mit Git

Wechseln Sie in Ihr Sublime Text 2 Packages-Verzeichnis und klonen Sie das Theme-Repository mit dem folgenden Befehl:

1

 git clone https://github.com/buymeasoda/soda-theme/ "Theme - Soda"

Manuell herunterladen

• Laden Sie die Dateien mit der Download-Option GitHub .zip herunter.
• Entpacken Sie die Dateien und benennen Sie den Ordner in Theme - Soda um
• Kopieren Sie den Ordner in Ihr Sublime Text 2 Packages-Verzeichnis

Thema aktivieren

So konfigurieren Sie Sublime Text 2 für die Verwendung des Themas:

• Öffnen Sie Ihre Sublime Text 2-Datei mit den globalen Benutzereinstellungen: Sublime Text 2 -> Preferences -> User Global Settings
• Fügen Sie Ihren Themeneintrag als "Thema" hinzu (oder aktualisieren Sie ihn): "Soda Light.sublime-Thema" oder "Thema": "Soda Dark.sublime-Thema"

Beispiel für globale Benutzereinstellungen

1

{

2

    "theme": "Soda Light.sublime-theme"

3

}

13 - Seiten-Crawlen

Sublime Text bietet uns verschiedene Möglichkeiten, eine Seite abzufragen (außerhalb der Standardsuchfunktionen).

Funktionen

Benötigen Sie eine schnelle Möglichkeit, zu einer bestimmten Funktion oder Methode zu navigieren?

Geben Sie Control / Command + r ein, um ein Popup anzuzeigen, das genau dies ermöglicht (beachten Sie das @-Symbol)! Noch besser ist, dass die Suche auch unscharf ist, was besonders für große Klassen hilfreich ist.

HTML

Was ist, wenn Sie sofort zu einem bestimmten Teil einer HTML-Seite wechseln möchten - beispielsweise zum div mit einer container-Klasse. Geben Sie Control/Command + p und dann # ein, und Sie sehen sofort einen Baum Ihres Dokuments.

Gehen Sie zur Zeilennummer

Um schnell zu einer bestimmten Zeilennummer auf der Seite zu gelangen, können Sie Control + g drücken. Sie werden jedoch feststellen, dass diese Palette (Control/Command + p) erneut aufgerufen und das Symbol : angehängt wird. Dies wird von Vim übernommen.

Dies bedeutet, dass Sie zusätzlich zu Control + g auch Control/Command + p und dann Folgendes eingeben können :LINE_NUMBER.

14 - Abrufen von Remote-Dateien mit Leichtigkeit

Nehmen wir an, Sie sind ein Fan von Normalize.css. Möglicherweise laden Sie es herunter und speichern es in einem Snippet oder speichern das Stylesheet selbst in einem Assets-Ordner. Auf diese Weise müssen Sie für zukünftige Projekte nur kopieren und einfügen.

Das einzige Problem bei dieser Methode ist - wie wir alle festgestellt haben -, dass nach Ablauf einiger Monate das Asset (in diesem Fall Normalize.css) vom Ersteller mehr als möglich aktualisiert wurde. Sie haben also die Möglichkeit, entweder die jetzt veraltete Version von Normalize zu verwenden oder erneut zur GitHub-Seite zurückzukehren und eine neue Kopie zu erstellen. Das alles scheint langweilig.

Nettuts+ Fetch wurde von Weslly Honorato entwickelt und ist die Lösung für unser Dilemma. Es kann über Package Control installiert werden.

Verwendung

Bei der Arbeit mit Fetch werden nur zwei Befehle verwendet. Zuerst müssen wir einige Dateiverweise speichern. Rufen Sie erneut die Befehlspalette auf und suchen Sie nach "Abrufen". Wählen Sie zunächst "Remote-Dateien verwalten".

Das Besondere an Sublime Text 2 ist, dass die Konfiguration unglaublich einfach ist. Um Verweise auf Online-Asset-Dateien zuzuweisen, müssen wir nur ein Objekt wie dieses erstellen (keine Sorge, eines wird nach der Installation für Sie vorab ausgefüllt):

So ziehen Sie die neueste Version von jQuery ein (wenn Sie kein CDN verwenden möchten):

1

{

2

	"files":

3

	{

4

		"jquery": "http://code.jquery.com/jquery.min.js"

5

	}

6

}

Erfahren Sie mehr über die Verwendung von Nettuts+ Fetch.

15 - Präfix-Plugin

Das Nettuts+ Prefixr-Plugin wurde von Will Bond (dem Erfinder von Package Control) entwickelt und ermöglicht es Ihnen, Ihr gesamtes Stylesheet automatisch zu aktualisieren, um die Unterstützung aller verschiedenen erforderlichen CSS3-Herstellerpräfixe einzuschließen. Auf diese Weise müssen Sie niemals die Website selbst besuchen. Sie geben lediglich einen Tastaturbefehl ein und:

1

.box {

2

   border-radius: 10px;

3

   box-shadow: 0 0 5px rgba(0,0,0,.4);

4

}

... wird konvertiert zu:

1

.box {

2

	-webkit-border-radius: 10px;

3

	-moz-border-radius: 10px;

4

	border-radius: 10px;

5

6

	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);

7

	-moz-box-shadow: 0 0 5px rgba(0,0,0,.4);

8

	box-shadow: 0 0 5px rgba(0,0,0,.4);

9

}

Verwendung

Wählen Sie nach der Installation (über die Paketsteuerung) Ihr Stylesheet (oder einen einzelnen Block) aus, drücken Sie unter Windows und Linux ctrl+alt+x oder unter OS X cmd+ctrl+x. Der Code wird sofort über das Prefixr-Web ausgeführt Bedienung.

16 - Starten Sie Sublime vom Terminal aus

Sublime Text 2 enthält das Befehlszeile-Werkzeug subl, mit dem Sie mit Dateien in der Befehlszeile arbeiten können. "

Erstellen Sie dazu einen Symlink zum Werkzeug.

1

ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" ~/bin/subl

Solange ~/bin auf deinem Weg ist, sollte das den Trick machen!

1

cd myProject

2

subl .

Weitere Anweisungen finden Sie hier.

17 - Autoformat HTML

Seltsamerweise ist die Möglichkeit, HTML automatisch zu formatieren, nicht Bestandteil des Standard-Builds von Sublime Text. Das Tag-Plugin hofft unter anderem, eine Lösung anbieten zu können, die jedoch aufgrund einiger Mängel - insbesondere beim Umgang mit HTML-Kommentaren - nicht ausreichend ist.

Das Tag-Plugin kann über Package Control installiert werden.

Verwenden Sie den folgenden HTML-Code, um die Fähigkeiten zur automatischen Formatierung zu testen:

1

<html>

2

<head>

3

	<meta charset=utf8>

4

	<title></title>

5

	<!-- begin-->

6

7

	<!-- end comment -->

8

</head>

9

<body>

10

11

<h1>Hi there</h1>

12

13

<h2>Bye</h2>

14

</body>

15

</html>

... wird geändert in:

1

<html>

2

	<head>

3

		<meta charset=utf8>

4

		<title></title><!-- begin-->

5

<!-- end comment -->

6

	</head>

7

	<body><h1>Hi there</h1>

8

9

		<h2>Bye</h2>

10

	</body>

11

</html>

Huch; es sieht schlimmer aus als es ist. Aus meinen Tests geht hervor, dass das body-Tag fälschlicherweise nicht in einer eigenen Zeile platziert wird und beim Umgang mit HTML-Kommentaren pissig wird. Bis diese Probleme behoben sind (oder eine native Lösung bereitgestellt wird), wählen Sie am besten manuell einen HTML-Block zum Neuformatieren aus und nicht die gesamte Seite.

Ein Bonus von 200 US-Dollar wird an den ersten Entwickler des Sublime Text-Plugins ausgezahlt, der das endgültige Plugin "Nettuts+ HTML Formatter" erstellt und einreicht.

18 - Erstellen Sie ein Plugin

Wenn Sie sich abenteuerlustig fühlen, stöbern Sie in der riesigen Plugin-Entwicklungs-Community von Sublime Text und tragen Sie dazu bei. Wir haben hier auf Nettuts+ ein exzellentes Tutorial zum Erstellen eines ST-Plugins. Probieren Sie es aus, wenn Sie das interessiert!

Schlussfolgerung

Je mehr ich mit Sublime Text 2 arbeite, desto mehr wird mir klar, wie unglaublich es ist. Aber all dies würde nichts bedeuten, wenn nicht die Tatsache, dass es ein wahnsinnig schneller Editor ist, und noch besser, es ist noch nicht fertig!

Wenn Sie noch weiter gehen möchten, schauen Sie sich Snippeter an, einen Code-Snippets-Manager, der Ihre Codierung verbessert, indem er Ihre Code-Snippets online speichert und es Ihnen ermöglicht, sie mithilfe einer integrierten Suchleiste einfach zu finden. Außerdem können Sie Elemente als Sublime Text-Snippets exportieren (mit tabTrigger-Unterstützung).