This page has been robot translated, sorry for typos if any. Original content here.

Sublime Text 2 für das Frontend vorbereiten

Zum Thema:


Sublime Text 2 FAQSublime Text 2 FAQ

Für erfahrene Programmierer oder Layoutdesigner ist es kein Geheimnis, dass eine angepasste Entwicklungsumgebung (nicht im Sinne einer IDE, sondern allgemeiner) eine wichtige Notwendigkeit ist. Es gab eine Zeit, in der ich das nächste Layout in fast nacktem Notepad ++ auf einem einzigen Monitor erstellte und abwechselnd Photoshop, einen Browser und einen Editor öffnete. Heute, im Zeitalter der "Automatisierung von allem", kann ich mir kaum vorstellen, wie es möglich war, so zu arbeiten.

Sublime Text 2 ist ein beliebter erweiterbarer plattformübergreifender Texteditor, für den viele Plugins geschrieben wurden, wenn nicht für alle Gelegenheiten, dann für viele. In diesem Beitrag werde ich versuchen zu erklären, wie man aus diesem Konstruktor ein praktisches Front-End-Entwicklertool für die Arbeit mit HTML, CSS und JavaScript erstellt. Ein kleiner Haftungsausschluss: Ich arbeite unter Mac OS X, daher kann es sein, dass ich in einigen „plattformübergreifenden Momenten“ etwas nicht beende, aber ich werde versuchen, vollständige Informationen bereitzustellen. Und noch etwas: Ich gebe nicht die ultimative Wahrheit vor und warte auf Ihre Optionen.

Live-Reload- und CSS-Präprozessor-Unterstützung

Warum habe ich zwei so unterschiedliche Dinge in einem Abschnitt zusammengefasst? Alles aufgrund der Besonderheiten einiger Software, auf die ich später noch eingehen werde. Live-Reload (oder Live-Vorschau): Wenn plötzlich jemand nichts mehr weiß, wird im Browser angezeigt, was Sie im Editor getan haben, ohne dass die Seite automatisch aktualisiert werden muss. Mit CSS-Präprozessor-Unterstützung meine ich das Hinzufügen von SASS / SCSS, LESS, Stylus oder was auch immer Sie sonst bevorzugen, zur Sublime Text 2-Syntaxunterstützung sowie das Organisieren der automatischen Kompilierung all dieser Dinge (Build / Watch-System). . Tatsächlich ist all dies in einem Abschnitt zusammengefasst, nicht nur aus dem oben beschriebenen Grund, sondern auch, weil mein (ich denke auch Ihr) Ziel darin bestand, es zu ermöglichen, etwas zu ändern, zum Beispiel in scss- Datei, speichern Sie sie und sehen Sie das Ergebnis sofort im Browser, d. h. automatisieren Sie den Prozess des Kompilierens und Aktualisierens der Seite. Wir haben also die Kette "Datei speichern"> "kompilieren"> "aktualisieren", die all dies logischerweise in einem Abschnitt des Artikels zusammenfasst.

Einführung

Um Plugins bequem zu installieren, zu entfernen und zu aktualisieren, wird Sublime Package Control verwendet . Die Installation ist sehr einfach und wird auf dieser Seite beschrieben . Fast alle Plugins, die Sie möglicherweise benötigen, befinden sich in der Paketsteuerung. Daher ist es bequem, sie hier zu suchen. Ich rate Ihnen nicht, dieses Plugin zu ignorieren und etwas manuell zu installieren, es sei denn, Sie haben einen besonderen Grund dafür. Wir können sagen, dass die Paketkontrolle jetzt der De-facto-Standard für Sublime Text 2 ist.

Alle eingereichten Plugins werden auf GitHub gehostet, fast alle haben eine Readme, die besser zu lesen ist. Es ist nicht sinnvoll, alle Feinheiten hier zu beschreiben, da sich alles ändert. In diesem Artikel werde ich eine kurze Beschreibung geben, und die Autoren selbst beschreiben die Details perfekt.

Haupt-Plugins

Zencode

ZenCoding braucht kaum einen Kommentar, oder? Dieser 2008 von pepelsbey eingeführte „Code-Writing-Beschleuniger“ sparte enorm viel Entwicklungszeit. Es wurde seitdem als Plugin für viele Editoren und IDEs implementiert.

Vor nicht allzu langer Zeit hat das ZenCoding-Plugin einen Erben - Emmet . Wie vorgeschlagen, ist es bereits stabil genug, um verwendet zu werden.

Sublimelinter

Dieses Plugin bietet Flusenunterstützung für viele Sprachen, einschließlich HTML, CSS und JavaScript. Um eine bessere Leistung zu erzielen, installieren Sie node.js und lesen Sie mehr darüber in der Readme-Datei auf GitHub . Im Allgemeinen ist dies eines der Plugins, für die Readme besser vollständig zu lesen ist.

SublimeCodeIntel

Es erweitert die Funktionen der IDE um die Funktionen von Sublime Text 2, indem es "Code Intelligence" und "Smart Autocomplete" hinzufügt. Insbesondere bietet es die Möglichkeit, schnell zur Deklaration zu springen, die automatische Vervollständigung für den Import durchzuführen und Informationen über die Funktion in der Statusleiste anzuzeigen.

Ausrichtung

Dieses Plugin von Sublime Package Control erleichtert das Ausrichten mehrzeiliger und mehrerer ausgewählter Codeabschnitte.

CSSComb

Über CSSComb kann man in einem Geek-Magazin ausführlich lesen Mit diesem nützlichen Tool können Sie Ihr CSS bürsten, indem Sie die Eigenschaften in der angegebenen Reihenfolge anordnen und in Gruppen aufteilen.

HTML5 und jQuery

Hierbei handelt es sich um Sätze von HTML5-Tag-Snippets und jQuery-Methoden, deren vollständige Liste unter Extras> Snippets zu finden ist.

Jsformat

Ein Plugin zum Formatieren von JS / JSON-Code mit dem Dienst jsbeautifier.org und relativ flexiblen Einstellungen. Formatiert den ausgewählten Code oder die gesamte Datei, wenn keine Auswahl vorhanden ist. Es wird nicht überprüft, ob die Datei die Erweiterung * .js hat. Verwenden Sie sie daher mit Vorsicht.

Minifier

Minifier kann JavaScript ( Google Closure Compiler oder UglifyJS ) und CSS ( Reducisaurus ) minimieren . Das gesamte Plugin besteht aus zwei Tastenkombinationen, eine speichert das Ergebnis in der aktuellen Datei und die zweite in einer separaten mit dem Namen name.min.ext.

Präfixr

Ein absolutes Muss für diejenigen, die keine Präprozessoren verwenden, und alle anderen werden sich ebenfalls als nützlich erweisen. Fügt bei Bedarf Herstellerpräfixe (und sogar in der richtigen Reihenfolge) über den Dienst prefixr.com hinzu . Es funktioniert einfach - schreiben Sie die Eigenschaft ohne Präfixe, drücken Sie die Tastenkombination und Sie sind fertig.

SideBarEnhancement

Wie der Name schon sagt, werden der Seitenleiste einige nützliche Verbesserungen hinzugefügt, z. B. der Kontextmenüpunkt "Öffnen mit ..." der Seitenleiste, mit dem Sie eine Datei in einem Programm eines Drittanbieters öffnen können.

Zusätzliche Plugins

Zwischenablage-Verlauf

Vielleicht ist diese Funktionalität im gesamten Betriebssystem besser, aber ich habe genug davon im Editor. Das Plugin speichert den Verlauf der Zwischenablage, sodass Sie nicht nur das zuletzt kopierte Fragment, sondern auch eines der vorherigen einfügen können.

Codierungshilfe

Zeigt unter anderem die Kodierung der geöffneten Datei in der Statusleiste an. Im Allgemeinen ist dies der einzige Grund, warum ich dieses Plugin installiert habe, aber es verfügt über andere Funktionen, z. B. kann es warnen, dass eine in der falschen Codierung geöffnete Datei beschädigt werden kann.

Platzhalter

Müssen Sie häufig Fische in den Code einbetten? Für alle Liebhaber von Lorem Ipsum ist dieser Satz von Schnipsel definitiv nützlich. Zusätzlich zu einfachem Text können Absätze, Listen, Bilder usw. eingefügt werden.

Thema - Soda

Dies ist meine subjektive Empfehlung für Mac OS X-Besitzer. Das Soda-Thema zeichnet die native Sublime Text 2-Oberfläche. Es gibt zwei Farbvarianten - Hell und Dunkel sowie Unterstützung für Retina-Displays. Das Thema ist jedoch für drei Betriebssysteme verfügbar.

Live-Reload- und CSS-Präprozessor-Unterstützung

Alles hier ist eher zweideutig. Einerseits gibt es Unterstützung für das Live-Reload- und Watch / Build-System mithilfe von Plugins (das erste hat bei mir nicht funktioniert), und es gibt mehrere separate Programme, die zusätzlich zum Live-Reload Dateien verschiedener Präprozessoren verfolgen und kompilieren können. Gleichzeitig ist ihre Funktionalität (in Bezug auf die von der GUI bereitgestellten Funktionen) völlig unterschiedlich und sogar unterschiedlich teuer. Jemand kann alles bis zur Bildoptimierung tun, während jemand nicht einmal die Hälfte tut, sondern kostenlos. Im Allgemeinen kommt es darauf an, die beste Option für mich auszuwählen, bei der ich Ihnen weiter unten helfen werde.

Syntaxunterstützung

Vergessen wir zunächst die Komplexität und führen Sie einfach die Syntaxhervorhebung für die von uns benötigten Präprozessoren durch. Jedes hat sein eigenes Plugin. Sie müssen also nur das gewünschte auswählen: WENIGER , SASS und SCSS , Stylus (das Kit enthält auch ein Build-System).

Sublime Text 2 Plugins

Automatische Kompilierung

Beginnen Sie besser nicht mit dem direkten Hinzufügen bestimmter Build-Systeme zum Editor, sondern mit dem SublimeOnSaveBuild-Plugin. Er startet lediglich automatisch Build (im Menü Extras> Erstellen) für das Build-System, das Sie zum Zeitpunkt des Speicherns der Datei ausgewählt haben.

Was das Hinzufügen von Build-Systemen betrifft, ähnelt hier alles der Syntaxunterstützung. Wählen Sie das gewünschte aus: WENIGER Build , SASS Build (und natürlich Compass ).

Live-Reload

In Bezug auf Plugins für Sublime Text 2 ist es nicht so rosig, genauer gesagt, es gibt nur ein LiveReload (nicht zu verwechseln mit dem folgenden Programm), das für mich nicht sicher funktioniert. Genauer gesagt funktioniert die Erweiterung für Chrome nicht (die Erweiterung für Safari wurde nicht getestet und es gibt keine Unterstützung für andere Browser). Im Allgemeinen wurde sie seit langer Zeit nicht mehr aktualisiert. Vielleicht weiß jemand, wie man es kocht und wird es Ihnen in den Kommentaren sagen, aber ich persönlich war zu faul, um es genauer zu verstehen, und so kam ich dazu, ein separates Programm für "Live Viewing" und Zusammenstellung zu verwenden.

Separate Programme

LiveReload

Features: LiveReload kann erstens und wie der Name schon sagt, Dateiänderungen überwachen und im Browser aktualisieren und zweitens automatisch kompilieren, wenn nicht alles, dann viel: WENIGER, SASS, Kompass, Stift, CoffeeScript, IcedCoffeeScript , Eco, SLIM, HAML, Jade. Für das Live-Reload selbst müssen Sie die Erweiterung im Browser installieren. Es gibt Versionen für Safari, Chrome und Firefox.

Plattformübergreifend: Im Allgemeinen ist das Programm für Mac OS X. Es gibt eine Version für Windows, aber heute ist es eine Pre-Alpha-Version. Für Linux wird empfohlen, Guard-Livereload zu verwenden .

Preis: Die Mac OS X-Version kostet im App Store 9,99 US-Dollar. Es gibt auch eine kostenlose Testversion. Versionen für Linux und Windows sind kostenlos.

CodeKit

Funktionen: Dieses Programm bietet die umfangreichsten Möglichkeiten und im Allgemeinen die bequemste und funktionalste Benutzeroberfläche. Kann ohne Browsererweiterungen neu geladen werden und kompiliert automatisch Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript und Compass. Kombinieren und minimieren Sie Skripte, optimieren Sie Bilder usw.

Plattformübergreifend: Das Programm ist nicht nur für Mac OS X.

Preis: 25 $. Es gibt eine kostenlose Testversion.

Scout

Features: Im Gegensatz zu anderen Programmen kann Scout nur SASS und Compass kompilieren, aber in seiner GUI können Sie Ausgabemodi angeben, und es ist kostenlos.

Plattformübergreifend: Es gibt Versionen für Windows und Mac OS X, diesmal ist die Version für Windows voll. Für Linux gibt es leider keine Version.

Preis: Kostenlos.

Am Ende

LiveCSS Fügt eine visuelle Anzeige der in CSS angegebenen Farben hinzu.

SublimeFileDiffs . Fügt eine Dateivergleichsfunktion hinzu.

YUI-Kompressor . Ein weiteres JS- und CSS-Minifizierungs-Plugin, das das gleichnamige Tool von Yahoo! verwendet.

SublimeTODO . Nützlich mit Notizen in den Kommentaren.