Erhabener 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 - zu einer beliebten Zahl von Entwicklern entwickelt. Woher? Nun, es ist ein hochentwickelter Editor mit blitzschneller Geschwindigkeit, einer unglaublich lebendigen Plug-In-Community, einfacher Konfiguration, Vintage-Modus (Vim) und mehreren Cursors - die Liste geht weiter.

Wenn Sie den Wechsel noch nicht vorgenommen haben, geben Sie mir zwanzig Minuten Zeit, und ich kann Sie überzeugen!

Bitte beachten Sie, dass dieser Artikel aus Bequemlichkeits- und Lesbarkeitsgründen ausschließlich die Mac-spezifischen Tastaturbindungen verwendet. Die entsprechenden Windows / Linux-Versionen finden Sie hier.


1 - Mehrere Cursor

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

Stellen Sie sich vor, Sie müssen jedes Vorkommen des Wortes ändern, myMethod, zu newMethod. Normalerweise führen Sie Suchen und Ersetzen aus. In Sublime ist es jedoch viel einfacher. Setzen Sie einfach den Cursor in das Wort und tippen Sie Strg + Befehl + g. Mit diesem Tastendruck haben Sie jetzt jedes Vorkommen von ausgewählt myMethod, und haben mehrere Cursor an den Fingerspitzen. Ändern Sie den Text und sehen Sie, wie alle aktualisiert werden! Jaw fällt, richtig?

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


2 - Befehlspalette

Die Befehls-Palette von Sublime ist ein Segen für diejenigen, die die Maus möglichst wenig anfassen möchten (mehr dazu in Kürze). 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 Ausschnitten 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 + Umschalttaste + 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 unscharfe Suche nutzen können. Daher müssen Sie nicht das gesamte Wort eingeben.

Merken Sie sich diesen Tastaturbefehl und verwenden Sie ihn häufig.


3 - Paketkontrolle

Package Control wurde von Will Bond erstellt und ist ein leistungsstarker Paket-Manager, mit dem Sie direkt im Code-Editor alle Pakete (oder Plug-Ins) installieren können, die Sie sich vorstellen können. Benötigen Sie Zen-Codierung? Installieren Sie es in drei Sekunden. Was ist mit der Prefixr-Unterstützung oder der Hervorhebung der CoffeeScript-Syntax? Das Setup erfordert nur ein paar Tastatureingaben. Sie müssen das Web nicht mehr nach dem richtigen Plugin durchsuchen und dann nachsehen, wo es installiert werden muss.

Um die Paketkontrolle zu installieren, besuchen Sie die Website von Will Bond. Kopieren Sie den bereitgestellten Code-Code, kehren Sie zu Sublime Text zurück und drücken Sie Steuerung +', und fügen Sie den Ausschnitt ein und starten Sie ihn erneut. Sie sind fertig!

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


4 - TextMate-Designs

Wahrscheinlich verwenden Ihre Mac-Leser derzeit TextMate. Glücklicherweise bietet Sublime Text volle Unterstützung für TextMate-Themen. Das bedeutet, dass Ihr benutzerdefiniertes Farbschema ohne Konfigurationseinstellung auf Sublime Text migriert werden kann. Legen Sie es einfach in Ihrem "Packages" -Verzeichnis ab.


5 - Nettuts + Holen

Wie oft haben Sie beispielsweise HTML5 Boilerplate oder die jQuery-Bibliothek manuell heruntergeladen? Das ist verschwenderisch. Wäre es nicht einfacher, einen kurzen Tastendruck auszuführen und sie sofort in das aktuelle Projekt herunterzuladen? Natürlich wäre es! Nettuts + Fetch ist die Lösung.

Installieren Sie es über Package Control und suchen Sie dann nach "Abrufen: Remote-Dateien verwalten". Dadurch werden zwei Objekte zum Abrufen einzelner Dateien bzw. Pakete angezeigt. Zwei wurden für Sie bereitgestellt.

Um dies zu testen, erstellen Sie eine neue Datei, suchen Sie in der Befehlspalette nach "Abrufen", wählen Sie "Einzelne Datei -> jQuery" und beobachten Sie, dass die neueste Version der Bibliothek sofort hinzugefügt wird. Versuchen Sie anschließend, ein gesamtes Paket zu installieren, und staunen Sie.


6 - Gehe zu Symbol

Rufen Sie eine Klasse oder eine Liste mit Funktionen auf, die Sie zur Verfügung haben Befehl + r, Daraufhin wird eine Liste aller Symbole auf der Seite angezeigt. Beachten Sie, wie wir das verwenden @ Symbol, um die Methoden anzuzeigen.

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

Wenn Sie dies mit den Instant File Switching-Funktionen von Sublime kombinieren, wird dieser Befehl besonders hilfreich. Stellen Sie sich vor, Sie müssen bearbeiten style.css, und insbesondere die .Box Klasse innerhalb dieser Datei; Art Befehl + p, style @ box, und du bist da!


7 - Präfix

Prefixr ist ein Webdienst, der automatisch die erforderlichen CSS-Herstellerpräfixe auf Ihre Stylesheets anwendet, sodass Sie sich nicht merken müssen, welche Anbieter für eine bestimmte CSS3-Eigenschaft verwendet werden sollen. Das Prefixr-Plugin bringt diese Funktionalität direkt in Ihren Editor!

Wenn Sie das Plugin über Package Control installiert haben, wählen Sie den Inhalt Ihres Stylesheets aus und lösen Sie das Plugin durch Eingabe aus Strg + Befehl + x. 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. Das Plugin "Advanced New File", das wie immer über Package Control installiert werden kann, behebt dies.

Nach der Installation geben Sie ein Befehl + Wahl + n, und Sie sehen ein neues Panel am unteren Rand.

Das Fantastische an diesem Plugin ist, dass Sie auch Dateien in Ordnern erstellen können, die noch nicht existieren. Vielleicht müssen Sie ein neues erstellen scripts.js Datei, aber Sie haben die noch nicht erstellt js Verzeichnis. Das ist okay; Das Plugin kann den Ordner erstellen, falls er noch nicht vorhanden ist. Geben Sie einfach den vollständigen Pfad zur gewünschten neuen Datei ein und schon kann es losgehen.

Erstellen wir eine neue jQuery.js-Datei in einer js / libs Verzeichnis, das noch erstellt werden muss; Wahl + Befehl + n, js / libs / jquery.js, sparen, Befehl + Umschalttaste + p, "Abrufen", "Einzeldatei", "jQuery". Wir haben jetzt in wenigen Sekunden eine Verzeichnisstruktur 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 "Default Preferences" -Datei im Preferences-Menü, scrollen Sie nach unten und entfernen Sie den Eintrag "Vintage" aus dem ignored_packages Array.

Jetzt drücken Flucht, und du bist im Befehlsmodus! Sie werden feststellen, dass die Vi-Tastenkombinationen von Sublime ziemlich genau sind!


10 - Native Snippets

Alle Ausschnitte in Sublime Text beziehen sich auf eine einzelne Datei und ermöglichen die Fertigstellung von Registerkarten sowie Standardwerte. Um ein neues Snippet zu erstellen, wählen Sie "Extras -> Neues Snippet". In dieser neuen Datei können Sie innerhalb der tag, fügen Sie Ihren Ausschnitt ein. Sie können auch einen Tabulatorauslöser und einen Bereich auswählen, um sicherzustellen, dass auf das Snippet nur von einem bestimmten Dateityp aus zugegriffen werden kann.

Speichern Sie die Datei mit einem .sublime-schnipsel Erweiterung und testen Sie es!


11 - Versionsausschnitte

Während Sublimes native Snippets sicherlich die Arbeit erledigen, ziehe ich bei größeren Snippets lieber GitHub Gists und Versionskontrolle vor.

Beginnen Sie mit der Installation des "Gist" -Plugins über Package Control. Dies gibt uns nun eine Handvoll neuer Optionen in der Befehlspalette.

Wenn Sie versuchen, eine neue Gist zu erstellen, müssen Sie zuerst das Plugin mit Ihren GitHub-Anmeldeinformationen bereitstellen. 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 Befehlsleiste auflisten, indem Sie "Gist: Open Gist" wählen.

Das Beste daran ist, dass Sie, wenn Sie bereits vorhandene Snippets durch gist.github.com verzweigen, diese automatisch in Sublime Text zur Verfügung stellen können - sowie kostenlose Versionskontrolle für Ihre Snippets!


12 - Build-Systeme

Das Build-System von Sublime ermöglicht die Anwendung von Keybindings, die an externe Programme wie CoffeeScript, Sass, Grunt und andere weitergeleitet werden können. Das heißt, anstatt zum Build-Befehl zum Terminal zu wechseln, können Sie dasselbe direkt vom Editor aus erledigen.

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

"cmd": ["coffee", "- c", "$ file"], "selector": "source.coffee", "path": "/ usr / local / bin /"

Während uns mehrere Optionen zur Verfügung stehen, bleiben wir vorerst bei diesen drei Optionen. cmd Gibt den Befehl an, der ausgeführt werden soll, zusammen mit allen Argumenten und Flags. In diesem Fall führen wir die aktuelle Datei über den CoffeeScript-Kompilierungsbefehl aus. Zweitens, Pfad ist nur erforderlich, wenn CoffeeScript nicht in Ihrem Basispfad installiert ist.

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

Addy Osmani hat einen fantastischen Artikel über die Build-Funktionen von Sublime Text.


13 - Ablenkungsfreies Bearbeiten

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


14 - Die Vogelperspektive

Eine herausragende Funktion von Sublime ist die einzigartige Seitenleiste, die einen Blick auf die aktuelle Datei aus der Vogelperspektive bietet. Dies kann für große Dateien äußerst hilfreich sein, da wir in Sekundenschnelle eine Datei scannen können, ohne die Seite manuell scrollen zu müssen.


15 - Mehrere Spalten

Möchten Sie mehrere Dateien innerhalb eines Fensters bearbeiten? Sublime bietet eine Handvoll geteilter Ansichten, einschließlich Zeilen und Spalten. Navigieren Sie zu Ansicht -> Layout Um die verfügbaren Optionen anzuzeigen, und merken Sie sich die Tastaturbefehle, da Sie diese Funktion häufig verwenden!


16 - Live-CSS-Färbung

Das "Live CSS" -Plugin ist einfach, aber hilfreich. Der Hintergrund eines Farbwerts in Ihrem Stylesheet wird automatisch entsprechend dem von Ihnen festgelegten Wert gesetzt. Sicherlich ist es eine kleine Annehmlichkeit, aber trotzdem 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. Wenn Sie bedenken, wie häufig wir dies tun, wäre es nicht klug, eine Handvoll Platzhalterausschnitte zu erstellen? Nun, das Placeholder-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 eignet sich perfekt für den Job.


18 - Einrückungslinien

Eine überraschend seltene Bequemlichkeit, die in Notepad ++ zu finden ist, sind Einrückungshilfen. Beim Durchsuchen massiver Dateien kann es manchmal schwierig sein, die Einrückung ohne etwas Hilfe anzupassen.

Die Einrückungslinien von Sublime bieten hilfreiche gepunktete Bilder, um dies zu beheben.


19 - Einfache Konfiguration

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

Um beispielsweise die "Einzugsrichtlinien" zu deaktivieren, öffnen Sie die Einstellungsdatei "Standard" und suchen nach draw_indent_guides (mit Befehl + i) und seinen Wert auf falsch. Einfach! Überprüfen Sie unbedingt 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 gewechselt werden soll, tun Sie dies falsch. Die sofortige Dateiumschaltung von Sublime ist unglaublich und schneller, als Sie es in einem Editor je erlebt haben.

Art Befehl + p um eine Liste aller Dateien im aktuellen Projekt aufzurufen. 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? Art .js. Während Sie Ihre Suche eingeben, wird Sublime Text blitzschnell zur obersten Datei wechseln, die Ihrer Suchanfrage entspricht.

Dies ist die bevorzugte Methode, um zu neuen Dateien zu navigieren. Die Seitenleiste ist ein letzter Ausweg.


21 - Tastenbindungen

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

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

Die Standard-Keybindings-Datei konnte zwar bearbeitet werden, dies ist jedoch eine schlechte Praxis, da bei einem Sublime-Update Ihre Anpassungen zurückgesetzt werden. Stattdessen ist es am besten, die User Key Bindings-Datei zu bearbeiten.

["keys": ["alt + 1"], "command": "move_to_group", "args": "group": 0, "keys": ["alt + 2"], "command ":" move_to_group "," args ": " group ": 1, " keys ": [" alt + 3 "]," command ":" move_to_group "," args ": " group ": 2 , "keys": ["alt + 4"], "command": "move_to_group", "args": "group": 3]

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


22 - Live-Suche

Wenn wir eine Datei suchen müssen, greifen wir oft auf ein "Suchen und Ersetzen" -Feld zurück, was Zeit braucht. Drücken Sie stattdessen Befehl + i um eine Live-Suche in der aktuellen Datei durchzuführen. Sie werden staunen, wie viel schneller diese Methode ist.


23 - Code-Faltung

Natürlich unterstützt Sublime Text die Code-Faltung auf mehreren Ebenen. Angenommen, Sie arbeiten an einem Stylesheet und möchten alle Eigenschaften ausblenden. Wählen Sie entweder "Bearbeiten -> Kaltfalten -> Alle falten" oder drücken Sie Befehl + k + 1.

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

Es kann einige Zeit dauern, bis die Tastenkombinationen gespeichert werden, aber es lohnt sich.


24 - Entwicklungsversion

Vergessen Sie nicht, dass Sublime Text 2 aktiv entwickelt 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, stoßen Sie selten auf Fehler.


25 - Sofortige Ausrichtung

Das Alignment-Plugin von Will Bond passt Ihren Code sofort an, um einen schöneren Code zu erhalten. Meist wird es verwendet, um das Gleichheitszeichen sicherzustellen, =, für variable Zuordnungen.

Das über die Paketsteuerung installierte Alignment-Plugin kann durch Auswahl eines entsprechenden Codes und Drücken von aktiviert werden Strg + Umschalt + a.

In der Tat übersetzt das Plugin:

var zuerst = 'Joe'; var last = 'Schwarz'; var job_title = 'Tod'; var status = 'Im Urlaub';

In:

var zuerst = 'Joe'; var last = 'Schwarz'; var job_title = 'Tod'; var status = 'Im Urlaub';

Einfach, aber hilfreich!


Schlussgedanken

Natürlich gibt es in Sublime Text 2 noch viele weitere Geheimnisse und Tricks, aber mit dieser Liste können Sie loslegen! Wenn Sie mehr über diesen fantastischen Editor erfahren möchten, lesen Sie unseren bevorstehenden Kurs: "Perfekter Workflow in Sublime Text 2."