Sublime Text für Front-End-Entwickler

Der folgende Beitrag ist ein Gastbeitrag von Wes Bos. Wes schreibt schon seit einiger Zeit über Sublime Text und all die großartigen Dinge, die es für die Codebearbeitung bietet. Er hat jetzt ein neues Buch und ein Videopaket herausgebracht: Sublime Text Power User. Ich habe ihn kürzlich auf einer Konferenz getroffen und seinen Vortrag über Sublime Text gesehen. Die Konferenz summte davon. Anfänger klappten die Kinnlade herunter und erfahrene Profis lernten neue Tricks. Hier wird Wes einige seiner besten Tipps für uns Front-End-Entwickler teilen.

Da Sublime Text einer der derzeit angesagtesten Editoren für die Webentwicklung ist, ist es wichtig, die Besonderheiten des Editors im Hinblick auf die Front-End-Entwicklung zu kennen. Dieser Beitrag ist kein Schritt-für-Schritt-Leitfaden zu Sublime Text, sondern steckt voller heißer Tipps, Tricks und Pakete, die Sie mit Sublime Text zum Genialen machen.

Syntax-Hervorheber

Es ist fast 2015 und **viel** hat sich in den letzten Jahren geändert – CSS hat mit neuen Funktionen explodiert, JavaScript hat neue Funktionalitäten und Syntax eingeführt und wir haben eine Handvoll neuer Sprachen, die in HTML, CSS oder JavaScript kompiliert werden. Die mit Sublime gelieferten Syntax-Hervorheber sind alt und für einige Sprachen sogar nicht verfügbar.

Die folgenden Pakete ermöglichen die bestmögliche Syntaxhervorhebung. Selbst wenn Sie bereits Syntax-Hervorheber für alle Ihre Sprachen haben – lesen Sie dies durch, da Sie vielleicht ein paar davon ändern möchten.

Der JavaScript Next Syntax-Hervorheber bietet eine bessere Codehervorhebung als der Standard-JavaScript-Hervorheber sowie Unterstützung für ECMAScript 6-Funktionen wie Module, prägnante Methoden, Pfeilfunktionen, Klassen, Generatoren und Accessoren (ES5).

CSS3 bietet Hervorhebung für jede CSS3-Funktion der Spezifikation. Das sind alle neuen Funktionen sowie Dinge, die noch nicht implementiert sind. Dies sollte jede vorhandene CSS-Syntaxhervorhebung vollständig ersetzen.

Sass-Benutzer sollten das SCSS-Paket installieren. Vorsicht – es ist ein häufiger Fehler, nach Sass zu suchen und es zu installieren, wenn Sie eigentlich nicht die Sass-Syntax schreiben, sondern die Scss-Syntax – stellen Sie sicher, dass Sie die richtige aktiviert haben, damit alle anderen Pakete, wie Emmet, weiterhin ordnungsgemäß funktionieren.

Natürlich gibt es auch Stylus und LESS-Pakete, falls dies Ihre bevorzugte CSS-Waffe ist.

Schreiben Sie Coffeescript? Stellen Sie sicher, dass Sie das Paket Better-Coffeescript installiert haben. Es ist wichtig, das Paket better-coffeescript zu verwenden, da das normale CoffeeScript-Paket nicht mehr gepflegt wird. Es gibt auch ein TypeScript-Paket für diejenigen, die in diesem Lager sind.

Das Haml-Paket erweitert das Standard-Haml-Paket um verschachtelte Sprachen wie JS, CSS, Sass usw., damit Sie sowohl Ihre Hervorhebung als auch Ihre Snippets beibehalten können. Die Pakete Slim und Jade bieten dringend benötigte Hervorhebung für diese neueren Markup-Sprachen.

Pakete und Plugins

Sublime verdankt einen Großteil seiner Popularität dem endlosen Angebot an interessanten und hilfreichen Paketen, die die Community erstellt hat. Wenn Sie neu bei Sublime sind, können Sie Ihre Pakete mit Package Control hinzufügen und verwalten.

Wir könnten den ganzen Tag über die besten Sublime-Pakete reden, und ich hoffe, Sie tun das in den Kommentaren, aber hier ist eine Handvoll unverzichtbarer Pakete für einen Front-End-Entwickler, der mit HTML, CSS und JavaScript arbeitet.

Color Highlighter

Wenn Sie mit Farben in einer Stylesheet arbeiten, ist es hilfreich, eine Art visuelle Hilfe zu haben, die Ihnen die tatsächliche Farbe anzeigt. Color Highlighter scannt Ihre Stylesheet und färbt Ihren Farbnamen, Hex-Code oder RGBA, indem es den Hintergrund mit dieser Farbe füllt. Es gibt Optionen, mit der Farbe zu unterstreichen oder sie als Kreis in der Leiste anzuzeigen.

Kürzlich wurde die Unterstützung für Sass-, LESS- und Stylus-Variablen hinzugefügt, was dieses Werkzeug für fast jeden Workflow bereit macht!

Emmet

Fast jeder kennt Emmet bereits und viele nutzen es seit den Zen Coding-Zeiten. Ich habe jedoch festgestellt, dass viele Entwickler einige der leistungsstarken Funktionen von Emmet verpassen.

HTML

Emmet ist großartig, um HTML sehr schnell zu schreiben. Geben Sie einfach den CSS-Selektor für das gewünschte Markup ein und drücken Sie Tab. Verwenden Sie Jade, Slim oder Haml? Emmet funktioniert auch mit diesen Markup-Sprachen!

Dies kann so einfach oder so kompliziert sein, wie Sie möchten. Hier sind ein paar Beispiele – schauen Sie sich unbedingt das Cheat Sheet für alle möglichen Verwendungen von Emmet mit HTML an.

• `element` + `Tab` erstellt dieses Element und platziert den Cursor darin
  • `span` + `Tab` → <span></span>
  • `p` + `Tab` → <p></p>
• `element.className` oder `element#ID` + `Tab` erstellt dieses Element mit den zugehörigen Klassen oder IDs
  • `span.hello` + `Tab` → <span class="hello"></span>
  • `p.odd.warning` + `Tab` → <p class="odd warning"></p>
  • `div#contact` + `Tab` → <div id="contact"></div>
• `element>childElement` + `Tab` erstellt verschachtelte Elemente
  • `ul>li` + `Tab` → <ul><li></li></ul>
  • `p>span` + `Tab` → <p><span></span></p>
• `[element*5]` + `Tab` erstellt dieses Element mal die Anzahl
  • `p.hello*2` + `Tab` → <p class="hello"></p><p class="hello"></p>

Sie können auch das $ als Platzhalter für die Inkrementierung verwenden. Verwenden Sie $$ für eine führende Null.

`li.item$*3` + `Tab` →

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

Eckige Klammern für Attribute und geschweifte Klammern für den Text eines Elements.

`figure*2>img[src=”dog$.jpg”]+figcaption{This is dog $}` →

<figure>
  <img src="dog1.jpg" alt="">
  <figcaption>This is dog 1</figcaption>
</figure>
<figure>
  <img src="dog2.jpg" alt="">
  <figcaption>This is dog 2</figcaption>
</figure>

CSS

Das Erlernen von Emmet für CSS ist eine der besseren Investitionen, die ein Front-End-Entwickler tätigen kann. Es beschleunigt Sie nicht nur, sondern reduziert auch die dummen Fehler, die wir alle machen.

Emmet für CSS funktioniert, indem Sie die ungefähre CSS-Eigenschaft/den ungefähren Wert eingeben, den Sie wünschen. Es gibt keine Snippets, Emmet arbeitet mit etwas, das als Fuzzy Matching bezeichnet wird und eine bestmögliche Vermutung basierend auf Ihren Eingaben anstellt.

• posrel → position: relative;
• posab → position: absolute;
• fl → float:
• fr → float: right;
• db → display: block;
• dib → display: inline-block;
• tdn → text-decoration: none;
• c → color: #
• w → width:
• w100 → width: 100px;
• w100p → width: 100%;
• p → padding:
• p10 → padding: 10px;
• p10p → padding: 10%;
• bt1-s-red → border-top: 1px solid red;

Sie verstehen, worum es geht – es lohnt sich, die Zeit zu investieren, um Ihr Gehirn neu zu trainieren, diese Fuzzy-Matches zu verwenden, anstatt die gesamte Eigenschaft und den gesamten Wert auszuschreiben.

Sublime Linter

Das Linting Ihres Codes ist ein wichtiger Schritt im Prozess. Wenn Sie noch nie einen Linter verwendet haben, ist dies ein Werkzeug zur Codequalität, das nach Fehlern und schlechten Praktiken sucht und Sie darauf aufmerksam macht, wenn Sie diese machen.

Mit Sublime Linter können Sie ganz einfach Echtzeit-Linting-Feedback für praktisch jede Sprache erhalten. Als Front-End-Entwickler sollten wir unser JavaScript und möglicherweise unser CSS linten. Wenn Sie einen Fehler machen, platziert Sublime Linter eine Markierung in der Leiste, die Sie auf den Fehler aufmerksam macht.

Themes und Farbschemata

Verwenden Sie immer noch das Standard-Sublime-Theme und Farbschema? Es könnte an der Zeit sein, ein paar verschiedene auszuprobieren. Es gibt zwei Teile, um die Farbe von Sublime zu ändern – ein Farbschema ändert die Farbe Ihrer Syntaxhervorhebung des Codes, während ein Theme die Farbe der Editor-Chrome wie Tabs, Seitenleiste und Befehlspalette ändert.

Ab der neuesten Version von Sublime Text 3 können wir nun spezifische Symbole in der Seitenleiste platzieren.

Ob Sie Hell oder Dunkel bevorzugen, es gibt bestimmt ein Theme, das Ihnen gefällt. Hier sind einige beliebte

Solarized Dark

Solarized ist ein fantastisches Theme, das auch eine helle Variante bietet. Es ist in fast jedem Editor verfügbar und hat sich zu einem beliebten Standard bei vielen Top-Entwicklern entwickelt.

Cobalt2

Dies ist mein eigenes Theme, das in den letzten 5 Jahren angepasst und verfeinert wurde. Es basiert auf dem ursprünglichen Cobalt-Theme und hat viele Verbesserungen, mit Schwerpunkt darauf, augenfreundlich mit klarem und deutlichem Kontrast zu sein.

Seti UI

Ein neues Theme auf der Szene, dies ist ein sehr dunkles Theme, das kräftige blaue Farbakzente bietet.

GoTo Anything

Wenn Sie von einem anderen Editor wie Coda, Textmate oder Dreamweaver kommen, verlassen Sie sich wahrscheinlich auf die Seitenleiste, um Ihre Dateien zu navigieren. Sublime hat das Konzept von GoTo Anything eingeführt. Im einfachsten Fall können Sie es verwenden, um jede Datei in Ihrem geöffneten Ordner oder Projekt zu öffnen. Drücken Sie einfach ⌘ (Strg unter Windows) + p, und es öffnet sich eine Liste, in der Sie mit der Eingabe des Dateinamens beginnen können. Dieses Dropdown unterstützt Fuzzy Matching, sodass Sie sich keine Sorgen machen müssen, es genau richtig zu buchstabieren oder sogar anzugeben, in welchem Ordner es sich befindet.

Sobald Sie sich damit vertraut gemacht haben, unterstützt GoTo Anything Zeilennummern von Dateien jquery.js:205, Spaltennummern jquery.js:205:15 sowie etwas namens Symbole jquery.js@ajax, das es Ihnen ermöglicht, schnell zu Funktionen, Methoden oder Selektoren zu springen.

Was ist dein Favorit?

Sublime Text ist vollgepackt mit nützlichen Funktionen und Paketen. Genug, um ein Buch zu füllen!

Was sind Ihre Lieblingstipps, Tricks oder Pakete?