Schnelltipp Konfigurieren von Sublime Text 2 für die Dartcodierung

Sublime Text 2 ist ein leistungsstarker Texteditor, der aufgrund seiner plattformübergreifenden Verfügbarkeit und seiner Fähigkeit, bereits vorhandene TextMate-Funktionen zu nutzen, beliebt ist. Kombinieren Sie Sublime Text 2 mit der neuen Dart-Sprache von Google. Leistungscodierer können sehr glücklich sein.


Update: Neuer Video Guide

Anmerkung des Herausgebers: Seit der Veröffentlichung dieses Artikels ist er veraltet. Es gibt jetzt einen viel besseren Workflow für die Verwendung von Dart in Sublime Text 2, den Timothy Armstrong in diesem Video erklärt:


Der Originalartikel bleibt unten unbearbeitet.


Voraussetzungen

Damit dies schnell geht, gehe ich davon aus, dass Sie über Grundkenntnisse verfügen. Sie sollten mit diesem Tipp vertraut sein:

  • Grundkenntnisse über Sublime Text 2-Pakete. Die meisten dieser Tipps konzentrieren sich auf die Schritte, die zum Erstellen unseres eigenen Dart-Pakets erforderlich sind. Wenn Sie jedoch noch nie zuvor ein Snippet verwendet haben, möchten Sie vielleicht eine Sekunde lang eine Sicherungskopie erstellen und zunächst mehr über Sublime Text erfahren.
  • Ein funktionierendes Wissen über Dart wird auch helfen. In diesem Tipp werden wir eigentlich keinen Dart programmieren, aber ein paar Dart-Dateien, mit denen Dinge getestet werden können, werden sehr hilfreich sein.
  • Wir werden den Code aus einem Subversion-Repository auschecken, und obwohl ich Ihnen den zu verwendenden Befehl übergeben habe, ist dies hoffentlich nicht das erste Mal, dass Sie Subversion verwenden.
  • Schließlich ist ein allgemeines Wissen über Ihr spezielles Betriebssystem in Ordnung. Wir müssen eine kleine Menge an Konfiguration vornehmen und, wenn Sie möchten, eine Änderung vornehmen .bash_profile Datei über das Terminal, dann ist alles in Ordnung.

Wenn Sie vorher Lesestoff benötigen, verweise ich Sie auf Folgendes:

  • Sublime Text 2-Dokumentation (jedoch inoffiziell) wird unter sublimetext.info/docs aufbewahrt. Die Seiten zu Packages, Syntaxdefinitionen und Snippets waren beim Schreiben dieses Tipps besonders hilfreich.
  • Informationen zu Darts finden Sie auf der offiziellen Website oder in der Activetuts-Einführung zum Dart-Tutorial
  • Über Subversion wurde viel geschrieben, von einem kompletten Online-Buch ganz zu schweigen. Das ist ein bisschen mehr als Sie benötigen, da Sie lediglich Subversion installieren und einen einzelnen Ordner auschecken müssen
  • Google ist Ihr Freund, wenn Sie mehr über die Konfiguration Ihres Systems erfahren möchten.

Schritt 1: Installieren Sie den Dart-Editor

Wir werden den Dart-Editor nicht wirklich verwenden (der Zweck dieses Tutorials ist es schließlich, Sublime Text for Dart zu verwenden), aber der Download enthält das Dart-SDK, was wir wirklich wollen. Selbst wenn Sie ein Hardcore-Fan von Sublime Text 2 sind, ist es immer noch keine schlechte Idee, den "offiziellen" Dart-Editor installiert und griffbereit zu haben.

Auf der offiziellen Dart-Site können Sie den Dart-Editor unter folgendem Link herunterladen:

http://www.dartlang.org/docs/getting-started/editor/

Unter "Schritt 1" dieser Seite finden Sie einen Link zu einer ZIP-Datei, die die Dart-Editoren enthält. Je nach Betriebssystem sind es etwa 70-100 MB. Daher ist der Download nicht besonders stark. Aber fangen Sie damit an!

Der Dart-Editor basiert auf Eclipse. Wenn Sie dies verwendet haben, sind Sie mit dem Dart-Editor zu Hause. Ich werde mich in diesem Tutorial nicht mit Details auseinandersetzen, aber fühle mich frei damit zu spielen. Das Activetuts + Einführungs-Tutorial (derzeit exklusiv bei Facebook erhältlich) führt Sie durch die grundlegende Verwendung des Dart-Editors.

Wenn Sie den Dart-Editor nicht installieren möchten, können Sie nur das Dark SDK für Ihr Betriebssystem unter dieser URL herunterladen (es sind nur 2 oder 3 MB):

http://www.dartlang.org/docs/getting-started/sdk/index.html


Schritt 2: Wenn Sie über 64-Bit-Linux verfügen

Wenn du nicht Wenn Sie eine 64-Bit-Linux-Installation haben, können Sie diesen Schritt überspringen. (Ja, das schließt Sie, Windows- und Mac-Benutzer ein; scrollen Sie nach unten, um Anweisungen zu erhalten.)

Wenn du sind Bei einer 64-Bit-Linux-Installation müssen Sie eine 32-Bit-Bibliothek installieren, um den Dart-Compiler auszuführen, auch wenn Sie den 64-Bit-Dart-Editor heruntergeladen haben. Ich bin zwar kein Linux-Guru, aber bei meiner Ubuntu 11-Installation funktionierte das für mich.

Gehen Sie zum Software Center und suchen Sie nach "lib32stdc ++ 6" oder "GNU Standard C ++ Library 32 Bit". Es installieren. Während der Installation können Sie mit den nächsten Schritten fortfahren. Stellen Sie nur sicher, dass diese Bibliothek erfolgreich installiert wurde, bevor Sie versuchen, das Build-System auszuführen.


Schritt 3: Laden Sie die Dart TextMate-Sprachdatei von Google herunter

Die TextMate-Sprachdatei wird hier in Google Code gehostet (webbasierte Ansicht in das Repository)..

Dies ist eigentlich Teil eines größeren TextMate-Pakets (aber nicht viel größer), aber wir interessieren uns nur für die Sprachgrammatik.

Bevor Sie sich diese Datei holen, müssen Sie einen Ort für das Leben auf Ihrem System erstellen. Sie müssen einen Ordner mit dem Namen erstellen Pfeil am folgenden Ort, abhängig von Ihrem Betriebssystem:

  • Mac OS: ~ / Library / Anwendungsunterstützung / Sublime Text 2 / Packages / Dart
  • Windows 7: C: \ Benutzer \ Administrator \ AppData \ Roaming \ Sublime Text 2 \ Packages \ Dart
  • Linux: ~ / .config / sublime-text-2 / Packages / Dart

Öffnen Sie dann Ihre Befehlszeilenschnittstelle und navigieren Sie in das neu erstellte Pfeil Mappe.

Subversion macht das Auschecken einer einzelnen Datei nicht einfach, aber wir können eine einzelne Datei exportieren. Geben Sie diesen Befehl ein:

 svn export http://dart.googlecode.com/svn/branches/bleeding_edge/dart/tools/utils/textmate/Dart.tmbundle/Syntaxes/Dart.tmLanguage

Nach einem Moment sollten Sie die haben Dart.tmLanguage Datei in Ihrem Dart-Ordner.

Probieren Sie es aus (Sie müssen Sublime Text möglicherweise neu starten). Öffnen Sie eine Dart-Datei und prüfen Sie die farbenfrohe Syntax:


Eine einfache Dart-Datei in Sublime Text 2, die die Hervorhebung der Syntax anzeigt

Schritt 4: Finden Sie Ihr frogc Ausführbar

frogc ist der Dart-to-JavaScript-Compiler. Es ist ein Befehlszeilentool, aber es ist dankbar einfach zu bedienen. Wir werden es später in einem Sublime Build System verwenden, um unsere Dart-Datei (en) in JavaScript umzuwandeln, sodass wir sie ohnehin nicht in der Befehlszeile verwenden müssen.

Um das Build System zu erstellen, benötigen wir den Pfad zu unserem frogc ausführbar. Dies wurde mit dem Dart-SDK (das Sie entweder mit dem Dart-Editor oder von ihm heruntergeladen haben) heruntergeladen. Es wird um dart-sdk / bin / frogc. "dart-sdk" befindet sich entweder dort, wo Sie das SDK selbst heruntergeladen oder entpackt haben, oder es ist nur im eingebetteten Ordner verschachtelt Pfeil Ordner, der auch die Dart-Editor-Anwendung enthält, in der Sie ihn abgelegt haben.

Wir brauchen einen Befehlszeilen-kompatiblen Pfad zu Frogc. Unter Mac OS können Sie Folgendes tun:

Öffnen Sie ein Terminalfenster und ziehen Sie den Frogc hinein. Das Fenster enthält den Text des Pfads der abgelegten Datei.

Für Windows:

Klicken Sie in die Adressleiste des Fensters. Es sollte sich dabei in einen Klartextpfad für den Ordner umwandeln, den Sie dann kopieren können. Sie müssen am Ende "\ frogc.bat" hinzufügen, um den Pfad zu frogc zu erhalten, nicht nur den Ordner "bin".

Wenn Sie mit Linux arbeiten, wissen Sie wahrscheinlich bereits, wie das geht.

Stellen Sie sicher, dass der Pfad absolut ist und jederzeit verfügbar ist. Legen Sie es für den nächsten Schritt in Ihre Zwischenablage oder in eine Scratch-Textdatei.


Schritt 5: Erstellen Sie ein Dart Build System zum Kompilieren von JavaScript

Um dieses Sprachpaket zu erstellen Ja wirklich Es empfiehlt sich, ein Build-System einzurichten, mit dem Dateien über einen Shell-Build-Befehl ausgeführt werden können.

Wählen Sie in Sublime Text die Option Extras> Erstellungssystem> Neues Erstellungssystem… Speisekarte. Sie erhalten eine neue Datei mit den folgenden Standardinhalten:

"cmd": ["make"]

Dies ist nur ein JSON-Objekt, das einen sehr grundlegenden Buildbefehl beschreibt. Wir werden noch viel mehr hinzufügen, um es für die Dart-Entwicklung nützlich zu machen.

Mit diesem Pfad, den Sie im letzten Schritt ohne weiteres festgelegt haben, können wir unseren bearbeiten sublime-build Datei.

Wenn Sie mit Mac oder Linux arbeiten, ändern Sie den Inhalt der Datei in:

"cmd": ["/ Applications / dart / dart-sdk / bin / frogc", "$ file"], "file_regex": "^ (. + \\. dart): (\\ d +): (\ \ d +):. + \\ [0m (. +) $ "," Selector ":" source.dart "

Das oben Genannte habe ich auf meinem Mac-System. Wo steht / Anwendungen / dart / dart-sdk / bin / frogc, fügen Sie Ihren eigenen Pfad hinzu.

Wenn Sie unter Windows arbeiten, sieht die Datei ziemlich ähnlich aus. Sie sollten jedochcmd"Zeile zu:

 "cmd": ["cmd", "/ C", "C: \\ Pfad hier einfügen \\ frogc.bat", "$ file"], "file_regex": "^ (. + \\. dart) : (\\ d +): (\\ d +):. + \\ [0m (. +) $ "," Selektor ":" source.dart "

Um kurz zu erklären, was das macht, das cmd Eigenschaft ist im Grunde genau das, was auf der Kommandozeile ausgeführt wird. frogc ist einfach zu bedienen: Rufen Sie einfach den Befehl auf und übergeben Sie ihm eine Datei. Das $ file Teil dieser Zeile ist eine Variable, die automatisch auf die Seite der aktuellen Datei erweitert wird.

Unter Windows sind die Dinge standardmäßig etwas funkiger (zumindest in diesem Szenario; bei Microsoft ist das kein Scherz, ich schwöre es!). Was wir haben, wird die Windows-Befehlszeile ausführen (cmd) mit dem Parameter "Nicht das Terminalfenster halten" (/ C, obwohl auch "das Terminalfenster nach oben halten" / K Parameter zeigt es auch nicht an) und führen Sie frogc.bat aus, wobei Sie den vollständigen Dateipfad übergeben. Dies ist der schnelle Weg, um es zum Laufen zu bringen, aber es scheint, dass es Fehler im aktuellen Build gibt. Dies ist wahrscheinlich ein vorübergehendes Problem, da zum Zeitpunkt des Schreibens diese Fehler mit dem Standard-SDK und nicht mit dem neuesten SDK erzeugt werden. Im nächsten Schritt finden Sie eine alternative Route.

Das file_regex Zeile ist für Fehlerberichterstattung. Wenn eine Zeile in der Ausgabe des Befehls mit diesem Muster für reguläre Ausdrücke übereinstimmt, wird dies als Fehler und Drücken von erkannt F4 hebt sie für Sie im Ausgabefeld hervor.

Leider verwendet frogc Text-Styling-Codes, um Teile der Fehlermeldung farblich und / oder fett hervorzuheben. Wenn sie in Sublime Text geleitet werden, werden diese Stilcodes als normaler Text dargestellt, sodass die Ausgabe mit ein wenig schwierig zu lesen sein kann [0m und ähnliche Codes werden in den vom Menschen lesbaren Text eingefügt. Mir ist diesbezüglich leider kein Weg bekannt.

Die letzte Zeile, Wähler, gibt den Umfang an, in dem dieses Build System stattfinden soll. Mit dieser Einstellung auf source.dart, Dart-Dateien sollten dieses Build-System automatisch auswählen. Sublime Text 2 weiß, dass eine ".dart" -Datei dank der installierten Sprachgrammatik eine Dart-Datei ist.

Speichern Sie diese Datei als Dart-frogc.sublime-build im [Sublime Data] / Pakete / Benutzer / Dart /


Optionaler Power-User-Schritt für Windows

Um die oben genannten Fehler unter Windows zu vermeiden und Ihr Build-System besser an die Mac- und Linux-Versionen anzupassen, können Sie den Ordner dart-sdk bin der Windows-Umgebung hinzufügen, sodass Sublime Text dort nach frogc suchen kann.

Klicken Sie zum Hinzufügen des Pfads auf Start, klicken Sie mit der rechten Maustaste auf Computer und wählen Sie Eigenschaften. (Alternative: Systemsteuerung> System und Sicherheit> System.) Klicken Sie auf "Erweiterte Systemeinstellungen" und dann auf "Umgebungsvariablen".

Suchen Sie nun die Variable "path" entweder in Benutzervariablen oder in Systemvariablen (funktioniert mit beiden). Wenn es nicht existiert, können Sie auf Neu klicken, um es zu erstellen. Wenn es jedoch existiert, wird es durch Klicken auf Neu überschrieben. Seien Sie also vorsichtig.

Hängen Sie den korrekten Pfad an das Ende des bereits vorhandenen an. Verwenden Sie ein Semikolon, um ihn von allen anderen Elementen zu trennen. Keine Notwendigkeit, Schrägstriche zu entkommen oder Leerzeichen durch Unterstriche oder ähnliches zu ersetzen. Meines sieht aus wie:

C: \ Windows \ system32; C: \ Windows; C: \ Windows \ System32 \ Wbem; C: \ Benutzer \ Administrator \ Downloads \ dart-win32-latest \ dart-sdk \ bin

(Scrollen Sie das obige Feld nach rechts.)

Das lässt dich laufen frogc c: \ was auch immer \ source.dart aus dem Befehlsfenster, aber es funktioniert immer noch nicht in Sublime Text 2. Aus irgendeinem Grund erfordert ST2 unter Windows, dass Sie die Dateierweiterung in Ihrer Build-Systemdatei angeben.

"cmd": ["frogc.bat", "$ file"]

Zu diesem Zeitpunkt sollte ein verwendbares Build-System unter Windows vorhanden sein, das weniger wahrscheinlich zum Brechen neigt.


Schritt 6: Verwenden des Build-Systems

Probieren Sie unser neues Build-System aus. Öffnen Sie eine Dart-Datei und drücken Sie F7 oder Steuerung-B (auf dem Mac, Befehl-B). "B" für Build.

Das Ausgabefenster sollte sich unten öffnen, und wenn der Dart fehlerfrei ist, werden Sie nur sehen [Fertig].

Wenn Sie Fehler haben, erhalten Sie eine viel komplexere Ausgabe. Zum Beispiel:

Wenn dies geschieht, drücken Sie F4 sich durch die verschiedenen Fehlerzeilen vorwärts bewegen, und Umschalttaste-F4 rückwärts gehen Die Fehlerzeile wird im Ausgabefenster hervorgehoben, und der Cursor wird in der Zeile und Spalte positioniert, die durch den Fehler angegeben wird.


Schritt 7: Beginnen Sie mit dem Erstellen von Snippets

Einem Dart-Bundle können viele nützliche Ausschnitte hinzugefügt werden. Lassen Sie mich einen Einstieg machen, indem Sie ein Snippet hinzufügen, das eine neue Methode erstellt.

Wählen Sie im Menü Text sublimieren die Option Extras> Neuer Ausschnitt… Sie erhalten wieder eine Standarddatei, diese im XML-Format. Ändern Sie den Inhalt in:

  Methode source.dart 

Fühlen Sie sich frei, den Inhalt der zu ändern Knoten von Methode zu etwas anderem, das Sie nützlicher finden. Dies ist, was Sie eingeben, bevor Sie die Tabulatortaste drücken, um den Ausschnitt zu erhalten.

Speichern Sie die Datei als method.sublime-snippet (Die Erweiterung ist entscheidend; der Basisname ist das, was Ihr Snippet als in den Menüs angezeigt wird), an folgender Stelle relativ zum Ordner "Sublime Text 2 Packages":

/Dart/method.sublime-snippet

Sie sollten bereits den Ordner "Dart" aus der Installation der Sprachgrammatikdatei haben.

Probieren Sie jetzt Ihr neues Snippet aus (Sie müssen Sublime Text möglicherweise neu starten, aber ich denke, das ist kein Problem mehr).

Geben Sie in einer Dart-Datei "method" ein (oder was auch immer Sie angegeben haben, wenn Sie Ihren eigenen Tab-Auslöser gefälscht haben), drücken Sie die Tabulatortaste und sehen Sie, wie sie erweitert wird. Sie können durch die verschiedenen Stops blättern, beginnend mit dem Rückgabetyp, dann zum Methodennamen und schließlich zwischen den Klammern, wenn Sie Argumente hinzufügen möchten. Die letzte Registerkarte wird Sie in der ersten Zeile der Methode anzeigen.

Der coole Teil ist der, wenn Sie den Rückgabetyp von ändern Leere, Du bekommst eine Automatik NULL zurückgeben Anweisung am Ende Ihres Methodenkörpers. Natürlich möchten Sie dies an Ihre Bedürfnisse anpassen, aber hoffentlich ist es eine Funktion, die etwas Tipparbeit erspart. Die Magie geschieht in der unhandlichen zweiten Zeile des Snippets. Wenn Sie das noch nie zuvor gesehen haben, ist es etwas schwer zu erklären, aber es betrachtet den Inhalt des ersten Tabstopps (den Rückgabetyp) und ob es etwas anderes als "Leere", fügt es hinzu NULL zurückgeben. Es kann sinnvoll sein, wenn Sie reguläre Ausdrücke verwendet haben, insbesondere mit der Ersetzungssyntax von / muster / ersatz / in Perl gefunden.

Das Feld ist weit offen für die Erstellung zeitsparender Dart-Schnipsel. Fühlen Sie sich frei, Ihre Schnipsel in den Kommentaren zu posten.


Das ist alles

Und dort hast du es; Diejenigen, die einen bestimmten Texteditor vor allem anderen bevorzugen, können dies auch mit dieser neuen Dart-Sprache tun. Vielen Dank für das Lesen und ich hoffe, Sie haben auf diesem Weg etwas über die Erweiterbarkeit von Sublime Text 2 erfahren.