Share
Sublime Text 2 ist einer der schnellsten und unglaublichsten Code-Editoren, die seit langem veröffentlicht werden! Mit einem Community- und Plugin-Ökosystem, das so leidenschaftlich ist wie dieses, könnte es für jeden anderen Editor unmöglich sein, aufzuholen. 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.
Sublime ist in aktiver Entwicklung. Wenn Sie wie ich die aktuellste Version der App verwenden möchten, können Sie das Entwicklungsprogramm herunterladen. Sie werden feststellen, dass neue (automatische) Aktualisierungen an jedem zweiten Tag verfügbar sind.
Laden Sie hier einen Dev-Build von Sublime 2 herunter.
Update: Hier ist ein besseres Symbol.
Zu seiner Verteidigung befindet sich Sublime Text 2 noch im Betastatus. Das offizielle Symbol wird sich wahrscheinlich / hoffentlich mit der offiziellen Veröffentlichung ändern. Bis dahin erstellte Nate Beaty ein alternatives Symbol, wenn Sie es vorziehen.
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 Anwendungen / Ordner, dann mit der rechten Maustaste und "Paketinhalt anzeigen". Zum Schluss noch zu Inhalte / Ressourcen /, und ziehen Sie das neue Symbol in das vorhandene Symbol.
Bitte beachten Sie die Tatsache, dass Sie die häufig aktualisierte Version verwenden Entwicklungsversion von Sublime Text. Bei jedem Update wird das Symbol entfernt. Machen Sie sich vor diesem Hintergrund keine Gedanken über das Symbol.
Ähnlich wie bei TextMate können wir die Befehlspalette von Sublime verwenden, indem Sie auf die Werkzeuge Menü oder durch Drücken von Umschalt + Befehl + P, auf dem Mac. Egal, ob Sie eine Voreinstellungsseite besuchen oder in ein Snippet einfügen möchten, all dies können Sie hier erledigen.
Drücken Sie Steuerung oder Befehl + P, Geben Sie den Namen der Datei ein, auf die Sie zugreifen möchten (Fuzzy Finder) und ohne zu drücken Eingeben, Sie werden sofort in diese Datei transportiert. Während Vim und Apps wie PeepOpen eine ähnliche Funktionalität bieten, sind sie bei weitem nicht so schnell wie die Implementierung von Sublime.
Editoren wie TextMate bieten seit langem eine vertikale Auswahl an, was recht ordentlich ist. Bei der Mehrfachauswahl können Sie jedoch mehrere Cursor auf der Seite haben. Dadurch können Sie die Verwendung regulärer Ausdrücke sowie erweiterte Such- und Ersetzungsabfragen drastisch reduzieren. Vielleicht ist eine schnelle visuelle Demonstration in Ordnung ...
Um die Mehrfachauswahl zu aktivieren, haben Sie mehrere Möglichkeiten:
Accentsconagua
Alt oder Befehl Klicken Sie dann in jede Region, in der Sie einen Cursor benötigen.Umschalt + Befehl + L. Steuerung / Befehl + D wiederholt, um weitere Vorkommen dieses Wortes auszuwählen. Alt + F3 unter Windows oder Strg + Befehl + G auf dem Mac. Tolle!! Update: 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ückungshilfslinien anzeigt. Es macht die Seite einfacher zu navigieren und zu formatieren. Sublime Text 2 bietet diese Möglichkeit über ein von Nikolaus Wittenstein erstelltes Plugin.
So integrieren Sie dieses Plugin:
Pakete Mappe. Auf einem Mac würde dieser Pfad sein Anwendungsunterstützung / Sublime Text 2 / Packages Die im vorherigen Tipp (# 6) beschriebenen Schritte sind etwas langweilig, nicht wahr? Stattdessen können wir die hervorragende Sublime Package Control installieren, die den gesamten Prozess optimiert.
Um "Package Control" zu installieren, öffnen Sie Sublime und drücken Sie Strg + '. Fügen Sie als nächstes den folgenden Ausschnitt in die Konsole ein.
import urllib2, os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path (); os.makedirs (ipp) falls nicht os.path.exists (ipp), sonst keine; öffnen (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!
Starten Sie schließlich Sublime Text neu und navigieren Sie zu Einstellungen -> Paketeinstellungen. Wenn die Installation erfolgreich war, wird jetzt ein angezeigt Paketkontrolle Element in dieser Liste.
Wenn Package Control installiert ist, wird das Hinzufügen neuer Plugins und Funktionen unglaublich einfach!
Ein Verwendungsbeispiel finden Sie unter dem nächsten Punkt in dieser Liste.
Wenn Sie der Typ sind, der Ihre Gleichheitszeichen bevorzugt, z. B. in Ihrem JavaScript…
// vor var joe = 'joe'; var johnny = 'johnny'; var quaid = 'quaid'; // nach var joe = 'joe'; var johnny = 'johnny'; var quaid = 'quaid';
… Dieser Prozess kann über das Sublime Alignment Plugin automatisiert werden. Statt sie manuell herunterzuladen und zu installieren, verwenden wir stattdessen die Paketkontrolle (in # 7 beschrieben)..
Umschalt + Befehl + P Umschalt + Befehl + A automatisch ausrichten.
Dieser Vorgang kann für alle typischen Plugins, die wir installieren, wie z. B. Zen Coding, wiederholt werden.
Ich bin ein großer Fan von Vim. Die Leistung, die es bietet, ist verrückt. Die Tatsache, dass ich auf Sublime Text 2 umgestiegen bin, sollte Bände sprechen!
Wenn Sie einen dev-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… Manche von uns Liebe. Der Rest von euch hasst es! :)
Um den Vintage-Modus zu aktivieren, navigieren Sie zu Voreinstellungen / Globale Einstellungen - Standard. Sobald diese Datei geöffnet ist, navigieren Sie ganz nach unten und ändern Sie sie "ignored_packages": ["Vintage"] zu "ignored_packages": []. Starten Sie Sublime neu und drücken Sie die Flucht Taste und tada: Befehlsmodus!
Sie werden möglicherweise feststellen, dass es im Befehlsmodus schwierig sein kann, den Cursor zu finden (insbesondere, wenn Sie beispielsweise Lesezeichen verwenden). Bei mehr als einer Gelegenheit habe ich versucht, den Standort zu finden.
Obwohl dies keine perfekte Lösung ist, versucht ein Plugin namens "SublimeBlockCursor", dieses Problem zu beheben.
Hinweis: Obwohl in der Readme-Datei angegeben ist, dass SublimeBlockCursor installiert werden kann, konnte ich es über Package Control nicht finden. Stattdessen musste ich das Projekt manuell in das kopieren
PaketeMappe.
Manchmal müssen wir alle zusätzlichen Flusen herausfiltern, die unserer Codierung im Weg stehen. Verwenden Sie den "Ablenkungsfreien Modus", um diese Idee so weit wie möglich zu bringen. Diese Option ist über die Option verfügbar Aussicht Speisekarte. Wählen Sie "Enter Distraction Free Mode" oder verwenden Sie die Mac-Tastenkombination, Strg + Umschalt + Befehl + F.
TextMate-Schnipsel und -Themen lassen sich gut auf Sublime Text übertragen. Sie müssen sie nur im Paketordner ablegen -- .tmbundle Erweiterung intakt und Sublime erkennt die Dateien. Dies bedeutet, dass der gesamte Katalog der TextMate-Designs in Sublime funktioniert!
Ich habe zum Beispiel in letzter Zeit ein gutes Stück mit der (fantastischen) Slim-Templating-Engine gearbeitet und brauchte ein besseres Syntax-Highlighting. Fred Wu hat ein Paket für TextMate erstellt, aber tada funktioniert es auch perfekt in Sublime Text! Bei Interesse können Sie das Slim-Paket hier herunterladen. Es enthält sowohl Snippets als auch die Syntaxhervorhebung.
Das Standarddesign für Sublime Text ist ausgezeichnet, aber ich bevorzuge ein benutzerdefiniertes helles und dunkles Thema, Soda, das von Ian Hill erstellt wurde.
Wie von der Github-Seite genommen…
"Wenn Sie ein git-Benutzer sind, können Sie das Design am besten installieren und auf dem neuesten Stand halten, indem Sie das Repo direkt in Ihr Paketverzeichnis im Bereich" Sublime Text 2-Anwendungseinstellungen "klonen."
Wechseln Sie in Ihr Sublime Text 2 Packages-Verzeichnis und klonen Sie das Design-Repository mit dem folgenden Befehl:
Git Klon https://github.com/buymeasoda/soda-theme/ "Theme - Soda"
So konfigurieren Sie Sublime Text 2 für die Verwendung des Designs:
Sublime Text 2 -> Preferences -> User Global Settings "theme": "Soda Light.sublime-theme"
Sublime Text bietet uns verschiedene Möglichkeiten, eine Seite abzufragen (außerhalb der Standardsuchfunktionen)..
Benötigen Sie eine schnelle Möglichkeit, zu einer bestimmten Funktion oder Methode zu navigieren?
Art Strg / Befehl + r ein Popup zu enthüllen, das genau dies zulässt (Beachten Sie die @ Symbol)! Außerdem ist die Suche unscharf, was besonders für große Klassen hilfreich ist.
Was ist, wenn Sie sofort zu einem bestimmten Teil einer HTML-Seite wechseln möchten - zum Beispiel zur div mit einer Klasse von Container. Art Strg / Befehl + p, dann #, und Sie sehen sofort einen Baum Ihres Dokuments.
Um schnell zu einer bestimmten Zeilennummer auf der Seite zu gelangen, können Sie drücken Kontrolle + g. Sie werden jedoch feststellen, dass die Palette wieder hochgezogen wird (Strg / Befehl + p) und die : Symbol. Dies wird von Vim übernommen.
Dies bedeutet zusätzlich zu Kontrolle + g, Sie können auch tippen, Strg / Befehl + p, und dann :ZEILENNUMMER.
Nehmen wir an, Sie sind ein Fan von Normalize.css. Vielleicht 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 noch kopieren und einfügen.
Das einzige Problem bei dieser Methode besteht - wie wir alle festgestellt haben - darin, dass es mehr als möglich ist, dass das Asset (in diesem Fall Normalize.css) vom Ersteller aktualisiert wurde, wenn einige Monate vergangen sind. 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 abzurufen. Das scheint alles langweilig zu sein.
Nettuts + Fetch wurde von Weslly Honorato entworfen und ist die Lösung für unser Dilemma. Es kann über Package Control installiert werden.
Sie verwenden nur zwei Befehle, wenn Sie mit Fetch arbeiten. Zunächst müssen wir einige Dateiverweise speichern. Rufen Sie erneut die Befehlspalette auf und suchen Sie nach "Abrufen". Fürs Erste wählen Sie "Remote-Dateien verwalten".
Das Beste an Sublime Text 2 ist, dass die Konfiguration unglaublich einfach ist. Um Verweise auf Online-Asset-Dateien zuzuweisen, müssen Sie lediglich ein Objekt erstellen (keine Sorge, eines wird nach der Installation für Sie vorbelegt):
So ziehen Sie die neueste Kopie von jQuery ein (wenn Sie kein CDN verwenden möchten):
"files": "jquery": "http://code.jquery.com/jquery.min.js"
Weitere Informationen zur Verwendung von Nettuts + Fetch.
Mit dem Plug-in Nettuts + Prefixr können Sie Ihr gesamtes Stylesheet automatisch aktualisieren, um alle erforderlichen CSS3-Hersteller-Präfixe zu unterstützen. Auf diese Weise müssen Sie niemals die Website selbst besuchen. Sie geben lediglich einen Tastaturbefehl ein und:
.Feld Randradius: 10px; Box-Schatten: 0 0 5px rgba (0,0,0, .4);
… Wird umgewandelt in:
.Feld -webkit-border-radius: 10px; -moz-border-radius: 10px; Grenzradius: 10px; -webkit-box-shadow: 0 0 5px rgba (0,0,0, .4); -moz-box-shadow: 0 0 5px rgba (0,0,0, .4); Box-Schatten: 0 0 5px rgba (0,0,0, .4);
Wählen Sie nach der Installation (über Package Control) Ihr Stylesheet (oder einen einzelnen Block) aus und drücken Sie Strg + Alt + x unter Windows und Linux oder cmd + ctrl + x Unter OS X wird der Code sofort durch den Prefixr-Webdienst ausgeführt.
Sublime Text 2 enthält ein Befehlszeilentool, subl, um mit Dateien in der Befehlszeile zu arbeiten. "
Um es zu verwenden, erstellen Sie einen Symlink zum Tool.
ln -s "/ Applications / Sublime Text 2.app/Contents/SharedSupport/bin/subl" ~ / bin / subl
So lange wie ~ / bin ist in deinem Weg, das sollte den Trick tun!
cd myProject subl .
Weitere Anweisungen finden Sie hier.
Seltsamerweise ist die Möglichkeit, HTML automatisch zu formatieren, nicht Bestandteil des Standard-Builds von Sublime Text. Das Tag-Plugin unter anderem, Hoffnungen Um jedoch eine Lösung zu schaffen, die auf einige Mängel zurückzuführen ist - nämlich beim Umgang mit HTML-Kommentaren -, wird dies zu kurz.
Das Tag-Plugin kann über Package Control installiert werden.
Um die automatischen Formatierungsfähigkeiten zu testen, wird folgender HTML-Code verwendet:
Hallo
Tschüss
… Wird geändert in:
Hallo
Tschüss
Yikes; es sieht schlimmer aus als es ist. Aus meinen Tests wird es falsch platziert Karosserie tag in einer eigenen Zeile und wird beim Umgang mit HTML-Kommentaren pissy. Bis diese Probleme behoben sind (oder eine native Lösung bereitgestellt wird), empfiehlt es sich, einen HTML-Block zur Neuformatierung anstelle der gesamten Seite manuell auszuwählen.
Dem ersten Sublime Text Plugin-Entwickler, der das endgültige "Nettuts + HTML Formatter" -Plugin erstellt und einreicht, wird ein Bonus in Höhe von 200 USD ausgezahlt.
Wenn Sie abenteuerlustig sind, können Sie sich in die große Plugin-Entwicklungsgemeinschaft von Sublime Text einarbeiten und mitmachen. Wir haben ein ausgezeichnetes Tutorial zum Aufbau eines ST-Plugins auf Nettuts +. Stellen Sie sicher, dass es Sie interessiert!
Je mehr ich mit Sublime Text 2 arbeite, desto mehr wird mir bewusst, wie unglaublich es ist. Aber all das würde nichts bedeuten, wenn nicht die Tatsache, dass es ein wahnsinnig schneller Redakteur ist, und noch besser ist es noch nicht fertig!
Wenn Sie noch weiter gehen möchten, besuchen Sie Snippeter, einen Code-Snippets-Manager, der Ihre Codierung verbessert, indem Sie Ihre Code-Snippets online speichern und mithilfe einer integrierten Suchleiste leicht finden. Außerdem können Sie Elemente als Sublime-Text-Snippets exportieren (mit Unterstützung von tabTrigger)..
