Snabbtips Konfigurera Sublime Text 2 för Dart-kodning

Sublime Text 2 är en kraftfull textredigerare, populär på grund av dess övergripande tillgänglighet och dess förmåga att utnyttja befintliga TextMate-funktioner. Kombinera Sublime Text 2 med Googles nya Dart-språk och strömkodare kan vara mycket glada.


Uppdatering: Ny videoguide

Redaktörens anmärkning: Eftersom den här artikeln först publicerades har den blivit oförändrad. Det finns nu ett mycket bättre arbetsflöde för att använda Dart i Sublime Text 2, som Timothy Armstrong förklarar i den här videon:


Den ursprungliga artikeln lämnas oförändrad nedan.


förutsättningar

För att detta ska gå snabbt antar jag att du har viss grundkunskap. Du bör vara bekant med följande för detta tips:

  • En fungerande kunskap om Sublime Text 2-paket. Det mesta av detta tips handlar om de steg som krävs för att bygga vårt eget Dart-paket, men om du aldrig har använt ett kodavsnitt innan du kanske vill säkerhetskopiera en sekund och lära dig mer om Sublime Text först.
  • En fungerande kunskap om Dart kommer också att hjälpa till. Vi kommer inte verkligen att koda någon Dart i detta tips, men med några Dart-filer runt som att testa saker kommer att hjälpa till mycket.
  • Vi kommer att kolla kod ur en Subversion-arkiv, och medan jag ska mata dig kommandot att använda, förhoppningsvis är det inte första gången du använder Subversion.
  • Slutligen är en allmän kännedom om ditt specifika operativsystem i ordning. Vi måste göra en liten mängd konfiguration och om du är bekväm, säg, ändra en .bash_profile fil via terminalen, då blir du bra.

Om du behöver lite tidigare material läser jag följande:

  • Sublime Text 2-dokumentation (dock inofficiell) hålls på sublimetext.info/docs. Sidorna på paket, syntaxdefinitioner och utdrag var särskilt användbara vid skrivandet av detta tips.
  • Dartinformation finns på den officiella webbplatsen, eller genom att följa med Activetuts introduktion till Dart-handledning
  • Mycket har skrivits om Subversion, för att inte tala om en komplett online bok. Det är lite mer än du behöver, eftersom du helt enkelt behöver ha Subversion installerat och att checka ut en enda mapp
  • Google kommer vara din vän när det gäller att lära dig mer om hur du konfigurerar ditt system.

Steg 1: Installera Dart Editor

Vi kommer inte riktigt att använda Dart Editor (den här handledningen är att använda Sublime Text for Dart-utveckling trots allt), men nedladdningen innehåller Dart SDK, vilket verkligen är det vi efterfrågar. Även om du är en hardcore Sublime Text 2 fanatiker, är det fortfarande inte en hemsk idé att ha den "officiella" Dart Editor installerad och praktisk.

På den officiella Dart-webbplatsen kan du ladda ner Dart Editor från följande länk:

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

Under "Steg 1" på den sidan hittar du en länk till en ZIP-fil som innehåller Dart Editors. Det är runt 70-100 MB, beroende på ditt operativsystem, så det är inte en väldigt tung nedladdning. Men kom igång!

Dartredigeraren är baserad på Eclipse, så om du har använt det så kommer du vara hemma med Dart Editor. Jag kommer inte att få information om hur jag använder den i den här handledningen, men känner mig fri att leka med den. Activetuts + inledande Dart-handledning (för närvarande endast tillgänglig via Facebook) tar dig igenom den grundläggande användningen av Dart Editor.

Observera att om du inte vill installera Dart Editor, kan du bara ladda ner Dark SDK för ditt operativsystem på den här webbadressen (det är bara 2 eller 3 MB):

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


Steg 2: Om du har 64-bitars Linux

Om du inte Har en 64-bitars Linux-installation, kan du hoppa över det här steget. (Ja, det inkluderar dig, Windows och Mac-användare; rulla ner för dina instruktioner.)

Om du är på en 64-bitars Linux-installation måste du installera ett 32-bitars bibliotek för att kunna köra Dart-kompilatorn, även om du har laddat ner 64-bitars Dart Editor. Jag är inte en Linuxguru av någon sträcka, men det fungerade för mig, på min Ubuntu 11-installation.

Gå till Software Center och sök efter "lib32stdc ++ 6" eller "GNU Standard C ++ Library 32 bit". Installera det. Du kan fortsätta med de närmaste stegen när det installeras - var noga med att det här biblioteket har installerats innan du körde byggsystemet.


Steg 3: Ladda ner Googles Dart TextMate Language File

TextMate-språkfilen är värd på Google Code här (webbaserad visning i förvaret).

Det här är faktiskt en del av en större TextMate-bunt (men inte så mycket större), men vi är bara intresserade av språkgrammatiken.

Innan vi tar den filen, skapa en plats för att den ska kunna leva på ditt system. Du måste skapa en mapp som heter Pil på följande plats, beroende på ditt operativsystem:

  • Mac OS: ~ / Bibliotek / Programstöd / Sublim text 2 / Paket / Dart
  • Windows 7: C: \ Användare \ Administratör \ AppData \ Roaming \ Sublime Text 2 \ Packages \ Dart
  • Linux: ~ / .Config / sublima-text-2 / paket / Dart

Öppna sedan ditt kommandoradsgränssnitt och navigera till insidan av den nyskapade Pil mapp.

Subversion gör det inte lätt att checka ut en enda fil, men vi kan exportera en enda fil. Ange detta kommando:

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

Efter ett ögonblick borde du ha Dart.tmLanguage filen i din Dart-mapp.

Fortsätt och prova det (du kan behöva starta om Sublime Text). Öppna en Dart-fil och kolla in den färgstarka syntaxen:


En enkel Dart-fil i Sublime Text 2, som visar syntaxmarkering

Steg 4: Hitta din frogc exekverbar

frogc är Dart-to-JavaScript-kompilatorn. Det är ett kommandoradsverktyg, men det är tack och lov lätt att använda. Vi använder det i ett Sublime Build System senare för att göra vår Dart-fil (er) till JavaScript, så vi behöver inte ens använda den på kommandoraden ändå.

För att skapa byggsystemet behöver vi vägen till vår frogc körbar. Detta hämtades med Dart SDK (som du antingen hämtade med Dart Editor eller i sig). Det kommer att ligga på dart-sdk / bin / frogc. "dart-sdk" kommer antingen vara där du hämtade och släppte ut SDK-enheten själv eller nestad precis inuti pil mapp som också innehåller programmet Dart Editor, som kommer att vara där du placerade den.

Vi behöver en kommandorad-kompatibel sökväg till frogc. På Mac OS kan du göra det här:

Öppna ett Terminal-fönster och dra in grodjan i den. Fönstret kommer att innehålla texten på sökvägen för filen du släppte.

För Windows:

Klicka på adressfältet i fönstret. Det ska bli en vanlig textväg för mappen, som du då kan kopiera. Du måste lägga till "\ frogc.bat" i slutet för att få vägen till frogc, inte bara bin-mappen.

Om du är på Linux vet du förmodligen redan hur man gör det här.

Se till att banan är absolut och lätt tillgänglig. Placera det på ditt urklipp eller i en skraptextfil för nästa steg.


Steg 5: Skapa ett Dart Build-system för att kompilera JavaScript

För att göra detta språkpaket verkligen Användbar, vi borde skapa ett Build System, vilket låter oss köra filer genom ett kommandobeskrivning.

I Sublime Text väljer du Verktyg> Byggsystem> Nytt byggsystem ... meny. Du kommer att presenteras med en ny fil med följande standardinnehåll:

"cmd": ["make"]

Detta är bara ett JSON-objekt som beskriver ett mycket grundläggande byggkommando. Vi lägger mycket mer till detta för att göra det användbart för Dart-utveckling.

Med den vägen bestämde du dig i det sista steget som var tillgängligt, vi kan redigera vårt sublima-build fil.

Om du är på Mac eller Linux ändrar du innehållet i filen till:

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

Ovanstående är vad jag har på mitt Mac-system. Där det står / Program / dart / dart-sdk / bin / frogc, lägg till i din egen frogc väg.

Om du är på Windows, ser filen ganska lik, men du bör ändra "cmd"linje till:

 "cmd": "cmd", "/ C", "C: \\ infoga sökväg här \\ frogc.bat", "$ file"], "file_regex": "^ (. + \\. dart) : (\\ d +): (\\ d +):. + \\ [0m (. +) $ "," selector ":" source.dart "

För att förklara kortfattat vad detta gör, ska cmd egendom är i princip bara vad som ska köras på kommandoraden. frogc är enkelt att använda: använd bara kommandot och mata in en fil. De $ file En del av den raden är en variabel som expanderas automatiskt till sidan av den aktuella filen.

På Windows är saker som lite funkier som standard (åtminstone i det här scenariot, det är inte en gräv hos Microsoft, jag svär!). Vad vi har kommer att köra Windows-kommandoraden (cmd) med "håll inte terminalfönstret upp" -parametern (/ C, även om "hålla terminalfönstret upp" / K parametern visar inte heller den) och kör frogc.bat och skickar den hela filbanan. Det här är det snabba sättet att få det att fungera, men verkar ge upphov till fel i den nuvarande byggnaden. Detta är förmodligen ett tillfälligt problem, eftersom vid tidpunkten för skrivningen produceras dessa fel med standard SDK och inte den senaste SDK. Se nästa steg för en alternativ rutt.

De file_regex raden är för felrapportering. Om en rad i utmatningen av kommandot matchar det här vanliga uttrycksmönstret, känns det som ett fel och trycker på F4 kommer att markera dem för dig på utmatningspanelen.

Tyvärr använder frogc text-styling koder för att göra delar av felmeddelandet en annan färg och / eller fetstil. När du rör in i Sublime Text presenteras dessa stilkoder som vanlig text, så utmatningen kan vara lite svår att läsa, med [0m och liknande koder peppared bland den mänskliga läsbar texten. Jag är inte medveten om någon väg runt detta, tyvärr.

Slutlinjen, väljare, specificerar det räckvidd där detta byggsystem ska äga rum. Med denna uppsättning till source.dart, Dart-filer ska automatiskt välja detta Build System. Sublime Text 2 vet att en ".dart" -fil är en, ja, en Dart-fil tack vare den språkgrammatik vi installerade.

Spara den här filen som Dart-frogc.sublime-build i [Sublim data] / Paket / Användare / Dart /


Valfritt Power-User steg för Windows

För att undvika ovannämnda fel på Windows och även göra ditt byggsystem mer anpassat till Mac- och Linux-versionerna, kan vi lägga till mappen dart-sdk bin i Windows-miljön, så att Sublime Text vet att vi letar efter frogc.

Om du vill lägga till sökvägen klickar du på Start, högerklicka på Dator och väljer Egenskaper. (Alternativt: Kontrollpanelen> System och säkerhet> System.) Klicka på "Avancerade systeminställningar" och sedan på "Miljövariabler".

Hitta nu variabeln "Sti", antingen i Användarvariabler eller Systemvariabler (det fungerar med heller). Om det inte existerar kan du klicka på Ny för att skapa det, men om det existerar, klickar du på New, så var försiktig.

Lägg till rätt väg till slutet av det som redan finns där, med hjälp av ett semikolon för att skilja det från allt annat. Du behöver inte flytta snedstreck eller ersätta mellanslag med understreck eller något liknande. Mine ser ut som:

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

(Bläddra i rutan ovan till höger.)

Det låter dig springa frogc c: \ whatever \ source.dart från kommandofönstret, men det fungerar fortfarande inte i Sublime Text 2. Av någon anledning kräver ST2 på Windows att du ska ange filtillägget i din byggsystemfil, som så:

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

Vid denna tidpunkt borde du ha ett användbart byggsystem på Windows som är mindre benägna att bryta.


Steg 6: Använda byggsystemet

Fortsätt och prova vårt nya Build System. Öppna en Dart-fil och tryck på F7 eller Kontroll-B (på Mac, Kommando-B). "B" för Build.

Du borde se att utmatningspanelen öppnas längst ner, och om pilen är felfri ser du bara [Färdiga].

Om du har fel får du mycket mer komplicerad produktion. Till exempel:

När detta händer trycker du på F4 att gå framåt genom de olika fellinjerna, och Shift-F4 att flytta bakåt. Felsökningen kommer att markeras i utmatningspanelen och din markör placeras på linjen och kolumnen som identifierats av felet.


Steg 7: Börja bygga snippets

Det finns potentiellt många användbara utdrag att läggas till i en Dart-bunt. Låt mig komma igång med att lägga till ett utdrag som skapar en ny metod.

Från menyn Sublime Text väljer du Verktyg> Nytt stycke ... Du kommer igen att presenteras med en standardfil, den här i XML-format. Ändra innehållet till:

  metod source.dart 

Gärna ändra innehållet i nod från metod till något annat som du hittar mer användbart. Det här är vad du skriver innan du trycker på Flik för att få utdraget.

Spara filen som method.sublime-kodavsnitt (förlängningen är avgörande, basnamnet är vad ditt kodavsnitt kommer att visas som i menyerna) på följande plats i förhållande till din Sublime Text 2 Packages-mapp:

/Dart/method.sublime-snippet

Du bör redan ha mappen "Dart" från installationen av språkgrammatikfilen.

Nu kan du prova ditt nya utdrag (du kan behöva starta om Sublime Text, men jag tror att det här inte längre är ett problem).

I en Dart-fil skriver du "metod" (eller vad du angav, om du smidda din egen flikutlösare), trycker du på Tab och ser den expandera. Du kan fliken genom de olika stoppen, börjar vid returtypen, sedan till metodnamnet, och slutligen mellan parenteserna om du vill lägga till argument. Den sista fliken kommer att släppa dig i den första raden i metoden.

Den snygga delen är det om du ändrar returtypen från ogiltig, du får en automatisk returnera null uttalande i slutet av din metod kropp. Naturligtvis vill du anpassa detta till dina behov, men förhoppningsvis är det en funktion som sparar lite typing. Magien händer i den obevekliga andra raden av utdraget. om du aldrig har sett det här förut är det lite svårt att förklara koncist, men det ser på innehållet i det första flikstoppet (returtypen) och om det är något annat än "ogiltig", lägger den till returnera null. Det kan vara meningslöst om du någonsin har använt vanliga uttryck, särskilt med substitutionssyntaxen av / Mönster / substitut / hittades i Perl.

Fältet är öppet för att skapa tidsbesparande Dart-fragment. Skicka gärna dina formulär i kommentarerna.


Det är allt

Och där har du det Användare som föredrar en viss textredigerare över allt annat kan fortsätta att göra det, även med det här nya Dart-språket. Tack för att du läste, och jag hoppas att du lärde dig något om Sublime Text 2: s extensibility under vägen.