Sublime Text 2: Erste Schritte

In weniger als einem Jahr hat sich der Sublime Text 2-Code-Editor – verfügbar für Mac, Windows und Linux – zum bevorzugten Editor einer großen Anzahl von Entwicklern entwickelt. Woher? Nun, es ist ein ausgeklügelter Editor mit blitzschneller Geschwindigkeit, einer unglaublich lebendigen Plugin-Community, einfacher Konfiguration, Vintage (Vim)-Modus, mehreren Cursorn - die Liste geht weiter.

Wenn Sie den Wechsel noch nicht vollzogen haben, geben Sie mir aus Loyalität gegenüber Ihrem aktuellen Redakteur Ihrer Wahl zwanzig Minuten, und ich werde Sie überzeugen!

Bitte beachten Sie, dass dieser Artikel aus Gründen der Übersichtlichkeit und Lesbarkeit ausschließlich die Mac-spezifischen Tastaturbelegung verwendet. Hier finden Sie die entsprechenden Windows/Linux-Versionen.

1 - Mehrere Cursor

Beginnen wir mit der Funktion, die Sie umhauen wird: mehrere Cursor. Ein Hinweis zur Vorsicht: Wenn Sie erst einmal die Flexibilität erfahren haben, mehrere Cursor zur Hand zu haben, können Sie nicht mehr zum alten Weg zurückkehren.

Stellen Sie sich vor, Sie müssen jedes Vorkommen des Wortes myMethod in newMethod ändern. Traditionell können Sie eine Suche und Ersetzung durchführen; In Sublime ist es jedoch viel einfacher. Platzieren Sie einfach den Cursor innerhalb des Wortes und geben Sie Strg + Befehl + g ein. Allein mit diesem Tastendruck haben Sie jetzt jedes Vorkommen von myMethod ausgewählt und haben mehrere Cursor zur Hand. Ändere den Text und sieh zu, wie alle aktualisiert werden! Kinnlade runter, oder?

Alternativ können Sie wiederholt Befehl + d drücken, um jedes weitere Vorkommen des Wortes schrittweise auszuwählen.

2 - Befehlspalette

Die Befehlspalette von Sublime ist ein Geschenk Gottes für diejenigen, die es vorziehen, die Maus so wenig wie möglich zu berühren (dazu in Kürze mehr). Mit dieser Palette können Sie unzählige Befehle ausführen, z. B. den Syntaxtyp für das aktuelle Dokument ändern, Plugins installieren und nach Snippets suchen, um nur einige zu nennen.

Um beispielsweise die aktuelle Syntaxhervorhebung für das aktuelle Dokument von beispielsweise HTML in CSS zu ändern, drücken Sie Befehl + Umschalt + p und geben Sie "css" ein. Die Option "Set Syntax: CSS" sollte nun angezeigt werden. Drücken Sie die Eingabetaste, und Sie sind fertig! Beachten Sie, dass Sie hier die Fuzzy-Suche nutzen können. Daher müssen Sie nicht das gesamte Wort eingeben.

Merken Sie sich diesen Tastaturbefehl und verwenden Sie ihn oft.

3 - Paketkontrolle

Package Control wurde von Will Bond entwickelt und ist ein leistungsstarker Paketmanager, mit dem Sie direkt im Code-Editor jedes beliebige Paket (oder Plugin) installieren können, das Sie sich vorstellen können. Brauchen Sie Zen-Codierung? Installieren Sie es in drei Sekunden. Wie sieht es mit der Unterstützung von Prefixr oder der Syntaxhervorhebung von CoffeeScript aus? Die Einrichtung dauert nur ein paar Tastenanschläge. Sie müssen nicht mehr das Internet nach dem richtigen Plugin durchsuchen und dann recherchieren, wo es installiert werden soll.

Um Package Control zu installieren, besuchen Sie die Website von Will Bond, kopieren Sie das bereitgestellte Code-Snippet, kehren Sie zu Sublime Text zurück, drücken Sie Strg + `, fügen Sie das Snippet ein und starten Sie es neu. Sie sind fertig!

Lassen Sie uns Zen Coding installieren. Öffnen Sie die Befehlspalette (Befehl + Umschalt + p) und geben Sie "install" ein. Sobald Sie die Eingabetaste drücken, zeigt Sublime eine Liste aller verschiedenen Plugins an, die zur Installation verfügbar sind. Suchen Sie nach Zen, um "Zen Coding" aufzurufen, und drücken Sie die Eingabetaste, um es zu installieren. Ja – so einfach ist das! Um zu bestätigen, dass es funktioniert, geben Sie in einer leeren HTML-Datei ul>li*4 + Tab ein. Tada!

4 - TextMate-Themen

Es ist wahrscheinlich, dass Ihre Mac-Leser derzeit TextMate verwenden. Glücklicherweise bietet Sublime Text volle Unterstützung für TextMate-Themen. Dies bedeutet, dass Ihr benutzerdefiniertes Farbschema ohne ein bisschen Konfiguration zu Sublime Text migriert werden kann. Legen Sie es einfach so wie es ist in Ihrem "Pakete"-Verzeichnis ab.

5 - Nettuts+ Fetch

Wie oft haben Sie beispielsweise HTML5 Boilerplate oder die jQuery-Bibliothek manuell heruntergeladen? Das ist verschwenderisch; Wäre es nicht einfacher, wenn wir einen schnellen Tastendruck ausführen und sie sofort in das aktuelle Projekt herunterladen könnten? Natürlich würde es! Nettuts+ Fetch ist die Lösung.

Installieren Sie es über die Paketsteuerung und suchen Sie dann nach "Abrufen: Remotedateien verwalten". Dadurch werden zwei Objekte zum Abrufen einzelner Dateien bzw. Pakete angezeigt; zwei wurden für Sie bereitgestellt.

Um es zu testen, erstellen Sie eine neue Datei, suchen Sie in der Befehlspalette nach "Fetch", wählen Sie "Single File -> jQuery" und sehen Sie zu, wie die neueste Version der Bibliothek sofort hinzugefügt wird. Versuchen Sie als Nächstes, ein ganzes Paket zu installieren und staunen Sie.

6 - Gehen Sie zu Symbol

Rufen Sie eine beliebige Klasse oder Liste mit verfügbaren Funktionen auf, geben Sie Befehl + r ein, und Sie erhalten eine Liste aller Symbole auf der Seite. Beachten Sie, wie wir das @-Symbol verwenden, um die Methoden anzuzeigen.

Wenn Sie beispielsweise eine PHP-Klasse anzeigen, listet Command + r alle Methodennamen auf. Sie können dann die Fuzzy-Suche verwenden, um sofort zur gewünschten Methode zu gelangen.

Wenn wir dies mit den sofortigen Dateiwechselfunktionen von Sublime kombinieren, wird dieser Befehl besonders hilfreich. Stellen Sie sich vor, Sie müssen style.css und insbesondere die .box-Klasse in dieser Datei bearbeiten. Geben Sie Command + p, style@box ein, und Sie sind da!

7 - Präfixr

Prefixr ist ein Webservice, der automatisch die erforderlichen CSS-Anbieterpräfixe auf Ihre Stylesheets anwendet, sodass Sie sich nicht daran erinnern müssen, welche Anbieter Sie für eine bestimmte CSS3-Eigenschaft verwenden müssen. Das Prefixr-Plugin bringt diese Funktionalität direkt in Ihren Editor!

Nachdem Sie das Plugin über die Paketkontrolle installiert haben, wählen Sie den Inhalt Ihres Stylesheets aus und lösen Sie das Plugin aus, indem Sie Strg + Befehl + x eingeben. Voila! Ihre Datei wurde sofort aktualisiert. Verwenden Sie die offizielle Syntax und lassen Sie Prefixr die herstellerspezifischen Anforderungen ermitteln.

8 - Erweiterte neue Datei

Je weniger Sie die Maus berühren, desto besser. Leider kann das Erstellen einer neuen Datei in Sublime Text standardmäßig etwas länger dauern, als wir möchten. Abhilfe schafft das Plugin "Advanced New File", das wie immer über die Paketkontrolle installiert werden kann.

Geben Sie nach der Installation Befehl + Option + n ein, und unten wird ein neues Bedienfeld angezeigt.

Das Tolle an diesem Plugin ist, dass Sie auch Dateien in Ordnern erstellen können, die noch nicht existieren. Möglicherweise müssen Sie eine neue Datei scripts.js erstellen, aber Sie haben das Verzeichnis js noch nicht erstellt. Das ist okay; das Plugin weiß, dass es den Ordner erstellen muss, wenn er noch nicht existiert. Geben Sie einfach den vollständigen Pfad zur gewünschten neuen Datei ein und schon können Sie loslegen.

Erstellen wir eine neue jQuery.js-Datei in einem js/libs-Verzeichnis, das noch erstellt werden muss; Wahl + Befehl + n, js/libs/jquery.js, Speichern, Befehl + Umschalt + p, "Fetch", "Single File", "jQuery". Wir haben jetzt in Sekundenschnelle einen Verzeichnisbaum erstellt und die neueste Version der Bibliothek heruntergeladen.

9 - Vintage-Modus

Wenn sie dies wünschen, können Vim-Benutzer dank des optionalen Vintage-Modus problemlos zu Sublime Text migrieren. Um es zu aktivieren, bearbeiten Sie die Datei "Default Preferences" im Menü "Preferences", scrollen Sie nach unten und entfernen Sie das Element "Vintage" aus dem ignored_packages-Array.

Drücken Sie nun Escape, und Sie befinden sich im Befehlsmodus! Sie werden feststellen, dass die Vi-Tastenbelegung von Sublime ziemlich genau ist!

10 - Native Schnipsel

Jedes Snippet in Sublime Text bezieht sich auf eine einzelne Datei und ermöglicht die Vervollständigung von Tabulatoren und Standardwerte. Um ein neues Snippet zu erstellen, wählen Sie "Tools -> New Snippet". In diese neue Datei können Sie innerhalb des <content>-Tags Ihr Snippet einfügen. Sie haben auch die Möglichkeit, einen Tab-Trigger und einen Bereich auszuwählen, wodurch sichergestellt wird, dass das Snippet nur innerhalb eines bestimmten Dateityps zugänglich ist.

Speichern Sie die Datei mit der Erweiterung .sublime-snippet und testen Sie sie!

11 - Versionierte Snippets

Während die nativen Snippets von Sublime sicherlich die Arbeit erledigen, ziehe ich es für größere Snippets vor, die Vorteile von GitHub Gists und der Versionskontrolle zu nutzen.

Beginnen Sie mit der Installation des "Gist"-Plugins über die Paketkontrolle. Dadurch erhalten wir jetzt eine Handvoll neuer Optionen in der Befehlspalette.

Wenn Sie versuchen, einen neuen Gist zu erstellen, werden Sie feststellen, dass Sie dem Plugin zuerst Ihre GitHub-Anmeldeinformationen bereitstellen müssen. Ich empfehle Ihnen, ein spezielles Konto speziell für Ihre Snippets zu erstellen. Legen Sie anschließend die Anmeldeinformationen fest und versuchen Sie es erneut. Nachdem Sie eine Handvoll Snippets erstellt haben, können Sie sie über die Befehlspalette auflisten, indem Sie "Gist: Open Gist" auswählen.

Das Beste daran ist, dass, wenn Sie vorhandene Snippets über gist.github.com verzweigen, diese automatisch in Sublime Text für Sie verfügbar sind - plus kostenlose Versionskontrolle für Ihre Snippets!

12 - Build-Systeme

Das Build-System von Sublime ermöglicht es uns, Tastenkombinationen anzuwenden, die an externe Programme wie CoffeeScript, Sass, Grunt und mehr weitergeleitet werden können. Das bedeutet, dass Sie, anstatt zum Terminal zu wechseln, um Ihren Build-Befehl auszuführen, dasselbe direkt im Editor ausführen können.

Nehmen wir CoffeeScript als Beispiel, da es heutzutage sehr beliebt ist. Beginnen Sie mit der Erstellung einer coffeescript.sublime-build-Datei in Ihrem "Packages/"-Verzeichnis. Als nächstes fügen Sie den folgenden Code ein:

1

{

2

    "cmd": ["coffee","-c", "$file"],

3

    "selector" : "source.coffee",

4

    "path": "/usr/local/bin/"

5

}

Obwohl uns mehrere Optionen zur Verfügung stehen, bleiben wir vorerst bei diesen drei. cmd gibt den auszuführenden Befehl zusammen mit allen Argumenten und Flags an. In diesem Fall führen wir die aktuelle Datei über den CoffeeScript-Kompilierungsbefehl aus. Zweitens ist path nur erforderlich, wenn CoffeeScript nicht in Ihrem Basispfad installiert ist.

Sobald Sie die Datei gespeichert haben, ist über "Tools -> Build System" eine neue Option verfügbar. Wählen Sie "CoffeeScript" und jetzt, wenn Sie den Befehl "build" mit Command + b ausführen, wird die aktuelle CoffeeScript-Datei kompiliert!

Addy Osmani hat einen fantastischen Artikel über die Build-Fähigkeiten von Sublime Text.

13 - Ablenkungsfreie Bearbeitung

Manchmal müssen wir all den zusätzlichen Flaum herausfiltern, der unserer Codierung im Weg steht. Verwenden Sie "Ablenkungsfreier Modus", um den Bildschirm mit Ausnahme des Codes zu löschen. Diese Option ist über das Menü Ansicht verfügbar. Wählen Sie "Ablenkungsfreien Modus aktivieren" oder verwenden Sie die Mac-Tastenkombination Strg + Umschalt + Befehl + F.

14 - Eine Vogelperspektive

Eine der herausragenden Funktionen von Sublime ist die einzigartige Seitenleiste, die eine Vogelperspektive der aktuellen Datei bietet. Dies kann bei großen Dateien unglaublich hilfreich sein, da wir eine Datei in Sekunden scannen können, ohne die Seite manuell scrollen zu müssen.

15 - Mehrere Spalten

Bearbeiten Sie lieber mehrere Dateien im selben Fenster? Sublime bietet eine Handvoll geteilter Ansichten, einschließlich Zeilen und Spalten. Navigieren Sie zu Ansicht -> Layout, um die verfügbaren Auswahlmöglichkeiten anzuzeigen, und merken Sie sich die Tastaturbefehle, da Sie diese Funktion häufig verwenden werden!

16 - Live-CSS-Farbgebung

Das Plugin "Live CSS" ist einfach, aber hilfreich. Es wird den Hintergrund jedes Farbwerts in Ihrem Stylesheet automatisch auf den von Ihnen angegebenen Wert setzen. Sicherlich ist es eine kleine Annehmlichkeit, aber dennoch kann es nützlich sein!

17 - Platzhalter

Während der Entwicklung haben wir oft noch nicht den endgültigen Inhalt für eine Webanwendung. In diesen Fällen verwenden wir normalerweise Platzhaltertext und Bilder. Wäre es nicht schlau, eine Handvoll Platzhalter-Snippets zu erstellen, wenn man bedenkt, wie oft wir dies tun? Nun, das Platzhalter-Plugin macht genau das!

Egal, ob Sie ein temporäres Bild, ein paar "lorem ipsum"-Absätze oder sogar eine Definitionsliste mit Dummy-Text benötigen, dieses Plugin ist perfekt für den Job.

18 - Einrückführungen

Ein überraschend seltener Komfort, der in Notepad++ zu finden ist, sind Einrückungsleitfäden. Manchmal kann es beim Durchsuchen großer Dateien schwierig sein, die Einrückung ohne etwas Hilfe zuzuordnen.

Die Einrückungshilfen von Sublime bieten hilfreiche gepunktete Grafiken, um dies zu beheben.

19 - Einfache Konfiguration

Sublime Text wird manchmal kritisiert, weil es keine auffällige Oberfläche zum Einstellen von Konfigurationsoptionen bietet. Ironischerweise ist die Tatsache, dass Sublime buchstäblich ein editierbares JavaScript-Objekt anzeigt, nach Meinung dieses Autors eine seiner größten Stärken. Dies macht es so einfach wie möglich, die Einstellungen von Sublime genau an Ihre Bedürfnisse anzupassen.

Um beispielsweise die "Einrückungsrichtlinien" zu deaktivieren, öffnen Sie die Einstellungsdatei "Standard", suchen Sie nach draw_indent_guides (mit Befehl + i) und setzen Sie den Wert auf false. Einfach! Überprüfen Sie alle verfügbaren Einstellungen.

20 - Dateiwechsel in Millisekunden

Wenn Sie immer noch manuell auf die Seitenleiste verweisen, um die gewünschte Datei zu finden, zu der Sie wechseln möchten, machen Sie es falsch. Der sofortige Dateiwechsel von Sublime ist unglaublich und schneller, als Sie es je in einem Editor erlebt haben.

Geben Sie Befehl + p ein, um eine Liste aller Dateien im aktuellen Projekt anzuzeigen. Sie können jetzt die Fuzzy-Suche verwenden, um die Datei auszuwählen, zu der Sie wechseln möchten. Benötigen Sie eine Liste aller JavaScript-Dateien? Geben Sie .js ein. Sie werden feststellen, dass Sublime Text während der Eingabe Ihrer Suche blitzschnell zur obersten Datei wechselt, die Ihrer Suchanfrage entspricht.

Dies ist die bevorzugte Methode, um zu neuen Dateien zu navigieren. Die Seitenleiste ist der letzte Ausweg.

21 - Tastenbelegung

Sublime gibt uns die Möglichkeit, einfach Tastenkombinationen festzulegen, um jeden Befehl auszulösen. Obwohl viele Bindungen bereits integriert sind, können Sie sie bei Bedarf an Ihre Bedürfnisse anpassen.

Berücksichtigen Sie die Bindung zum Verschieben einer Datei in ein anderes Fenster, wenn Sie mit mehreren Spalten arbeiten. Standardmäßig müssten wir Strg + Umschalt + 2 drücken; Dies kann jedoch etwas schwer zu merken sein. Lassen Sie uns dies stattdessen Option + 2 zuordnen.

Wir könnten zwar die Standard-Keybinding-Datei bearbeiten, dies ist jedoch eine schlechte Vorgehensweise, da jedes Sublime-Update Ihre Anpassungen zurücksetzt. Stattdessen ist es am besten, die Datei mit den Benutzertastenzuordnungen zu bearbeiten.

1

[

2

    { "keys": ["alt+1"], "command": "move_to_group", "args": { "group": 0 } },

3

    { "keys": ["alt+2"], "command": "move_to_group", "args": { "group": 1 } },

4

    { "keys": ["alt+3"], "command": "move_to_group", "args": { "group": 2 } },

5

    { "keys": ["alt+4"], "command": "move_to_group", "args": { "group": 3 } }

6

]

Mach dir keine Sorgen; Wenn dies verwirrend aussieht, durchsuchen Sie die Standard-Keybindings-Datei nach den Einstellungen, die Sie ändern müssen, kopieren Sie sie dann und fügen Sie sie in Ihre Benutzer-Keybinding-Datei ein und aktualisieren Sie die "Schlüssel" entsprechend.

22 - Live-Suche

Wenn wir eine Datei durchsuchen müssen, greifen wir oft darauf zurück, ein "Suchen und Ersetzen"-Panel aufzurufen, was Zeit in Anspruch nimmt. Drücken Sie stattdessen Befehl + i, um eine Live-Suche für die aktuelle Datei durchzuführen. Sie werden staunen, wie viel schneller diese Methode ist.

23 - Code-Faltung

Natürlich bietet Sublime Text Unterstützung für mehrstufiges Code-Folding. Angenommen, Sie arbeiten an einem Stylesheet und möchten alle Eigenschaften ausblenden; Wählen Sie entweder "Bearbeiten -> Cold Folding -> Alles falten" oder drücken Sie Befehl + k + 1.

Nett! Um alle Blöcke aufzuklappen, drücken Sie Befehl + k + j.

Das Auswendiglernen der Tastenbelegung kann einige Zeit in Anspruch nehmen, aber die Mühe lohnt sich.

24 - Entwicklungsversion

Vergessen Sie nicht, dass Sublime Text 2 aktiv weiterentwickelt wird. Ich empfehle Ihnen, die Entwicklungsversion zu verwenden, die unter sublimetext.com/dev verfügbar ist. Mach dir keine Sorgen; Obwohl es sich um Entwicklungsversionen handelt, werden Sie selten auf Fehler stoßen.

25 - Sofortige Ausrichtung

Das Alignment-Plugin von Will Bond passt Ihren Code sofort an, um einen schöner gestalteten Code zu erhalten. Am häufigsten wird es verwendet, um sicherzustellen, dass das Gleichheitszeichen = für Variablenzuweisungen ausgerichtet ist.

Das über Paketsteuerung installierte Alignment-Plugin kann aktiviert werden, indem ein geeigneter Code ausgewählt und Strg + Umschalt + a gedrückt wird.

Tatsächlich übersetzt das Plugin:

1

var first = 'Joe';

2

var last = 'Black';

3

var job_title = 'Death';

4

var status = 'On holiday';

In:

1

var first     = 'Joe';

2

var last      = 'Black';

3

var job_title = 'Death';

4

var status    = 'On holiday';

Einfach, aber hilfreich!

Schlussgedanken

Natürlich gibt es in Sublime Text 2 noch viele weitere Geheimnisse und Tricks, aber diese Liste wird Ihnen den Einstieg erleichtern! Wenn Sie mehr über diesen fantastischen Editor erfahren möchten, lesen Sie unbedingt unseren nächsten Kurs: "Perfekter Workflow in Sublime Text 2."