Kochen Sublime Text 2 für die Front-End

Mit dem Thema:


Sublime Text 2 FAQSublime Text 2 FAQ

Niemand erfahrene Programmierer oder Coder ist kein Geheimnis, das für sich selbst Development Environment (IDE keinen Sinn, aber im Allgemeinen) so konfiguriert ist, - eine lebenswichtige Notwendigkeit. Es gab eine Zeit, als ich ein anderes Layout in praktisch nackten Notepad ++ tat auf einem einzigen Monitor, abwechselnd Öffnen von Photoshop, Browser und Editor. Heute, in der "Automatisierung der gesamten" Ära, ist es schwierig, sich vorzustellen, wie Sie arbeiten, wie dies tun könnte.

Sublime Text 2 - beliebte erweiterbare, plattformübergreifende Texteditor für die viele Plug-Ins geschrieben, wenn auch nicht bei allen Gelegenheiten, dann viele. In diesem Beitrag werde ich versuchen, Ihnen zu sagen, wie das Design-handliches Werkzeug-Front-End-Entwickler mit HTML, CSS und JavaScript arbeiten gefaltet. Ein kleiner Disclaimer: Ich arbeite unter Mac OS X, so dass in einigen "Cross-Plattform-Momente" kann etwas nicht zu Ende, aber ich werde versuchen, vollständige Informationen zur Verfügung zu stellen. Und wieder ist die Wahrheit, und so tun Sie nicht, Ihre Optionen der letzten Instanz zu übermitteln.

Live-reload und Unterstützung CSS-Preprocessor

Warum zwei so unterschiedliche Dinge, die ich zu einem Ganzen zusammengefasst? Alle aufgrund der Art einer Software, die ich später erklären wird. Live-Reload (oder Live-Vorschau), wenn plötzlich jemand nicht weiß, diese Ansicht im Browser, die Sie im Editor gemacht, ohne die Notwendigkeit, die Seite zu aktualisieren, t. E. automatisch. Im Rahmen der Unterstützung von CSS-Preprozessoren meine ich die Zugabe von Sublime Text 2 Unterstützung SASS / SCSS, LESS, Stylus oder welche Syntax was sonst aus der Tatsache, dass Sie es vorziehen, zu verwenden, sowie die Organisation der automatischen Erstellung von all diesem Zeug (Build / watch-System) . In der Tat ist dies alles in einem Abschnitt zusammengefasst, nicht nur wegen der oben beschriebenen Gründen, sondern auch wegen meiner (ich glaube, Ihr auch) Ziel sicher zu machen war, dass es möglich ist, etwas zu ändern, zum Beispiel in scss- Datei speichern und sofort sehen, das Ergebnis im Browser, das heißt. e. automatisieren den Prozess der Erstellung und Aktualisierung der Seite. So haben wir eine Kette von "Datei speichern"> "Übersetzen"> "Update", das ist ganz logisch setzt sie alle in einem Abschnitt des Artikels.

Einführung

Um Plug-Ins verwenden , um bequem zu installieren, entfernen und aktualisieren von Sublime das Paket die Kontrolle , ist die Installation sehr einfach und wird auf beschrieben dieser Seite . Fast alle Plugins , die Sie benötigen, ist in Paketkontrolle, so ist es bequem zu suchen hier . Ich rate Ihnen nicht diesen Stecker zu ignorieren und etwas von Hand setzen, es sei denn, Sie haben einen besonderen Grund dafür haben. Wir können sagen, dass Package Control ist nun der de facto Standard für Sublime Text 2.

Alle eingereichten Plugins auf GitHub hat fast jeder eine Readme, die am besten gelesen wird. Um zu beschreiben, alle Details hier nicht sinnvoll, denn alles verändert sich, so in diesem Artikel werde ich eine kleine Beschreibung geben, und Details beschreiben perfekt die Autoren der Plugins selbst.

Die wichtigsten Plug-Ins

ZenCoding

ZenCoding braucht kaum Kommentar, ist es nicht? Gestartet im Jahr 2008 pepelsbey, der "das Schreiben von Code-Beschleuniger" gespeichert eine schreckliche Menge an Entwicklungszeit. Seitdem setzte es als Plug-Ins für viele Redakteure und IDE.

Nicht so lange her schien es ZenCoding Stecker Erben - Emmet . Wie bereits angedeutet, ist es bereits stabil genug, um es zu benutzen.

SublimeLinter

Dieses Plugin fügt Flusen Unterstützung für viele Sprachen, darunter HTML, CSS und JavaScript. Für eine optimale Leistung installieren node.js , mehr dazu in der Readme - Datei auf der GitHub . Im Allgemeinen ist es eines der Plugins, die readme, die am besten in voller Höhe eingelesen wird.

SublimeCodeIntel

Bringt Möglichkeiten Sublime Text 2 an die IDE-Funktionen durch einen «Code Intelligenz» Hinzufügen und «smart zur automatischen Vervollständigung», insbesondere, bietet die Möglichkeit, auf die Ankündigung, um schnell zu navigieren, die Auto-Vervollständigen für import'ov und Anzeige von Informationen über die Funktionen in der Statusleiste.

Ausrichtung

Dieses Plug-in von der Sublime Paketkontrolle Autor macht eine einfache Ausrichtung von mehreren Leitungen und mehreren ausgewählten Abschnitten des Codes.

CSSComb

Über CSSComb können Details zu lesen auf der Habre . Dieses nützliche Tool pricheshet Ihre CSS, platzieren Eigenschaft in einer vorbestimmten Reihenfolge, und sie in Gruppen zu brechen.

HTML5 und jQuery

Es setzt HTML5-Tags und Schnipsel jQuery Methoden, die vollständige Liste finden Sie unter Extras finden> Snippets.

JsFormat

Ein Plugin für die Formatierung von JS / JSON-Code, der den Dienst nutzt jsbeautifier.org und mit einem ziemlich flexiblen Einstellungen. Formatieren Sie eine markierte Stück Code, oder die gesamte Datei, wenn es keine Auswahl gibt. Überprüfen Sie, ob der Dateierweiterung * Js, nicht trainieren, so dass Sie mit Vorsicht verwenden müssen.

minifier

Minifier kann das JavaScript (minifitsirovat die Google die Schließung Compiler oder UglifyJS ) und die CSS ( Reducisaurus ). Alle Plug-in ist in zwei Kombinationen von Schlüsseln, einem speichert das Ergebnis in der aktuellen Datei und die zweite in einem einzigen Namen name.min.ext.

Prefixr

Eindeutiger muss für diejenigen, die nicht Preprozessoren verwenden, und der ganze Rest wird sich als nützlich, auch. Fügt dem Bedarf Vendor - Präfixe (und sogar in der richtigen Reihenfolge) mit Hilfe von Service prefixr.com . Es funktioniert einfach - schreiben Eigentum ohne Präfixe, drücken Sie die Tastenkombination und du bist fertig.

SideBarEnhancement

Wie der Name schon sagt, es fügt einige nützliche Verbesserungen in der Sidebar, wie Kontextmenü Sidebar «Öffnen mit ...», so dass die Datei zu öffnen in einem Drittanbieter-Programm.

Zusätzliche Plug-ins

Clipboard History

Vielleicht ist es besser, eine funktionelle im ganzen OS zu haben, aber ich bin es im Editor fehlt. Plugin speichert die Zwischenablage Geschichte, so kann man nicht nur das letzte kopierte Fragment einzufügen, sondern auch eine der vorherigen.

EncodingHelper

Unter anderem otobrzhaet in der Statusleiste eine geöffnete Datei kodiert. In der Regel ist dies der einzige Grund, warum ich dieses Plugin installiert, aber es hat auch andere Funktionen, wie er in der Lage ist, Sie zu warnen, dass die Datei in einer falschen Codierung geöffnet beschädigt werden könnten.

Platzhalter

Haben Sie oft den Code in der Fisch einfügen? Alle Liebhaber von Lorem Ipsum setzen diese eindeutig nützlich Schnipsel. Neben Klartext, ist in der Lage Absätze, Listen, Bilder einzufügen, und so weiter. D.

Theme - Soda

Dies ist meine subjektive Empfehlung Besitzer Mac OS X. Das Thema zieht Soda Sublime Text 2-Schnittstelle im einheimischen Stil. Es gibt zwei Farbvarianten - Licht und Dunkel, sowie Unterstützung für Retina-Displays. Allerdings ist das Thema für drei Betriebssysteme zur Verfügung.

Live-reload und Unterstützung CSS-Preprocessor

Hier ist alles ganz eindeutig. Auf der einen Seite gibt es Unterstützung für Live-reload und Uhr / Build-System unter Verwendung von Plug-ins (bei mir zuerst und es hat nicht funktioniert), aber es gibt mehrere separate Programme, zusätzlich zu den Live-Reload, in der Lage zu überwachen und Dateien von verschiedenen Preprozessoren kompilieren. Diese Funktionalität, die sie haben (in Bezug auf die Möglichkeiten der GUI zur Verfügung gestellt), ganz anders, und auch der Preis ist unterschiedlich. Jemand kann alles bis hin zur Optimierung von Bildern, und jemand nicht weiß, wie und eine Hälfte, aber es ist kostenlos. In der Regel kommt es darauf an, was für sich selbst die beste Option zu wählen, die ich werde versuchen, Ihnen unten helfen.

Unterstützung für Syntax

Für den Anfang über die Komplexität vergessen und nur Syntax für uns die richtige Präprozessor hervorgehoben tun. Jeder hat seine eigene Plug-in, also alles , was Sie tun müssen , ist die richtige Auswahl: LESS , SASS und SCSS , Stylus (hier auch Build - System enthalten).

Plugins Sublime Text 2

Automatische Erstellung

Post ist am besten nicht Zugabe von verschiedenen Build-Systeme in den Editor zu lenken, aber mit SublimeOnSaveBuild Plugin. (Build im Menü Extras>) für den gewünschten Build-Systems Alles, was er in den automatischen Start Bauen tut, ist, wenn Sie die Datei speichern.

Wie für die Zugabe von Build - Systems, ist alles hier ähnelt der Syntax - Unterstützung, wählen Sie das richtige: LESS-Build , SASS das Erstellen (und, natürlich, von Compass ).

Live-reload

Mit diesem im Hinblick auf die Plugins für Sublime Text 2 nicht so rosig ist, sondern es gibt nur eine LiveReload (nicht mit dem Programm unten verwechselt werden), die ich arbeiten glücklich nicht. Oder eher nicht für die Erweiterung von Chrome funktioniert (Erweiterung für Safari ist nicht getestet, aber keine anderen Browser unterstützen), gut und im Allgemeinen ist es nicht mehr aktualisiert wird. Vielleicht hat jemand weiß, wie man in den Kommentaren zu kochen und zu sagen, aber persönlich war ich zu faul, um mehr zu verstehen, so kam ich auf die Verwendung eines separaten Programm für die "Live-Ansicht" und zu kompilieren.

Individuelle Programme

LiveReload

Features: LiveReload, vo-pervyh und wie der Name schon sagt, in der Lage , um die Änderungen zu folgen und die Datei im Browser zu aktualisieren, und vo-vtoryh automatisch kompilieren, wenn nicht alle, dann eine Menge: LESS, SASS, Kompass, Stylus, Coffeescript , IcedCoffeeScript , Eco, SLIM, HAML, Jade. Für die meisten Live - Reload, den Sie mit dem installieren müssen Erweiterung für den Browser , gibt es Versionen von Safari, Chrome und Firefox.

Cross-Plattform: Das gesamte 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 vorgeschlagen , zu verwenden Wacht livereload .

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

CodeKit

Features: Dieses Programm bietet die größte Chance , und im Allgemeinen, die bequemste und funktionale GUI. Able Reload für den Browser, ohne Erweiterungen zu leben, um automatisch kompilieren Less, Sass, Stylus, Jade, Haml, Schlank, Coffeescript, Javascript und Kompass; vereinen und minifitsirovat Skripte, Bilder optimieren, und so weiter. d.

Plattformübergreifend: 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, Scout kann nur die SASS und Compass kompilieren, aber in seiner GUI können Sie die Output - Modi eingestellt, und es ist kostenlos.

Plattformübergreifend: Es gibt Versionen für Windows und Mac OS X, diesmal für Windows Vollversion. Für Linux, leider gibt es keine Veröffentlichung.

Preis: Kostenlos.

endlich

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

SublimeFileDiffs . Fügt eine Datei Funktion vergleichen.

Der Kompressor-the YUI . Ein weiteres Plug-in für minification JS und CSS, die den gleichen Namen für dieses Tool von Yahoo verwenden!.

SublimeTODO . Nützliche mit Notizen in den Kommentaren.