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

Sublime Text 2 für das Frontend kochen

Nach Thema:


Sublime Text 2 FAQSublime Text 2 FAQ

Es ist kein Geheimnis für erfahrene Programmierer oder Schriftsetzer, dass eine auf Sie zugeschnittene Entwicklungsumgebung (nicht im Sinne von IDE, sondern allgemeiner) zwingend erforderlich ist. Es gab eine Zeit, als ich ein anderes Layout in einem praktisch leeren 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 überhaupt möglich war, auf diese Weise zu arbeiten.

Sublime Text 2 ist ein beliebter, erweiterbarer, plattformübergreifender Texteditor, für den viele Plugins geschrieben werden, wenn nicht für alle Gelegenheiten, dann für viele. In diesem Beitrag werde ich versuchen zu erklären, wie dieser Konstruktor ein praktisches Front-End-Entwicklerwerkzeug für die Arbeit mit HTML, CSS und JavaScript zusammenstellen kann. Ein kleiner Haftungsausschluss: Ich arbeite unter Mac OS X, daher kann ich mich in einigen "plattformübergreifenden Momenten" nicht einigen, aber ich werde versuchen, vollständige Informationen bereitzustellen. Und doch: Ich tue nicht in letzter Instanz die Wahrheit und warte auf Ihre Möglichkeiten.

Live-Reload und CSS-Präprozessorunterstützung

Warum füge ich zwei so unterschiedliche Dinge in einem Abschnitt zusammen? Alles wegen der Besonderheiten einiger Software, die ich später besprechen werde. Live-Reload (oder Live-Vorschau). Wenn plötzlich niemand weiß, wird im Browser angezeigt, was Sie im Editor gemacht haben, ohne dass die Seite automatisch aktualisiert werden muss. Mit der Unterstützung von CSS-Präprozessoren meine ich die Unterstützung für SASS / SCSS, LESS, Stylus-Syntax oder alles andere, was Sie bevorzugen, für Sublime Text 2 sowie das automatische Kompilieren all dieser Dinge (Build / Watch-System). . Tatsächlich ist das alles in einem Abschnitt zusammengefasst, nicht nur wegen des oben beschriebenen Grunds, sondern auch, weil mein (ich denke auch Ihr) Ziel es war, etwas zu ändern, zum Beispiel in scss- Datei speichern, speichern und sofort das Ergebnis im Browser sehen, d. h. den Prozess des Kompilierens und Aktualisierens der Seite automatisieren. Wir haben also die Kette "Datei speichern"> "Kompilieren"> "Update", die das alles logisch in einen Abschnitt des Artikels einfügt.

Einleitung

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

Alle eingereichten Plugins werden auf GitHub gehostet, fast jeder hat eine Readme-Datei, die besser zu lesen ist. Alle Details hier zu beschreiben ist nicht sinnvoll, da sich alles ändert. In diesem Artikel werde ich eine kleine Beschreibung geben, und die Autoren selbst beschreiben die Details der Plug-Ins perfekt.

Hauptplugins

ZenCoding

ZenCoding braucht kaum Kommentare, oder? Dieser 2008 von Pepelsbey eingeführte "Code-Writing-Beschleuniger" sparte enorm viel Entwicklerzeit. Seitdem als Plug-Ins für viele Editoren und IDE implementiert.

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

Sublimelinter

Dieses Plugin fügt Flusenunterstützung für viele Sprachen hinzu, einschließlich HTML, CSS und JavaScript. Um eine bessere Leistung zu erzielen, installieren Sie node.js. Weitere Informationen finden Sie in der Readme-Datei zu GitHub . Im Allgemeinen ist dies eines der Plugins, die Readme, in die Sie besser vollständig lesen können.

SublimeCodeIntel

Die Funktionen von Sublime Text 2 werden durch das Hinzufügen von "Code Intelligence" und "Smart Autocomplete" um die Fähigkeiten der IDE erweitert. Sie können insbesondere schnell zur Anzeige springen, automatisch Importieren durchführen und Informationen über die Funktion in der Statusleiste anzeigen.

Ausrichtung

Dieses Plug-In des Autors von Sublime Package Control vereinfacht das Ausrichten von mehrzeiligen und mehreren hervorgehobenen Codeabschnitten.

CSSComb

Über CSSComb kann in Habré ausführlich gelesen werden. Mit diesem nützlichen Tool wird Ihr CSS durchgestrichen, indem Sie die Eigenschaften in einer bestimmten Reihenfolge anordnen und sie in Gruppen aufteilen.

HTML5 und jQuery

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

Jsformat

JS / JSON-Code-Formatierungs-Plugin mit dem Dienst jsbeautifier.org und recht flexiblen Einstellungen. Formatiert den ausgewählten Codeabschnitt oder die gesamte Datei, wenn keine Auswahl getroffen wird. Es wird nicht geprüft, ob die Datei die Erweiterung * .js hat. Sie müssen sie daher mit Vorsicht verwenden.

Minifier

Minifier kann JavaScript ( Google Closure Compiler oder UglifyJS ) und CSS ( Reducisaurus ) minimieren . Das gesamte Plug-In besteht aus zwei Tastenkombinationen, einer speichert das Ergebnis in der aktuellen Datei und der zweite in einem separaten Namen namens name.min.ext.

Präfix

Ein eindeutiges Muss für diejenigen, die keine Präprozessoren verwenden, und alles andere ist auch nützlich. Fügt ggf. Anbieterpräfixe (und sogar in der richtigen Reihenfolge) hinzu, wobei der Dienst prefixr.com verwendet wird. Es funktioniert einfach: Schreiben Sie eine Eigenschaft ohne Präfix, drücken Sie die Tastenkombination und schon ist es fertig.

SideBarEnhancement

Wie der Name schon sagt, fügt er der Sidebar einige nützliche Verbesserungen hinzu, z. B. das Kontextmenüelement der Sidebar „Open with ...“, mit dem Sie die Datei in einem Fremdanbieterprogramm öffnen können.

Zusätzliche Plugins

Verlauf der Zwischenablage

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 einfügen können, sondern auch alle vorherigen.

EncodingHelper

In der Statusleiste wird unter anderem die Codierung der geöffneten Datei angezeigt. Im Allgemeinen ist dies der einzige Grund, warum ich dieses Plugin installiert habe, aber es hat andere Optionen. Es kann Sie beispielsweise warnen, dass eine Datei, die mit der falschen Kodierung geöffnet wurde, beschädigt werden kann.

Platzhalter

Müssen Sie oft Fische in den Code einfügen? Für alle Liebhaber von Lorem ipsum ist dieses Set von Schnipseln definitiv nützlich. Neben dem einfachen Text können Sie Absätze, Listen, Bilder usw. einfügen.

Thema - Soda

Dies ist meine subjektive Empfehlung an die Besitzer von Mac OS X. Das Soda-Design erstellt die Benutzeroberfläche von Sublime Text 2 in einem nativen Stil. Es gibt zwei Farbvarianten - Hell und Dunkel sowie Unterstützung für Retina-Displays. Das Design ist jedoch für drei Betriebssysteme verfügbar.

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

Hier ist alles ziemlich vieldeutig. Einerseits gibt es Unterstützung für Live-Reload- und Watch / Build-System mithilfe von Plug-Ins (das erste funktionierte nicht für mich), es gibt jedoch mehrere separate Programme, die neben dem Live-Reload verschiedene Pre-Prozessor-Dateien überwachen und kompilieren können. Gleichzeitig ist die Funktionalität (in Bezug auf die von der GUI bereitgestellten Funktionen) völlig unterschiedlich und die Kosten sind unterschiedlich. Jemand kann alles bis zur Optimierung von Bildern tun, aber jemand kann nicht mal die Hälfte, aber kostenlos. Im Allgemeinen kommt es darauf an, die beste Option für sich selbst zu wählen, bei der ich unten versuchen möchte, Ihnen zu helfen.

Syntax-Unterstützung

Lassen Sie uns zunächst die Komplexität vergessen und die Syntax für die Präprozessoren, die wir brauchen, hervorheben. Jedes hat sein eigenes Plugin, also müssen Sie nur das richtige auswählen: LESS , SASS und SCSS , Stylus (hier finden Sie auch das Build-System).

Sublime Text 2 Plugins

Automatisches Zusammenstellen

Es ist besser, nicht mit dem direkten Hinzufügen verschiedener Build-Systeme in den Editor zu beginnen, sondern mit dem SublimeOnSaveBuild-Plugin. Alles, was er tut, ist, automatisch Build (im Menü Extras> Build) für das Build-System Ihrer Wahl zum Zeitpunkt des Speicherns der Datei zu starten.

Beim Hinzufügen von Build-Systemen ähnelt alles der Syntax-Unterstützung. Wählen Sie aus, was Sie benötigen: LESS-build , SASS Build (und natürlich Compass ).

Live-Nachladen

Mit diesen Plugins ist das für Sublime Text 2 nicht so rosig, bzw. es gibt nur ein LiveReload (nicht zu verwechseln mit dem Programm unten), was für mich nicht gut funktioniert. Genauer gesagt, die Erweiterung für Chrome funktioniert nicht (die Erweiterung für Safari wurde nicht getestet, andere Browser werden jedoch nicht unterstützt). Nun, im Allgemeinen wurde sie lange Zeit nicht aktualisiert. Vielleicht weiß jemand, wie man es vorbereitet und wird es in den Kommentaren erzählen, aber ich war zu faul, um mehr zu verstehen, also kam ich dazu, ein separates Programm für "Live-Viewing" und Zusammenstellung zu verwenden.

Separate Programme

LiveReload

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

Plattformübergreifend: Im Allgemeinen das Programm für Mac OS X. Es gibt eine Version für Windows, heute ist es jedoch eine Vor-Alpha-Version. Für Linux wird die Verwendung von Guard-Livereload empfohlen .

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

Codekey

Features: Dieses Programm bietet die umfangreichsten Features und im Allgemeinen die bequemste und funktionalste GUI. Ist in der Lage, ohne Browsererweiterungen live zu laden, automatisch Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript und Compass; Skripte kombinieren und minimieren, Bilder optimieren usw.

Plattformübergreifend: Es ist nicht möglich, das Programm ist 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 der grafischen Benutzeroberfläche können Sie die Ausgabemodi festlegen, und es ist kostenlos.

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

Preis: Kostenlos

Zum Schluss

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

SublimeFileDiffs . Fügt die Dateivergleichsfunktion hinzu.

YUI-Kompressor . Ein weiteres Plugin für JS und CSS Minification, das das gleichnamige Tool von Yahoo! verwendet.

SublimeTODO . Es ist nützlich, Anmerkungen in den Kommentaren zu verwenden.