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

Bereiten Sie Sublime Text 2 für das Front-End vor

Nach Thema:


Sublime Text 2 FAQSublime Text 2 FAQ

Es ist kein Geheimnis für jeden erfahrenen Programmierer oder Layout-Designer, dass die Entwicklungsumgebung (nicht im Sinne von IDE, sondern allgemeiner) eine lebenswichtige Notwendigkeit ist. Es gab eine Zeit, in der ich ein weiteres Layout in praktisch nackter Notepad ++ auf einem einzigen Monitor erstellte und Photoshop, den Browser und den Editor nacheinander öffnete. Heute, in der Zeit 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 Post werde ich versuchen, Ihnen zu erklären, wie Sie ein praktisches Front-End-Entwicklerwerkzeug für die Arbeit mit HTML, CSS und JavaScript von diesem Designer erstellen können. Eine kleine Diskettengröße: Ich arbeite unter Mac OS X, daher kann ich in einigen "plattformübergreifenden Momenten" etwas nicht beenden, aber ich werde versuchen, vollständige Informationen zu liefern. Und noch einmal: Ich gebe letzten Endes nicht die Wahrheit vor und warte auf Ihre Möglichkeiten.

Live-Nachladen und Unterstützung für CSS-Präprozessoren

Warum habe ich diese beiden Dinge in einem Abschnitt zusammengefasst? Alles wegen der Besonderheiten einiger Software, über die ich später sprechen werde. Live reload (oder Live-Vorschau), wenn jemand nicht weiß, es ist eine Browser-Vorschau dessen, was Sie im Editor getan haben, ohne die Seite zu aktualisieren, das heißt automatisch. Mit Unterstützung für CSS-Präprozessoren, ich meine eine Syntax von SASS / SCSS, LESS, Stylus, oder was auch immer Sie lieber in Sublime Text 2 verwenden möchten, sowie die automatische Kompilierung all dieses Build / Watch-Systems, . In der Tat ist all das in einen Abschnitt integriert, nicht nur aus dem oben beschriebenen Grund, sondern auch, weil mein Ziel (ich denke, auch dein) darin besteht, es so zu machen, dass man etwas ändern kann, zum Beispiel in scss- Datei, speichern Sie es und sehen Sie sofort das Ergebnis im Browser, d. h. automatisieren Sie den Prozess des Kompilierens und Aktualisierens der Seite. Also haben wir eine Kette "save file"> "compile"> "update", die alles logisch in einen Abschnitt des Artikels bringt.

Einleitung

Um Plugins bequem installieren, deinstallieren und updaten zu können, wird Sublime Package Control verwendet . Die Installation ist sehr einfach und wird auf dieser Seite beschrieben . Praktisch alle Plug-ins, die Sie möglicherweise benötigen, befinden sich in der Paketsteuerung, sodass sie hier leicht zu finden sind . 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 Package Control jetzt der De-facto-Standard für Sublime Text 2 ist.

Alle eingereichten Plugins werden auf GitHub gehostet, fast alle haben Readme, was besser gelesen werden kann. Alle Feinheiten hier zu beschreiben macht keinen Sinn, weil sich alles ändert, daher werde ich in diesem Artikel eine kurze Beschreibung geben, und die Details werden von den Autoren der Plug-Ins perfekt beschrieben.

Grundlegende Plugins

Zencodierung

ZenCoding braucht kaum Kommentare, oder? Pepelsbey, dieser "code-writing accelerator", hat im Jahr 2008 eine schreckliche Menge an Entwicklerzeit eingespart. Seitdem wurde es als Plug-In für viele Editoren und IDEs implementiert.

Vor kurzem erschien das Plugin ZenCoding Erbe - Emmet . Wie vorgeschlagen, ist es bereits ausreichend stabil, 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

Nähert sich den Fähigkeiten von Sublime Text 2 an die Fähigkeiten der IDE, fügt "code intelligence" und "smart autocomplete" hinzu, fügt insbesondere die Fähigkeit hinzu, schnell zur Deklaration zu gehen, Autocomplete für import'ov anzuzeigen und Informationen über die Funktion in der Statuszeile anzuzeigen.

Ausrichtung

Dieses Plug-In des Autors von Sublime Package Control ermöglicht eine einfache Ausrichtung von mehrzeiligen und mehreren zugewiesenen Codeabschnitten.

CSSCOMB

Über CSSCOMB kann im Detail auf der Habr gelesen werden. Dieses nützliche Tool putzt Ihr CSS und platziert die Eigenschaften in der angegebenen Reihenfolge und unterteilt sie in Gruppen.

HTML5 und jQuery

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

JsFormat

Plugin für JS / JSON-Code-Formatierung, mit jsbeautifier.org Service und ziemlich flexible Einstellungen. Formatieren Sie den ausgewählten Abschnitt des Codes oder die gesamte Datei, wenn keine Auswahl erfolgt. Überprüfen, ob die Datei die Erweiterung * .js hat, implementieren Sie nicht, also verwenden Sie sie mit Vorsicht.

Minifier

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

Präfix

Ein Must-Have muss für diejenigen, die keine Präprozessoren verwenden, und der ganze Rest wird auch nützlich sein. Fügt bei Bedarf den Präfix des Herstellers (und sogar in der richtigen Reihenfolge) hinzu, indem der Dienst prefixr.com verwendet wird. Es funktioniert einfach - schreiben Sie eine Eigenschaft ohne Präfixe, drücken Sie eine 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 ...", mit dem Sie die Datei in einem Programm eines Drittanbieters öffnen können.

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, so dass Sie nicht nur das zuletzt kopierte Fragment, sondern 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 Plug-In installiert habe, aber es verfügt über andere Optionen, zum Beispiel, dass es warnt, 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 dieser Satz Schnipsel definitiv nützlich. Neben einfachem Text kann er Absätze, Listen, Bilder usw. einfügen.

Thema - Soda

Dies ist meine subjektive Empfehlung an Besitzer von Mac OS X. Das Soda-Thema formalisiert das Interface von Sublime Text 2 im nativen 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-Nachladen und Unterstützung für CSS-Präprozessoren

Hier ist alles ziemlich zweideutig. Auf der einen Seite gibt es Unterstützung für Live-Reload und Watch / Build-System mit Plugins (das erste hat nie für mich gearbeitet), aber es gibt mehrere separate Programme, die, neben Live-Nachladen, Dateien verschiedener Präprozessoren überwachen und kompilieren können. In diesem Fall haben die Funktionen, die sie haben (in Bezug auf die von der GUI bereitgestellten Fähigkeiten), völlig unterschiedliche und doch unterschiedliche Kosten. Jemand kann alles bis zur Optimierung von Bildern machen, aber jemand weiß nicht wie viel und halb, aber kostenlos. Im Allgemeinen kommt es darauf an, die beste Option für sich selbst zu finden, in der ich versuchen werde, Ihnen unten zu helfen.

Syntaxunterstützung

Erstens, vergessen Sie die Komplexität und machen Sie nur Syntax-Hervorhebung für die Präprozessoren, die wir brauchen. Jeder hat sein eigenes Plugin, also müssen Sie nur den richtigen auswählen: LESS , SASS und SCSS , Stylus (hier und das Build-System enthalten).

Plugins Sublime Text 2

Automatische Kompilierung

Es ist besser, nicht direkt mit dem Hinzufügen von Build-Systemen zum Editor zu beginnen, sondern vom Plug-in SublimeOnSaveBuild. Alles, was er tut, ist Build Build automatisch (im Menü Tools> Build) für das Build System, das Sie beim Speichern der Datei ausgewählt haben.

Was das Hinzufügen von Build-Systemen betrifft, so ist hier alles dasselbe wie die Syntax-Unterstützung, wähle das richtige: LESS-Build , SASS Build (und natürlich Compass ).

Live nachladen

Damit ist das in Bezug auf Plug-Ins zu Sublime Text 2 nicht so rosig, genauer gesagt gibt es nur ein LiveReload (nicht zu verwechseln mit dem Programm unten), das ich nicht sicher betreibe. Genauer gesagt, die Erweiterung für Chrome funktioniert nicht (die Safari-Erweiterung hat nicht getestet, und es gibt keine anderen Browser-Unterstützung), im Allgemeinen wurde es für eine lange Zeit nicht aktualisiert. Vielleicht weiß jemand, wie man es kocht und es in den Kommentaren erzählt, 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.

Individuelle Programme

LiveReload

Features: LiveReload, zuerst und wie der Name schon sagt, kann Dateiänderungen verfolgen und sie 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-Nachladen selbst müssen Sie die mitgelieferte 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 Version für Mac OS X kostet 9,99 $ im App Store, es gibt auch eine kostenlose Testversion. Versionen für Linux und Windows sind kostenlos.

CodeKit

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

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

Der Preis beträgt 25 $. Es gibt eine kostenlose Testversion.

Kundschafter

Features: Im Gegensatz zu anderen Programmen kann Scout nur SASS und Compass kompilieren, aber seine GUI kann 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.

Endlich

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

SublimeFileDiffs . Fügt eine Dateivergleichsfunktion hinzu.

YUI-Kompressor . Ein weiteres Plugin für die JS- und CSS-Minisierung, mit dem gleichnamigen Tool von Yahoo!

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