Snelle tip Sublime Text 2 configureren voor dartcodering

Sublime Text 2 is een krachtige teksteditor, populair vanwege zijn beschikbaarheid op meerdere platforms en zijn talent voor het gebruik van reeds bestaande TextMate-functies. Combineer Sublieme Tekst 2 met Google's nieuwe Dart-taal, en power-coders kunnen erg blij zijn.


Update: nieuwe videogids

Opmerking van de uitgever: Sinds dit artikel voor het eerst werd gepubliceerd, is het verouderd. Er is nu een veel betere workflow voor het gebruik van Dart in Sublime Text 2, die Timothy Armstrong in deze video uitlegt:


Het originele artikel wordt hieronder niet uitgegeven.


voorwaarden

Om dit snel te laten verlopen, ga ik ervan uit dat je enige basiskennis hebt. U moet bekend zijn met het volgende voor deze tip:

  • Een praktische kennis van Sublime Text 2-pakketten. Het grootste deel van deze tip gaat over de stappen die nodig zijn om ons eigen Dart-pakket te maken, maar als je nog nooit een fragment hebt gebruikt voordat je misschien even een back-up wilt maken en eerst meer informatie wilt over Sublime Text.
  • Een praktische kennis van Dart helpt ook. We zullen in deze tip niet echt een Dart coderen, maar het hebben van een paar Dart-bestanden om dingen te testen, zal enorm helpen.
  • We controleren code uit een Subversion-repository en terwijl ik je de opdracht zal geven om te gebruiken, is dit hopelijk niet de eerste keer dat je Subversion gebruikt.
  • Ten slotte is een algemene kennis van uw specifieke besturingssysteem op orde. We zullen een kleine hoeveelheid configuratie moeten doen en, als u tevreden bent, bijvoorbeeld a. Wijzigen .bash_profile bestand via de Terminal, dan komt alles goed.

Als je wat leesmateriaal nodig hebt, verwijs ik je naar het volgende:

  • Sublime Text 2-documentatie (hoe niet-officieel ook) wordt bewaard op sublimetext.info/docs. De pagina's over pakketten, syntaxisdefinities en snippets waren met name handig bij het schrijven van deze tip.
  • Informatie over dobbelstenen is te vinden op de officiële site of door de Introductie tot Dart-tutorial van Activetuts te volgen
  • Er is veel geschreven over Subversion, om nog maar te zwijgen van een compleet online boek. Dat is een beetje meer dan je nodig hebt, omdat je gewoon Subversion geïnstalleerd moet hebben en een enkele map moet afrekenen
  • Google wordt je vriend als het gaat om meer informatie over het configureren van je systeem.

Stap 1: Installeer Dart Editor

We zullen de Dart Editor niet echt gebruiken (het punt van deze tutorial is immers om Sublime Text for Dart-ontwikkeling te gebruiken), maar de download bevat de Dart SDK, wat echt is wat we zoeken. Zelfs als je een hardcore Sublime Text 2-fanaat bent, 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 kun je de Dart Editor downloaden via de volgende link:

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

Onder "Stap 1" van die pagina vindt u een koppeling naar een ZIP-bestand met de Dart-editors. Het is ongeveer 70-100 MB, afhankelijk van je besturingssysteem, dus het is geen erg zware download. Maar begin ermee!

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 Activetuts + inleidende Dart-zelfstudie (momenteel exclusief beschikbaar via Facebook) neemt je 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-started/sdk/index.html


Stap 2: Als u 64-bit Linux hebt

als jij niet doen een 64-bits Linux-installatie hebt, kunt u deze stap overslaan. (Ja, dat geldt ook voor u, Windows- en Mac-gebruikers; scrol omlaag voor uw instructies.)

als jij zijn op een 64-bits Linux-installatie moet je een 32-bits bibliotheek installeren om de Dart-compiler uit te voeren, zelfs als je de 64-bits dart-editor hebt gedownload. Ik ben in geen geval een Linux-goeroe, maar dit werkte voor mij, op mijn Ubuntu 11-installatie.

Ga naar het Software Center en zoek naar "lib32stdc ++ 6" of "GNU Standard C ++ Library 32 bit". Installeer het. Je kunt doorgaan met de volgende paar stappen terwijl het wordt geïnstalleerd - zorg er alleen voor dat deze bibliotheek is geïnstalleerd voordat je het buildsysteem probeert uit te voeren.


Stap 3: Download het Dart Text Text-taalbestand van Google

Het TextMate-taalbestand wordt hier gehost op Google Code (webgebaseerde weergave in de repository).

Dit is eigenlijk een onderdeel van een grotere TextMate-bundel (maar niet zoveel groter), maar we zijn alleen geïnteresseerd in de taalgrammatica.

Voordat we dat bestand pakken, maakt u een locatie om ervoor te zorgen dat het op uw systeem leeft. U moet een map met de naam maken pijl op de volgende locatie, afhankelijk van uw besturingssysteem:

  • Mac OS: ~ / Bibliotheek / Application Support / Sublime Text 2 / Packages / Dart
  • Windows 7: C: \ Users \ Administrator \ AppData \ Roaming \ Sublime Text 2 \ Packages \ Dart
  • Linux: ~ / .Config / sublieme-text-2 / Arrangementen / Dart

Open vervolgens uw opdrachtregelinterface en ga naar de binnenkant van de nieuw gecreëerde pijl map.

Subversion maakt het niet gemakkelijk om één bestand uit te checken, maar we kunnen een enkel bestand exporteren. Voer deze opdracht in:

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

Na een moment zou je de Dart.tmLanguage bestand in uw Dart-map.

Ga je gang en probeer het uit (mogelijk moet je Sublime-tekst opnieuw starten). Open een Dart-bestand en bekijk de kleurrijke syntaxis:


Een eenvoudig dartbestand in Sublime Text 2, met syntax highlighting

Stap 4: Zoek uw frogc Uitvoerbaar

frogc is de Dart-naar-JavaScript-compiler. Het is een opdrachtregelprogramma, maar het is gelukkig gemakkelijk te gebruiken. We zullen het later in een Sublime Build-systeem gebruiken om ons Dart-bestand (en) in JavaScript te veranderen, dus we hoeven het zelfs niet op de opdrachtregel te gebruiken..

Om het Build-systeem te maken, hebben we het pad naar ons nodig frogc uitvoerbaar. Dit is gedownload met de Dart SDK (die je hebt gedownload met de Dart Editor of alleen). Het zal worden gevonden op dart-sdk / bin / frogc. "dart-sdk" zal zijn waar je de SDK zelf hebt gedownload en uitgepakt, of net binnen de kern hebt genest pijl map die ook de toepassing Dart Editor bevat, waar u deze hebt geplaatst.

We hebben een pad-line-compatibel pad naar frogc nodig. Op Mac OS, kunt u dit doen:

Open een Terminal-venster en sleep frogc erin. Het venster bevat de tekst van het pad van het bestand dat u hebt laten vallen.

Voor ramen:

Klik in de adresbalk van het venster. Het moet een gewoon tekstpad voor de map worden, dat u vervolgens kunt kopiëren. Je moet aan het einde "\ frogc.bat" toevoegen om het pad naar frogc te krijgen, niet alleen de map bin.

Als je Linux gebruikt, weet je waarschijnlijk al hoe dit moet.

Zorg ervoor dat het pad absoluut is en direct beschikbaar is. Plaats het op uw klembord of in een krastekstbestand voor de volgende stap.


Stap 5: Maak een Dart Build-systeem om JavaScript te compileren

Om dit taalpakket te maken werkelijk handig, we zouden een Build-systeem moeten opzetten, waarmee we bestanden kunnen uitvoeren via een shell-build-opdracht.

Kies in Sublime-tekst de Hulpmiddelen> Systeem bouwen> Nieuwbouwsysteem ... menu. Je krijgt een nieuw bestand te zien met de volgende standaard inhoud:

"cmd": ["make"]

Dit is slechts een JSON-object dat een zeer eenvoudige build-opdracht beschrijft. We voegen hier nog veel meer aan toe om het nuttig te maken voor Dart-ontwikkeling.

Met dat pad dat je hebt bepaald in de laatste stap die beschikbaar is, kunnen we onze subliem-build het dossier.

Als u Mac of Linux gebruikt, wijzigt u de inhoud van het bestand naar:

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

Het bovenstaande is wat ik heb op mijn Mac-systeem. Waar staat / Applications / dart / dart-sdk / bin / frogc, voeg je eigen frogc-pad toe.

Als u Windows gebruikt, ziet het bestand er ongeveer hetzelfde uit, maar moet u de "cmd"regel naar:

 "cmd": ["cmd", "/ C", "C: \\ hier invoegen \\ frogc.bat", "$ bestand"], "file_regex": "^ (. + \\. dart) : (\\ d +): (\\ d +):. + \\ [0m (. +) $ "," selector ":" source.dart "

Om in het kort uit te leggen wat dit doet, de cmd eigenschap is in feite precies wat moet worden uitgevoerd op de opdrachtregel. frogc is eenvoudig te gebruiken: voer gewoon de opdracht in en voer het een bestand in. De $ file een deel van die regel is een variabele die automatisch wordt uitgebreid naar de pagina van het huidige bestand.

In Windows zijn dingen standaard een beetje funkierer (althans in dit scenario, dat is geen graaf bij Microsoft, ik zweer het!). Wat we hebben, voert de Windows-opdrachtregel uit (cmd) met de parameter "houd het terminalvenster niet op"/ C, hoewel zelfs de "houd het terminalvenster op" / K parameter toont het ook niet) en voer frogc.bat uit, waarbij het het volledige pad doorgeeft. Dit is de snelle manier om het werkend te krijgen, maar het lijkt fouten te veroorzaken in de huidige build. Dit is waarschijnlijk een tijdelijk probleem, want ten tijde van dit schrijven worden deze fouten geproduceerd met de standaard SDK en niet met de nieuwste SDK. Zie de volgende stap voor een alternatieve route.

De file_regex regel is voor foutrapportage doeleinden. Als een regel in de uitvoer van de opdracht overeenkomt met dit reguliere expressiepatroon, wordt deze herkend als een fout en wordt er op gedrukt F4 zal ze voor u markeren in het uitvoerpaneel.

Helaas gebruikt frogc tekst-stijlcodes om delen van het foutbericht een andere kleur en / of vet te maken. Wanneer deze worden doorgegeven aan Sublime-tekst, worden deze stijlcodes gepresenteerd als normale tekst, dus de uitvoer kan een beetje moeilijk te lezen zijn, met [0m en soortgelijke codes doorspekt onder de voor mensen leesbare tekst. Ik ben me er helaas niet bewust van.

De laatste regel, keuzeschakelaar, specificeert de scope waarin dit Build-systeem zou moeten plaatsvinden. Met deze set naar source.dart, Dartbestanden moeten automatisch dit buildsysteem kiezen. Sublime Text 2 weet dat een ".dart" -bestand een, nou ja, een Dart-bestand is dankzij de taalgrammatica die we hebben geïnstalleerd.

Sla dit bestand op als Dart-frogc.sublime-build in [Sublieme gegevens] / Pakketten / Gebruiker / Dart /


Optionele Power-User Step voor Windows

Om de bovengenoemde fouten in Windows te voorkomen en uw buildsysteem meer in overeenstemming te brengen met de Mac- en Linux-versies, kunnen we de map dart-sdk bin toevoegen aan de Windows-omgeving, zodat Sublime Text daar naar frogc zoekt.

Als u het pad wilt toevoegen, klikt u op Start, klikt u met de rechtermuisknop op Computer en selecteert u Eigenschappen. (Alternatief: Configuratiescherm> Systeem en beveiliging> Systeem.) Klik op 'Geavanceerde systeeminstellingen' en vervolgens op 'Omgevingsvariabelen'.

Zoek nu de variabele "path" in Gebruikersvariabelen of Systeemvariabelen (deze werkt met een van beide). Als het bestand niet bestaat, kunt u op Nieuw klikken om het te maken, maar als dit wel het geval is, kunt u op Nieuw klikken om het te overschrijven, dus wees voorzichtig.

Voeg het juiste pad toe aan het einde van wat er al is, gebruik een puntkomma om het te scheiden van al het andere. Het is niet nodig om te scheuren of spaties te vervangen door onderstrepingstekens of iets dergelijks. De mijne ziet eruit als:

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

(Schuif het bovenstaande vakje naar rechts.)

Dat laat je vluchten frogc c: \ whatever \ source.dart vanuit het opdrachtvenster, maar het werkt nog steeds niet binnen Sublieme Tekst 2. Om een ​​bepaalde reden, ST2 op Windows vereist dat je de bestandsextensie opgeeft in je build systeembestand, zoals zo:

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

Op dit moment zou u een bruikbaar build-systeem op Windows moeten hebben dat minder snel breekt.


Stap 6: Het buildsysteem gebruiken

Ga je gang en probeer ons nieuwe Build-systeem uit. Open een Dart-bestand en druk op F7 of Controle-B (op de Mac, Command-B). "B" voor Build.

Je zou moeten zien dat het uitvoerpaneel onderaan opengaat, en als de Dart foutloos is, zul je het gewoon zien [Afgewerkt].

Als je fouten hebt, krijg je veel meer complexe uitvoer. Bijvoorbeeld:

Wanneer dit gebeurt, druk op F4 om vooruit te gaan door de verschillende foutlijnen, en Shift-F4 om achteruit te gaan. De foutlijn wordt gemarkeerd in het uitvoerpaneel en uw cursor wordt geplaatst op de regel en de kolom die worden geïdentificeerd door de fout.


Stap 7: begin met het bouwen van fragmenten

Er kunnen mogelijk veel nuttige fragmenten aan een Dart-bundel worden toegevoegd. Laat me beginnen met het toevoegen van een fragment dat een nieuwe methode maakt.

Kies in het sublieme tekstmenu Hulpmiddelen> Nieuw fragment ... U krijgt opnieuw een standaardbestand aangeboden, deze in XML-indeling. Verander de inhoud naar:

  methode source.dart 

Voel je vrij om de inhoud van de te wijzigen knooppunt van methode naar iets anders dat je nuttiger vindt. Dit is wat u typt voordat u op Tab drukt om het fragment te krijgen.

Sla het bestand op als method.sublime-fragment (de extensie is cruciaal, de basisnaam is wat uw fragment zal weergeven zoals in de menu's), op de volgende locatie ten opzichte van uw Sublime Text 2 Packages-map:

/Dart/method.sublime-snippet

U zou de map "Dart" al moeten hebben van de installatie van het taalgrammaticabestand.

Probeer nu uw nieuwe fragment uit (mogelijk moet u Sublime Text opnieuw starten, maar ik denk dat dit geen probleem meer is).

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.

Het veld is wijd open voor het maken van tijdbesparende Dart-fragmenten. Je kunt je fragmenten in de reacties plaatsen.


Dat is alles

En daar heb je het; gebruikers die een bepaalde teksteditor liever hebben dan wat dan ook, kunnen dit blijven doen, zelfs met deze nieuwe Dart-taal. Bedankt voor het lezen en ik hoop dat je onderweg iets hebt geleerd over de uitbreidbaarheid van Sublime Text 2.