Snelle tip configureren van TextMate voor dartcodering

Dart is een mooie nieuwe taal die een verandering kan betekenen in de manier waarop je webtoepassingen schrijft. Google biedt een eclipse-gebaseerde dart-editor die een handig middel biedt om aan de slag te gaan. Maar TextMate-gebruikers vinden meestal een manier om TextMate naar hun hand te zetten, en deze Quick Tip zorgt ervoor dat u begint te buigen om Dart met TextMate te gebruiken.


voorwaarden

Ik ga ervan uit dat u bekend bent met de TextMate-bundels om ten minste de mate van wat ze zijn te weten en dat zij functionaliteit (meestal taalspecifiek) toevoegen aan TextMate. Ik neem ook aan dat je bekend bent met en in staat bent om code uit een Subversion-repository te controleren. Ten slotte neem ik aan dat je een kleine Dart-ervaring hebt. Je hebt niet veel nodig, maar het hebben van Dart-bestanden om in TextMate te openen, maakt dit veel soepeler.

Als je Dart op dit moment nog niet kent, kan ik je naar de officiële informatiebron verwijzen: http://www.dartlang.org/. Daarnaast heeft Activetuts + eerder mijn inleidende zelfstudie over de taal What's Dart en Why Should You Care gepubliceerd.?


Installeer Dart Editor

We zullen de Dart Editor niet echt gebruiken (het punt van deze tutorial is om TextMate voor Dart-ontwikkeling te gebruiken), maar de download bevat de Dart SDK, wat echt is wat we zoeken. Zelfs als je een hardcore TextMate-fanaat bent (zoals ik ben), is het nog steeds geen slecht idee om de "officiële" Dart Editor geïnstalleerd en handig te hebben.

Op de officiële Dart-site (zie het vorige gedeelte) kun je de Dart Editor downloaden via de volgende link: http://www.dartlang.org/docs/getting-started/editor/index-macos.html

Als je op Windows of Linux zit, maar toch deze tutorial aan het lezen bent ondanks de Mac-gerichte aard, kun je de Dart Editor voor die platforms downloaden van de Dart Editor voor Windows- en Linux-pagina's.

Onder "Stap 1" van die pagina vindt u een koppeling naar een ZIP-bestand met de Dart-editors. Het is ongeveer 40 MB, dus het is geen erg zware download.

De Dart Editor is gebaseerd op Eclipse, dus als je dat hebt gebruikt, ben je meteen thuis met de Dart Editor. Ik zal niet in details treden over het gebruik ervan in deze tutorial, maar voel je vrij om ermee te spelen. De huidige Activetuts + Facebook Fan Bonus neemt u mee door het basisgebruik van de Dart Editor.

(Merk op dat als je de Dart Editor niet wilt installeren, je gewoon de Dark SDK voor je OS kunt downloaden op deze URL (het is slechts 2 of 3 MB): http://www.dartlang.org/docs/getting -gestarte / sdk / index.html


Installeren frogc

frogc is de Dart-naar-JavaScript-compiler. Het is een opdrachtregelprogramma, maar het is gelukkig gemakkelijk te gebruiken. We zullen het later in een TextMate-opdracht gebruiken om ons Dart-bestand (en) in JavaScript te veranderen, zodat we vandaag onze Dart-code kunnen gebruiken.

Open Terminal (te vinden in uw / Applications / Utilities / map). Typ het volgende:

 nano ~ / .bash-profiel

Als je al een aantal PATH-aanpassingen hebt gemaakt, plaats je de cursor achter deze regels.

Type:

 PATH exporteren = $ PATH:

En sleep vervolgens de bak map, die zich moet bevinden op / Applications / dart / dart-sdk / bin, in het Terminal-venster. Als u niet op die locatie bent, zoekt u naar een dart-sdk map in iets dat je hebt gedownload (als je de SDK zelf hebt gedownload, moet dit die download zijn, uitgepakt). Je zou moeten eindigen met zoiets als dit:

 export PATH = $ PATH: / Applications / dart / dart-sdk / bin

Om dit bestand op te slaan, druk je op Control-O (dat is Controle, niet opdracht), druk op Return om het bestand dat u wilt opslaan te bevestigen en druk vervolgens op Control-X om nano af te sluiten.

Bijna klaar; Ik heb een probleem gevonden met frogc als je toevallig spaties hebt in je bestands- of mapnamen. Dit kan echter gemakkelijk worden opgelost. Doe open frogc. Het is een uitvoerbaar shellscript, dus dubbelklik er niet op. Sleep het in plaats daarvan naar uw TextMate-pictogram en er wordt een waarschuwingsvenster weergegeven, maar u moet het korte script kunnen zien. U hoeft niet te begrijpen wat dit doet, verander gewoon de laatste regel van dit:

 $ SCRIPTPATH ​​/ dart --new_gen_heap_size = 128 $ SCRIPTPATH ​​/ frogc.dart --libdir = $ LIBPATH $ @

... dit:

 "$ SCRIPTPATH ​​/ dart" --new_gen_heap_size = 128 "$ SCRIPTPATH ​​/ frogc.dart" --libdir = "$ LIBPATH" "$ @"

Merk op dat ik in principe elk pad met quotes heb omringd, wat helpt om het ruimteprobleem te voorkomen.


Installeer Google's Dart TMBundle

Je kunt de .tmbundle op deze Google Code-pagina.

Je kunt de hele Dart-bron bekijken, die misschien interessant is om door te porren, of je kunt gewoon de .tmbundle. Ga met behulp van de Terminal naar de locatie waar u de code wilt hebben (type CD sleep vervolgens de doelmap opnieuw naar het Terminal-venster - merk op dat er een spatie achter staat CD). Zodra Terminal op de door u gewenste locatie is, typt u dit voor een volledige afhandeling:

 svn-checkout http://dart.googlecode.com/svn/trunk/ dart-alleen-lezen

... of dit voor alleen de .tmbundle:

 svn checkout http://dart.googlecode.com/svn/branches/bleeding_edge/dart/tools/utils/textmate/Dart.tmbundle

Als u het hele project hebt uitgecheckt, kunt u naar de .tmbundle door dit pad te volgen vanuit de projectroot: [Dart-alleen-lezen] /dart/tools/utils/textmate/Dart.tmbundle. Hoe dan ook, dubbelklik op de .tmbundle om TextMate te laten installeren.

Veel gebruikers van TextMate willen het eenvoudigweg controleren .tmbundles rechtstreeks in de map met bundels. Om dit te doen, navigeert u naar die map in Terminal (dit zou het moeten doen: cd "~ / Bibliotheek / Application Support / TextMate / Pristine Copy / Bundles") en voer dan de tweede svn-uitcheckregel hierboven uit (degene die alleen de .tmbundle). Op deze manier kunt u de bundel eenvoudig bijwerken op locatie met svn up "~ / Bibliotheek / Application Support / TextMate / Pristine Copy / Bundles".


Schrijf een opdracht om Dart te compileren naar JavaScript

De Google Dart-bundel is geweldig voor het toevoegen van syntaxisondersteuning voor Dart, dus wanneer u een bestand maakt dat eindigt op .pijl je krijgt gekleurde syntax en code-vouwing en dat soort dingen. Maar het bevat geen fragmenten of commando's. Het nuttigste commando (inderdaad, het eerste waar ik aan dacht) is een commando om je huidige Dart-script mee te compileren frogc voor jou. We voegen er een toe in deze stap.

Open in TextMate de bundeleditor (druk op Command + Option-Control-B, of ga naar Bundels> Bundelredacteur> Bundeleditor weergeven)

Klik op het dartitem in de linkerlijst.

Met de "+"Knop linksonder, kies" Nieuw commando ".

U zou een nieuw "untitled" commando moeten zien verschijnen onder de Dart-bundel. Hernoem het naar "Compileer met frogc"

Voer in het grote tekstgebied aan de rechterkant (met het label "Command (s)") het volgende in:

 frogc "$ TM_FILEPATH"

Boven het tekstgedeelte heeft u de mogelijkheid om het bestand te laten opslaan voordat het wordt uitgevoerd. Dit zou u kunnen aanspreken (het doet mij, één minder toetsaanslag!). Als dit het geval is, wijzigt u de optie "Opslaan" van "Niets" in "Huidig ​​bestand" of "Alle bestanden in Project".

Onder het tekstgedeelte, waar het zegt "Input", zet dit op "Geen".

Daaronder, waar de tekst "Uitvoer" staat, stelt u deze in op "Tonen als knop". Hierdoor kan elke uitvoer van de opdracht worden weergegeven in een tooltip in de buurt van de cursor, wat betekent dat u fouten tijdens het uitvoeren van de opdracht hebt frogc je kunt ze zien. Ze zijn niet erg mooi, maar het is beter dan niets.

beneden dat, waar het zegt "Activering", zorg ervoor dat het op "Key Equivalent" staat en plaats vervolgens de cursor in het tekstveld naar rechts. Type Command-B; hierdoor wordt deze opdracht ingesteld om te activeren wanneer u die sneltoets typt. Command-B is het TextMate-idioom voor een Build-opdracht als bundels er één hebben.

Daaronder, waar staat "Scope Selector," typt u "source.dart # 8221;.

Uw opdrachtvenster zou er ongeveer zo uit moeten zien:

Sluit het editorvenster van Bundle.


Stap 1: Vertel TextMate waar frogc is

We hebben Terminal zo ingesteld dat het weet waar frogc is, maar helaas deelt TextMate die informatie niet. De eenvoudigste oplossing is om het pad dat we hebben toegevoegd aan het .bash_profile-bestand toe te voegen aan uw Textmate-voorkeuren.

Open de voorkeuren van TextMate (druk op Command- of ga naar TextMate> Voorkeuren ... ).

Klik op de knop Geavanceerd bovenaan en klik vervolgens op het tabblad Shell-variabelen.

Als u nog geen PAD variabele, klik op de knop "+" en typ in de eerste kolom PAD.

In de tweede kolom van de rij die begint PAD, typ het pad dat je hebt toegevoegd aan de .bash_profile (alleen het pad, niet het gedeelte dat zegt EXPORT PATH = @ PATH:). Zorg ervoor dat de bestaande waarde intact blijft - voeg een dubbele punt toe aan het einde van wat er al is en kopieer het nieuwe pad.

Sluit het venster Voorkeuren en je bent klaar om het uit te proberen. Als je een dartbestand nodig hebt, kun je een Hello World-bestand maken door een nieuw project met Dart Editor te maken, of je kunt de voorbeelden opzoeken uit de Dart Editor-download in de map "samples". Open een dartbestand in TextMate en druk op Command-B; als alles goed gaat, zou je na een paar seconden een JavaScript-bestand moeten hebben naast het dartbestand.


Stap 2: Krijg feedback van frogc

Als u een beetje liefhebber wilt worden, kunt u de code van uw compileeropdracht hiernaar wijzigen:

 result = "frogc" $ TM_FILEPATH "" als ["$ resultaat" == ""]]; dan echo "Compileer voltooid" anders echo $ resultaat fi

Hiermee krijgt u eenmaal de knopinfo 'Compileer voltooid' frogc is voltooid, als het met succes wordt uitgevoerd. Als je fouten hebt, worden ze nog steeds weergegeven zoals eerder.

Een andere optie: als u het idee leuk vond om automatisch bestanden op te slaan tijdens het uitvoeren van de opdracht, zou u het idee kunnen waarderen om de opdracht Opslaan te vervangen door een opdracht Opslaan en Compileren. Dit is net zo eenvoudig als het wijzigen van Command-B naar Command-S en ervoor zorgen dat u het "Current File" in de opdracht opslaat. Dit overschrijft de gewone Command-S, die het huidige document eenvoudig opslaat, met de uitvoering van deze opdracht, die slaat en vervolgens compileert.

Voor de volledigheid kunt u een duplicaatopdracht maken die "Alle bestanden" opslaat en een activeringssleutel van Command-Option-S heeft. Deze snelkoppeling vervangt de reguliere opdracht-optie-S in TextMate, die normaal alle bestanden in een project opslaat. Merk op dat omdat u een Scope Selector heeft ingesteld, deze overschrijving alleen in Dart-bestanden zal plaatsvinden, niet elk tijd om elk bestand op te slaan.


Begin met het bouwen van fragmenten

Er kunnen mogelijk veel nuttige fragmenten aan een Dart-bundel worden toegevoegd. Over het algemeen merk ik dat ik ze incrementeel toevoeg terwijl ik een taal leer kennen en ontdekken dat het bestaande .tmbundle bevat er nog geen. Laat me beginnen met het toevoegen van een fragment dat een nieuwe methode maakt.

Zorg ervoor dat in de bundeleditor de Dart-bundel (of een item in de Dart-bundel) is geselecteerd en kies vervolgens "New Snippet" uit de "+"Knop. Noem het "methode".

Selecteer in het grote tekstgedeelte alle bestaande tekst en verwijder deze. Voer nu het volgende in of plak het:

 $ 1: ongeldig $ 2: methodName ($ 3: arguments) $ 0 $ 1 / void | (. +) / (? 1: \ n \ treturn null;) /

Stel onder "Activering" het pop-upvenster in op "Tab-trigger" en voer het in methode in het tekstveld (voel je vrij om dit te veranderen).

Typ in "Scope Selector" source.dart.

Uw fragment moet er als volgt uitzien:

Sluit de bundeleditor.

Probeer het. Typ in een Dart-bestand 'methode' (of wat je ook hebt opgegeven, als je je eigen tabbladtrigger hebt vervalst), druk op Tab en kijk hoe het wordt uitgebreid. U kunt door de verschillende registers bladeren, beginnend bij het retourneertype, vervolgens naar de methode naam en tenslotte tussen de haakjes als u argumenten wilt toevoegen. Het laatste tabblad plaatst u op de eerste regel van de methode.

Het leuke is dat als je het retourtype wijzigt van leegte, je krijgt een automatisch return null verklaring aan het einde van uw methode. Uiteraard wilt u dit aanpassen aan uw behoeften, maar hopelijk is het een functie die een beetje typen bespaart. De magie gebeurt in de logge tweede regel van het fragment; als je dit nog nooit eerder hebt gezien, dan is het enigszins moeilijk om bondig uit te leggen, maar het kijkt naar de inhoud van de eerste tabstop (het retourneertype) en of het iets anders is dan "leegte", Voegt het toe return null. Het kan logisch zijn als u ooit reguliere expressies heeft gebruikt, met name met de substitutiesyntaxis van / Patroon / vervanging / gevonden in Perl.

Aangezien Google geen fragmenten biedt met hun .tmbundle, het veld is wijd open voor het creëren van tijdbesparende Dart-fragmenten. Je kunt je fragmenten in de reacties plaatsen. We zullen ze compileren en kijken of we Google kunnen laten opnemen in hun officiële bundel.


Dat is alles

Bedankt voor het lezen! Ik hoop dat je net zo enthousiast bent over Dart als ik. En de Dart Editor is netjes en zo, maar ik ben een dwaas voor TextMate. Het combineren van Dart met mijn teksteditor van keuze is iets dat gewoon moest worden gedeeld.