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

Cooking Sublime Text 2 für Front-End

Nach Thema:


Sublime Text 2 FAQSublime Text 2 FAQ

Es ist kein Geheimnis für jeden erfahrenen Programmierer oder Setzer, dass eine für Sie angepasste Entwicklungsumgebung (nicht im Sinne von IDE, sondern allgemeiner) eine lebenswichtige Notwendigkeit ist. Es gab eine Zeit, als ich ein anderes Layout in einem virtuell leeren Notepad ++ auf einem einzigen Monitor machte 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, so 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 erzählen, wie aus diesem Konstruktor ein praktisches Front-End-Entwickler-Tool für die Arbeit mit HTML, CSS und JavaScript zusammengestellt werden kann. Ein kleiner Disclaimer: Ich arbeite unter Mac OS X, daher kann ich mich in einigen "plattformübergreifenden Momenten" nicht auf etwas einigen, aber ich werde versuchen, vollständige Informationen zu liefern. Und dennoch: Ich tue nicht die letzte Wahrheit und warte auf deine Möglichkeiten.

Live Reload und CSS Preprozessor Unterstützung

Warum kombiniere ich zwei so unterschiedliche Dinge in einem Abschnitt? Alles wegen der Besonderheiten einiger Software, auf die ich später eingehen werde. Live reload (oder Live-Vorschau), wenn jemand plötzlich nicht weiß, dass dies im Browser anzeigt, was Sie im Editor getan haben, ohne dass die Seite aktualisiert werden muss, dh automatisch. Indem ich CSS-Präprozessoren unterstütze, bedeute ich, Unterstützung für SASS / SCSS, WENIG, Stylus-Syntax oder etwas anderes hinzuzufügen, das Sie lieber für Sublime Text 2 verwenden, sowie die automatische Kompilierung all dieser Dinge zu organisieren (Build / Watch-System) . In der Tat ist all das in einem Abschnitt zusammengefasst, nicht nur aus dem oben beschriebenen Grund, sondern auch, weil mein (ich denke auch dein) Ziel darin besteht, etwas zu ändern, zum Beispiel in scss- Datei speichern, und sofort das Ergebnis im Browser sehen, d. h. den Prozess des Kompilierens und Aktualisierens der Seite automatisieren. Also, wir haben die "save file"> "compile"> "update" Kette, die logisch alles in einen Abschnitt des Artikels bringt.

Einleitung

Um Plugins, die von Sublime Package Control verwendet werden, bequem zu installieren, zu entfernen und zu aktualisieren, ist die Installation sehr einfach und auf dieser Seite beschrieben . Fast alle Plug-ins, die Sie benötigen, befinden sich in der Paketsteuerung. Daher ist es praktisch, sie hier zu suchen. Ich rate 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 Package Control jetzt der De-facto-Standard für Sublime Text 2 ist.

Alle eingereichten Plugins werden auf GitHub gehostet, fast jeder hat eine Readme, die besser zu lesen ist. Alle Details hier zu beschreiben macht keinen Sinn, weil sich alles ändert, daher werde ich in diesem Artikel eine kleine Beschreibung geben, und die Autoren selbst beschreiben die Details der Plug-Ins perfekt.

Hauptplugins

Zencodierung

ZenCoding braucht kaum Kommentare, oder? Dieser "Code Writing Accelerator" wurde 2008 von pepelsbey eingeführt und hat eine Menge Entwicklungszeit eingespart. Seitdem wurde es als Plug-In für viele Editoren und IDEs implementiert.

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

Sublimelinter

Dieses Plugin fügt Flusenunterstützung für viele Sprachen hinzu, einschließlich HTML, CSS und JavaScript. Installieren Sie node.js , um eine bessere Leistung zu erzielen . Lesen Sie mehr dazu im Readme von GitHub . Im Allgemeinen ist dies eines der Plugins, Readme, zu denen es besser ist, vollständig zu lesen.

SublimeCodeIntel

Es bringt die Fähigkeiten von Sublime Text 2 durch Hinzufügen von "Code Intelligence" und "Smart Autocomplete" näher an die Fähigkeiten der IDE heran, insbesondere bietet es die Möglichkeit, schnell zur Anzeige zu springen, Autocomplete für den Import und Informationen über die Funktion in der Statusleiste anzuzeigen.

Ausrichtung

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

CSSCOMB

Über CSSCOMB kann im Detail in Habré gelesen werden. Dieses nützliche Werkzeug putzt Ihr CSS, indem es Eigenschaften in einer bestimmten Reihenfolge anordnet und sie in Gruppen aufteilt.

HTML5 und jQuery

Dies sind Gruppen von HTML5-Tag-Snippets und jQuery-Methoden, deren vollständige Liste unter Extras> Snippets zu finden ist.

Jsformat

JS / JSON-Code-Formatierung Plugin mit jsbeautifier.org Service und ziemlich flexible Einstellungen. Formatiert den ausgewählten Codeabschnitt oder die gesamte Datei, wenn keine Auswahl erfolgt. Es prüft nicht, ob die Datei die Erweiterung * .js hat, also müssen Sie sie mit Vorsicht verwenden.

Minifier

Minifier kann JavaScript ( Google Closure Compiler oder UglifyJS ) und CSS ( Reducisaurus ) reduzieren . Das gesamte Plug-In besteht aus zwei Shortcut-Keys, einer speichert das Ergebnis in der aktuellen Datei und der zweite in einem separaten mit dem Namen 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, gegebenenfalls unter Verwendung des prefixr.com- Service, Anbieterpräfixe hinzu (und sogar in der richtigen Reihenfolge). Es funktioniert einfach - schreiben Sie eine Eigenschaft ohne Präfixe, drücken Sie die Tastenkombination und es ist fertig.

SideBarEnhancement

Wie der Name schon sagt, fügt die Seitenleiste einige nützliche Verbesserungen hinzu, zum Beispiel den Kontextmenüpunkt der Seitenleiste "Öffnen mit ...", der es ermöglicht, die Datei in einem Programm eines Drittanbieters zu öffnen.

Zusätzliche Plugins

Zwischenablage-Verlauf

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

KodierungHelper

Unter anderem zeigt es die Codierung der geöffneten Datei in der Statusleiste an. Im Allgemeinen ist dies der einzige Grund, warum ich dieses Plugin installiert habe, aber es hat andere Optionen, zum Beispiel kann es Sie warnen, dass eine Datei, die in der falschen Kodierung geöffnet wurde, beschädigt sein könnte.

Platzhalter

Müssen Sie oft Fische in den Code einfügen? Alle Liebhaber von Lorem Ipsum diese Reihe von Schnipsel ist definitiv nützlich. Zusätzlich zum einfachen Text können Absätze, Listen, Bilder usw. eingefügt werden.

Thema - Soda

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

Live Reload und CSS Preprozessor Unterstützung

Hier ist alles ziemlich zweideutig. Auf der einen Seite gibt es Unterstützung für Live-Reload und Watch / Build-System mit Plug-Ins (die erste funktionierte nicht für mich), aber es gibt mehrere separate Programme, die zusätzlich zum Live-Reload verschiedene Preprozessor-Dateien überwachen und kompilieren können. Gleichzeitig ist die Funktionalität, die sie haben (in Bezug auf die Fähigkeiten, die von der GUI zur Verfügung gestellt werden) völlig unterschiedlich und die Kosten sind unterschiedlich. Jemand kann alles bis zur Bildoptimierung tun, während andere nicht die Hälfte, sondern kostenlos machen können. Im Allgemeinen kommt es darauf an, die beste Option für sich auszuwählen, in der ich versuchen werde, Ihnen unten zu helfen.

Syntaxunterstützung

Lassen Sie uns zuerst die Schwierigkeiten vergessen und nur Syntax-Highlighting für die Präprozessoren machen, die wir brauchen. Jeder hat sein eigenes Plugin, also muss nur das richtige ausgewählt werden: LESS , SASS und SCSS , Stylus (hier finden Sie auch das Build-System).

Sublime Text 2 Plugins

Automatische Kompilierung

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

Was das Hinzufügen von Build-Systemen betrifft, ist hier alles dasselbe wie die Syntax-Unterstützung. Wählen Sie, was Sie brauchen: LESS-Build , SASS Build (und natürlich Compass ).

Live nachladen

Damit ist Plugins für Sublime Text 2 nicht so rosig, bzw. gibt es nur ein LiveReload (nicht zu verwechseln mit dem Programm unten), was mir nicht gut geht. Genauer gesagt, die Erweiterung für Chrome funktioniert nicht (die Erweiterung für Safari wurde nicht getestet, aber es gibt keine Unterstützung für andere Browser), im Allgemeinen wurde sie für eine lange Zeit nicht aktualisiert. Vielleicht weiß jemand, wie man es vorbereitet und wird in den Kommentaren erzählen, aber persönlich war ich zu faul, um mehr zu verstehen, also kam ich dazu, ein separates Programm für "Live Viewing" und Kompilation zu verwenden.

Getrennte Programme

LiveReload

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

Cross-Plattform: Im Allgemeinen 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-Liveload zu verwenden .

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

Codekey

Features: Dieses Programm bietet die umfassendsten Funktionen und im Allgemeinen die bequemste und funktionelle GUI. Live neu laden ohne Browser-Erweiterungen, automatisch kompilieren Less, Sass, Stylus, Jade, Haml, Slim, KaffeeScript, Javascript und Compass; kombinieren und minimieren Sie Skripte, optimieren Sie Bilder usw.

Cross-Plattform: Es ist nicht, das Programm ist nur für Mac OS X.

Preis: 25 $. Es gibt eine kostenlose Testversion.

Kundschafter

Features: Im Gegensatz zu anderen Programmen kann Scout nur SASS und Compass kompilieren, aber in seiner GUI können Sie die Ausgabemodi einstellen, 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.

Endlich

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

SublimeFileDiffs . Fügt die Dateivergleichsfunktion hinzu.

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

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