Werden Sie ein Power-User von Sublime Text

Wählen und ändern Sie die Farbe in Photoshop

Wes Bos wird diskutieren moderner Workflow und Tools für Frontend-Entwickler beim Generieren Sie San Francisco am 15. Juli. Buchen Sie jetzt Gründungsmitglied werden und 50 Prozent Rabatt auf Tickets für alle zukünftigen Generate auf der ganzen Welt erhalten - fürs Leben!

Die Investition in Webentwicklungstools ist eines der wichtigsten Dinge, die Sie als Entwickler tun können. Dies macht Sie nicht nur produktiver, sondern erhöht auch die Qualität Ihres Codes erheblich. In diesem Artikel werde ich mich auf den Sublime Text-Editor konzentrieren und untersuchen, wie Sie das Beste daraus machen können.



Beherrsche die Befehlspalette

Die Befehlspalette ist einer der nützlichsten und leistungsstärksten Teile von Sublime Text. Während der Editor mit einer Maus und dem Menüsystem verwendet werden kann, kann fast jeder Befehl im Editor durch Öffnen der Befehlspalette (cmd + Umschalt + P) ausgeführt werden. Es ist immer schneller, Tastaturkürzel oder das Befehlsmenü zu verwenden.

Die Befehlspalette verwendet die 'Fuzzy-Suche', dh Sie müssen nicht den Namen des gesamten gesuchten Befehls oder sogar ein ganzes Wort eingeben. Geben Sie einfach ein paar Buchstaben ein, die denen ähneln, nach denen Sie suchen, und die Liste filtert nach Optionen. Zum Beispiel 'ssx'-Filter für alle verfügbaren Set Syntax-Befehle, während' sx js'-Filter für alle verfügbaren JavaScript-Syntax-Textmarker.

Öffnen Sie die Befehlspalette und sehen Sie, was möglich ist. Sie können die Syntax eines Dokuments ändern, eine Datei umbenennen, Tastenkombinationen aufrufen und häufig verwendete Codeteile einfügen. Wenn Sie neue Funktionen über Pakete installieren, werden die Befehle und Aktionen, die sie verfügbar machen, zur Befehlspalette hinzugefügt. Stellen Sie sich die Regel auf, dass Sie jedes Mal, wenn Sie mit der Maus durch die verschachtelte Menüstruktur suchen, die Befehlspalette öffnen und Ihren Befehl von dort aus ausführen!

Schluss mit der Seitenleiste

In Sublime Text gibt es eine weitere Palette mit dem Namen 'Goto Anything', mit der Sie zu jeder Datei, Definition, Funktion, Methode, Auswahl, Zeile oder Spalte in Ihrem Projekt springen können. Um Goto Anything zu öffnen, geben Sie cmd + P ein und Sie werden mit einer Liste der verfügbaren Dateien aufgefordert. Der Fuzzy-Abgleich gilt weiterhin, sodass wir den Namen jeder gesuchten Datei eingeben und eine schnelle Vorschau anzeigen können, bevor wir sie öffnen.

Der größte Vorteil hierbei ist, dass wir weder unsere Seitenleiste nach der gewünschten Datei durchsuchen noch tief verschachtelte Ordner durchsuchen müssen. Es ist ziemlich einfach, sich neu zu trainieren, um die Seitenleiste nicht zu verwenden, und Sie werden viel produktiver.

Pakete

Einer der Gründe, warum Sublime Text ein so fantastischer Editor ist, ist die Community, die Plugins oder 'Pakete' dafür erstellt. Wie bei jeder Software deckt die Basisinstallation den größten Teil der Funktionalität ab, lässt jedoch häufig Lücken für bestimmte Arten von Workflows. Zum Glück stehen fast 3.000 Pakete zur Verfügung, die alles von der FTP-Integration bis zum Hinzufügen praktischer JavaScript-Snippets abdecken.

Um auf die Pakete zugreifen zu können, müssen Sie zuerst Package Control installieren (besuchen Sie packageControl.io und befolgen Sie die Anweisungen auf der Registerkarte 'Installation'). Öffnen Sie als Nächstes Ihre Befehlspalette und geben Sie 'Paket installieren' ein, um eine Liste der verfügbaren Pakete aufzurufen.

Welche Pakete sind die besten? Es hängt davon ab, welcher Entwicklertyp Sie sind. Als Frontend-Entwickler sind dies einige meiner Favoriten:

  • Farbmarker - Markiert RGB, Hex und
  • Sass / Less / Stylus-Variablen in Ihrem CSS. Keine Ahnung mehr, welche Farbe # D12028; ist!
  • AutoFileName - Bietet die Vervollständigung von Ordnern und Dateien, wenn Sie mit Link-Tags und Bildpfaden arbeiten
  • Emmet - Der beste Weg, um HTML / Haml / Jade und CSS / SCSS / Stylus / Less zu schreiben
  • JS Hint Gutter - Bietet Echtzeit-JavaScript-Flusenwarnungen und -fehler in der Gosse des Editors

Git integrieren

Als Webentwickler sind Git und GitHub ein wesentlicher Bestandteil der meisten unserer Workflows. Während Sublime Text die Notwendigkeit der Befehlszeile oder der GitHub-Benutzeroberfläche nicht vollständig ersetzt, gibt es einige Pakete, die bei der Verwendung von Git direkt aus dem Editor heraus helfen.

Als erfahrener Git-Benutzer finde ich diese Tipps sehr hilfreich, um den Status meines Repos zu überprüfen. Für Benutzer, die Git noch nicht kennen, sind diese Pakete eine fantastische Möglichkeit, sich mit Git vertraut zu machen.

  • GitHub Open in Sublime - Eine Chrome-Erweiterung, die eine einfache Möglichkeit bietet, eine Datei in einer bestimmten Zeile direkt von GitHub aus zu öffnen
  • GitSavvy - Ein Paket für Sublime Text 3, das grundlegende Befehle wie Init, Hinzufügen, Festschreiben, Ändern, Auschecken, Ziehen und Drücken über die Befehlspalette unterstützt. Außerdem werden Funktionen für Inline-Diffing, (Aufheben) Staging von Codeblöcken, Beschuldigen und Anzeigen von Commit-Metadaten eingeführt. Die vielleicht nützlichste Funktion ist ein Dashboard, über das Sie einen visuellen Überblick über den Status des gesamten Repos erhalten und eine beliebige Anzahl von Aktionen für Ihr Repo ausführen können
  • GitHub-Integration - Ermöglicht Benutzern das Öffnen von GitHub direkt aus Sublime Text und das Referenzieren von Ausgabenummern in Commits, ohne den Editor zu verlassen
  • GitGutter - Während Sie Dateien bearbeiten, fügt dieses Paket winzige Symbole in die Rinne Ihrer Seitenleiste ein, die den Status der aktuellen Zeile anzeigen. Ein grünes Plus für neue Linien, ein lila Quadrat für geänderte Linien und rote Pfeile für gelöschte Bereiche

Wes Bos wird in San Francisco über moderne Workflows und Tools für Frontend-Entwickler diskutieren

Wes Bos wird in San Francisco über moderne Workflows und Tools für Frontend-Entwickler diskutieren

Bessere Hervorhebung der Syntax

Das ColorHighlighter-Paket unterstreicht oder hebt Hex-Codes, RGBA-Werte und Präprozessorvariablen in Ihrem CSS hervor

Fotografiekurs & Zertifizierung des Hollywood Art Institute
Das ColorHighlighter-Paket unterstreicht oder hebt Hex-Codes, RGBA-Werte und Präprozessorvariablen in Ihrem CSS hervor

Syntax-Textmarker sind dafür verantwortlich, die Farben Ihres Codes zu ändern. Wenn Sie eine der integrierten verwenden, haben Sie wahrscheinlich bemerkt, dass bei der Arbeit mit modernen Sprachen wie CSS3 oder JavaScript zu wünschen übrig lässt.

Da die Standard-Textmarker weit hinter den neuesten Sprachfunktionen zurückbleiben, sollten Sie die folgenden installieren. Dies ist wichtig, da viele der leicht auffindbaren Textmarker - wie CoffeeScript und SCSS - nicht mehr gewartet werden und keine vollständige Sprachunterstützung bieten.

Verbessern Sie die Visualisierung

Die meisten von uns verwenden Sublime Text möglicherweise zwischen vier und acht Stunden pro Tag, und während wir uns häufig um die Ästhetik einer Website-Oberfläche kümmern, achten die meisten Entwickler kaum oder gar nicht auf die Verbesserung der Oberfläche unseres Editors. Ich könnte ein ganzes Magazin mit visuellen Verbesserungen füllen, aber die folgenden Einstellungen wirken sich am stärksten auf Ihre tägliche Codierungsproduktivität aus.

Fügen Sie zunächst Folgendes in Ihre Einstellungsdatei ein, die unter Einstellungen> Einstellungen - Benutzer (cmd +,) verfügbar ist.

{ 'caret_style': 'solid', 'wide_caret': true, 'highlight_line': true, 'highlight_modified_tabs': true, 'line_padding_bottom': 1, 'line_padding_top': 1, 'bold_folder_labels': true }

Wenn Sie caret_style auf solid und wide_caret auf true setzen, erhalten Sie ein schönes großes, mutiges Caret. Ich finde, dass dies hilfreich ist, wenn es mit Highlight_line gekoppelt wird, da Sie so schnell feststellen können, wo Sie sich in einem Dokument befinden, wenn der Kontext zwischen Ihrem Editor und Ihrem Browser wechselt.

Ein dummer Fehler, den wir alle machen, ist zu vergessen, unsere Arbeit zu speichern, bevor wir unseren Code ausführen oder aktualisieren. Wenn Sie Highlight_modified_tabs auf true setzen, erhalten Sie einen visuellen Hinweis darauf, wann sich Ihre Registerkarte im nicht gespeicherten Status 'Dirty' befindet. Das Standardthema 'Erhabener Text' färbt den Text Ihrer Registerkarte orange, andere Themen geben Ihnen jedoch einen gelben Kreis in der Ecke Ihrer Registerkarte.

JSHint Gutter bietet Echtzeit-Feedback zu Fehlern, potenziellen Problemen und stilistischen Fehlern

wie man eine Kugel im Mixer macht
JSHint Gutter bietet Echtzeit-Feedback zu Fehlern, potenziellen Problemen und stilistischen Fehlern

Das schnelle Lesen und Grokken von Code ist eine Fähigkeit, die viele gute Entwickler verbessert haben. Indem Sie line_padding_bottom und line_padding_top auf 1 setzen, können Sie zwischen den Codezeilen ein wenig auffüllen oder die Zeilenhöhe erhöhen. Dies passt zwar weniger Code auf Ihren Bildschirm, erleichtert jedoch das Lesen und hilft Ihnen, sich auf den vorliegenden Code zu konzentrieren.

Wenn Sie die Seitenleiste verwenden, können Sie Dateien und Ordner visuell unterscheiden, indem Sie bold_folder_labels auf true setzen, um das verschachtelte Ordnerlayout eines Projekts besser verstehen zu können.

Verwenden Sie projektspezifische Einstellungen

Wir können mehrere Codeordner zu einem 'Projekt' zusammenfassen. Anstatt also jedes Mal, wenn Sie an einem Projekt arbeiten, alle Ihre spezifischen Ordner zu öffnen, können Sie einfach die '.sublime-project'-Datei öffnen. Die wahre Kraft von Projekten in Sublime Text kommt, wenn wir anfangen, projektspezifische Einstellungen zu verwenden. Alle Einstellungen, die wir normalerweise in unserer Master-Datei 'Preferences.sublime-settings' verwenden würden, können in unsere '.sublime-project' -Datei übernommen werden. Ihrem Projektordner können bestimmte Einstellungen für den Einzugstyp, ignorierte Dateien und Ordner und sogar Farbschemata hinzugefügt werden.

Mit projektspezifischen Einstellungen können Sie Ihre .sublime-Projektdatei für Ihr Team freigeben. Es wird empfohlen, die Datei in Ihr Git-Repo einzuchecken, da dies Ihrem gesamten Team ermöglicht, konsistente Einstellungen beizubehalten und Ihre Einstellungen auf mehreren Computern zu synchronisieren.

Fazit

Sublime Text ist zwar einfach im Erscheinungsbild, aber einer der leistungsstärksten Texteditoren überhaupt. Als Entwickler hängt die Qualität Ihres Codes stark davon ab, wie gut Sie Ihre Tools verwenden. Wenn Sie Zeit in den Editor investieren, werden Sie zu einem besseren und runderen Entwickler.

Dieser Artikel hat sich mit einigen der besten Funktionen befasst, die Sublime Text zu bieten hat - aber er beginnt erst hier. Es gibt Hunderte anderer Anpassungen, mit denen der Editor perfekt in Ihren Workflow passt. Ich möchte Sie ermutigen, weiterhin zu lernen, wie Sie Sublime Text am besten verwenden - genau wie Sie weiterhin Programmiersprachen lernen.

Verpassen Sie nicht Wes 'Sitzung moderner Workflow und Tools für Frontend-Entwickler beim Generieren Sie San Francisco . Kannst du es nicht schaffen? Generate ist im September auch in Sydney und London; Weitere Details finden Sie hier . Dieser Artikel wurde ursprünglich in Ausgabe 268 von veröffentlicht Netzmagazin .