Hurtig Tips Konfigurere Sublime Tekst 2 for Dartkoding

Sublime Text 2 er en kraftig tekstredigerer, populær på grunn av tilgjengeligheten på kryssplattformen og dens evne til å utnytte eksisterende TextMate-funksjoner. Kombiner Sublime Text 2 med Googles nye Dart-språk, og strømkodere kan være veldig glade.


Oppdatering: Ny Video Guide

Redaktørens merknad: Siden denne artikkelen ble publisert, har den blitt utdatert. Det er nå en mye bedre arbeidsflyt for å bruke Dart i Sublime Text 2, som Timothy Armstrong forklarer i denne videoen:


Den opprinnelige artikkelen er ikke ledd nedenfor.


Forutsetninger

For at dette skal gå raskt, antar jeg at du har grunnleggende kunnskaper. Du bør være kjent med følgende for dette tipset:

  • Et arbeidskunnskap om Sublime Text 2-pakker. Det meste av dette tipset er sentralt i trinnene som kreves for å bygge vår egen Dart-pakke, men hvis du aldri har brukt en utdrag før du kanskje vil sikkerhetskopiere et sekund, og lære mer om Sublime Text først.
  • Et arbeidskunnskap om Dart vil også hjelpe. Vi vil egentlig ikke kode noen Dart i dette tipset, men å ha noen Dart-filer rundt som de skal teste på, vil hjelpe sterkt.
  • Vi sjekker koden ut av et Subversion-depot, og mens jeg skal mate deg kommandoen som skal brukes, forhåpentligvis er dette ikke første gang du bruker Subversion.
  • Endelig er en generell kunnskap om ditt operativsystem i orden. Vi må gjøre en liten mengde konfigurasjon, og hvis du er komfortabel, si, endre en .bash_profile fil via terminalen, så blir du bra.

Hvis du trenger litt tidligere lesemateriell, henviser jeg til følgende:

  • Sublime tekst 2 dokumentasjon (uoffisielt) holdes på sublimetext.info/docs. Sidene på pakker, syntaksdefinisjoner og utdrag var spesielt nyttige i skrivingen av dette tipset.
  • Dartinformasjon finnes på det offisielle nettstedet, eller ved å følge Activetuts 'Introduksjon til Dart-veiledning
  • Mye har blitt skrevet om Subversion, for ikke å nevne en komplett online bok. Det er litt mer enn du trenger, siden du bare trenger å ha Subversion installert og å sjekke ut en enkelt mappe
  • Google vil være din venn når det gjelder å lære mer om konfigurering av systemet.

Trinn 1: Installer Dart Editor

Vi vil egentlig ikke bruke Dart Editor (poenget med denne opplæringen er å bruke Sublime Text for Dart-utvikling, tross alt), men nedlastingen inneholder Dart SDK, noe som egentlig er det vi leter etter. Selv om du er en hardcore Sublime Text 2 fanatiker, er det fortsatt ikke en forferdelig ide å ha den "offisielle" Dart Editor installert og hendig.

På den offisielle Dart-siden kan du laste ned Dart Editor fra følgende lenke:

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

Under "Trinn 1" på den siden finner du en lenke til en ZIP-fil som inneholder Dart-redigeringsprogrammet. Det er rundt 70-100 MB, avhengig av OS, så det er ikke en veldig tung nedlasting. Men kom i gang!

Dart Editor er basert på Eclipse, så hvis du har brukt det, vil du være hjemme med Dart Editor. Jeg vil ikke komme inn på detaljer om å bruke den i denne opplæringen, men vær så snill å leke med den. Activetuts + Initial Dart-opplæringen (for øyeblikket utelukkende tilgjengelig via Facebook) tar deg gjennom den grunnleggende bruken av Dart Editor.

Merk at hvis du ikke vil installere Dart Editor, kan du laste ned bare Dark SDK for operativsystemet ditt på denne nettadressen (det er bare 2 eller 3 MB):

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


Trinn 2: Hvis du har 64-bit Linux

Hvis du ikke Har en 64-bit Linux installasjon, kan du hoppe over dette trinnet. (Ja, det inkluderer deg, Windows og Mac-brukere; rul ned for instruksjonene dine.)

Hvis du er På en 64-biters Linux-installasjon må du installere et 32-biters bibliotek for å kunne kjøre Dart-kompilatoren, selv om du har lastet ned 64-biters Dart Editor. Jeg er ikke en Linux-guru med noen strekk, men dette virket for meg, på min Ubuntu 11-installasjon.

Gå til Software Center og søk etter "lib32stdc ++ 6" eller "GNU Standard C ++ Library 32 bit". Installer den. Du kan fortsette med de neste trinnene mens den installeres - bare vær sikker på at dette biblioteket har blitt installert før du forsøker å kjøre byggesystemet.


Trinn 3: Last ned Googles Dart TextMate Language File

TextMate-språkfilen er vert på Google Code her (nettbasert visning i depotet).

Dette er faktisk en del av en større TextMate-pakke (men ikke så mye større), men vi er bare interessert i språket grammatikk.

Før vi tar tak i den filen, må du opprette et sted for at den skal kunne leve på systemet ditt. Du må opprette en mappe som heter Dart på følgende sted, avhengig av operativsystemet ditt:

  • Mac os: ~ / Bibliotek / Programstøtte / Sublim tekst 2 / Pakker / Dart
  • Windows 7: C: \ Brukere \ Administrator \ AppData \ Roaming \ Sublime Text 2 \ Packages \ Dart
  • Linux: ~ / .Config / sublime-tekst-2 / Packages / Dart

Åpne deretter kommandolinjegrensesnittet ditt og naviger til innsiden av den nylig opprettede Dart mappe.

Subversion gjør det ikke enkelt å sjekke ut en enkelt fil, men vi kan eksportere en enkelt fil. Skriv inn denne kommandoen:

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

Etter et øyeblikk bør du ha Dart.tmLanguage filen i Dart-mappen din.

Gå videre og prøv det ut (du må kanskje starte Sublime Text). Åpne en DART-fil og sjekk ut den fargerike syntaksen:


En enkel Dart-fil i Sublime Text 2, som viser syntaxutheving

Trinn 4: Finn din frogc kjørbar

frogc er Dart-to-JavaScript-kompilatoren. Det er et kommandolinjeverktøy, men det er heldigvis enkelt å bruke. Vi bruker det i et Sublime Build System senere for å slå vår Dart-fil (er) til JavaScript, slik at vi ikke engang trenger å bruke det på kommandolinjen uansett.

For å gjøre byggesystemet trenger vi banen til vår frogc kjørbar. Dette ble lastet ned med Dart SDK (som du enten lastet ned med Dart Editor eller av seg selv). Det vil bli plassert på dart-SDK / bin / frogc. "dart-sdk" vil enten være hvor du lastet ned og pakket ut SDK av seg selv eller nestet bare inne i dart mappe som også inneholder Dart Editor-applikasjonen, som vil være der du plasserte den.

Vi trenger en kommandolinje-kompatibel bane til frogc. På Mac OS kan du gjøre dette:

Åpne et Terminal-vindu og dra inn frogc i det. Vinduet vil inneholde teksten til banen til filen du droppet.

For Windows:

Klikk i adressefeltet i vinduet. Det bør bli en vanlig tekstbane for mappen, som du deretter kan kopiere. Du må legge til "\ frogc.bat" på slutten for å få banen til frogc, ikke bare bin-mappen.

Hvis du er på Linux, vet du sannsynligvis allerede hvordan du gjør dette.

Pass på at banen er absolutt og lett tilgjengelig. Plasser den på utklippstavlen eller i en skrape tekstfil for neste trinn.


Trinn 5: Opprett et Dart Build-system for å kompilere JavaScript

For å lage denne språkpakken egentlig nyttig, vi bør sette opp et Build System, som lar oss kjøre filer gjennom en shell build-kommando.

I Sublime Text velger du Verktøy> Byggesystem> Nybyggingssystem ... Meny. Du vil bli presentert med en ny fil med følgende standardinnhold:

"cmd": ["make"]

Dette er bare et JSON-objekt som beskriver en veldig enkel bygge-kommando. Vi legger mye til dette for å gjøre det nyttig for Dart-utvikling.

Med den banen du har bestemt deg i det siste trinnet, er det lett tilgjengelig, vi kan redigere vår sublime-build fil.

Hvis du er på Mac eller Linux, endrer du innholdet i filen til:

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

Ovenstående er det jeg har på min Mac-system. Hvor det står / Applikasjoner / dart / dart-SDK / bin / frogc, legg i din egen frogc sti.

Hvis du er på Windows, vil filen se ganske lik, men du bør endre "cmd"linje til:

 "cmd": ["cmd", "/ C", "C: \\ sette inn banen her \\ frogc.bat", "$ file"], "file_regex": "^ (. + \\. dart) : (\\ d +): (\\ d +):. + \\ [0m (. +) $ "," selector ":" source.dart "

For å forklare kort hva dette gjør, cmd eiendom er i utgangspunktet bare hva som skal kjøres på kommandolinjen. frogc er enkel å bruke: bare påkalle kommandoen og gi den en fil. De $ fil En del av den linjen er en variabel som blir utvidet automatisk til siden av gjeldende fil.

På Windows, ting er litt funkier som standard (minst i dette scenariet, det er ikke en grave på Microsoft, jeg sverger!). Det vi har vil kjøre Windows-kommandolinjen (cmd) med "ikke hold terminal vinduet opp" parameteren (/ C, selv om "holde terminalvinduet oppe" / K parameteren viser det heller ikke), og kjører frogc.bat, og sender den hele filbanen. Dette er den raske måten å få det til å fungere, men synes å produsere feil i dagens bygg. Dette er sannsynligvis et midlertidig problem, da dette skrives opp, blir disse feilene produsert med standard SDK og ikke den nyeste SDK. Se neste trinn for en alternativ rute.

De file_regex Linjen er for feilrapporteringsformål. Hvis en linje i utgangen av kommandoen samsvarer med dette vanlige uttrykksmønsteret, er det gjenkjent som en feil og trykker på F4 vil markere dem for deg i utgangspanelet.

Dessverre bruker frogc tekst-styling koder for å gjøre deler av feilmeldingen en annen farge og / eller fet skrift. Når du piper inn i Sublime Text, presenteres disse stilkodene som vanlig tekst, slik at utdataene kan være litt vanskelig å lese, med [0m og lignende koder peppered blant den menneskelig lesbare teksten. Jeg er ikke klar over noen måte rundt dette, dessverre.

Den endelige linjen, velger, spesifiserer omfanget av dette byggesystemet. Med dette settet til source.dart, Dart-filer bør automatisk velge dette Build System. Sublime Text 2 vet at en ".dart" -fil er en, vel, en Dart-fil takket være språkgrammatikken vi installerte.

Lagre denne filen som Dart-frogc.sublime-build i [Sublime Data] / Pakker / Bruker / Dart /


Valgfritt Power-User Step for Windows

For å unngå de nevnte feilene på Windows, og gjør at ditt byggesystem passer mer i tråd med Mac- og Linux-versjonene, kan vi legge til mappen dart-sdk bin til Windows-miljøet, slik at Sublime Text vet å se etter frogc.

For å legge til banen, klikk Start, høyreklikk deretter Computer og velg Egenskaper. (Alternativt: Kontrollpanel> System og sikkerhet> System.) Klikk på "Avanserte systeminnstillinger" og deretter på "Miljøvariabler".

Finn nå variabelen "bane", enten i Brukervariabler eller Systemvariabler (den fungerer med enten). Hvis den ikke eksisterer, kan du klikke Ny for å opprette den, men hvis den eksisterer, klikker du Ny, overskriver den, så vær forsiktig.

Legg den riktige banen til slutten av det som allerede er der, bruk et semikolon for å skille det fra alt annet. Du trenger ikke å unnslippe skråstreker eller erstatte mellomrom med understreker eller noe sånt. Mine ser ut som:

C: \ Windows \ system32; C: \ Windows; C: \ Windows \ System32 \ Wbem; C: \ Users \ Administrator \ Downloads \ dart-win32-siste \ dart-SDK \ bin

(Bla boksen over til høyre.)

Det vil la deg løpe frogc c: \ hva \ source.dart fra kommandovinduet, men det vil fortsatt ikke fungere i Sublime Text 2. Av en eller annen grunn krever ST2 på Windows at du spesifiserer filtypen i din systemfil, slik som:

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

På dette tidspunktet bør du ha et brukbart byggesystem på Windows som er mindre sannsynlig å bryte.


Trinn 6: Bruke Byggesystemet

Gå videre og prøv vårt nye Build System. Åpne en Dart-fil, og trykk F7 eller Kontroll-B (på Mac, Kommando-B). "B" for Build.

Du bør se utgangspanelet åpne oppe nederst, og hvis dartet er feilfritt, ser du bare [Fullført].

Hvis du har feil, får du mye mer komplisert utgang. For eksempel:

Når dette skjer, trykk på F4 å bevege seg fremover gjennom de ulike feillinjene, og Shift-F4 å flytte bakover. Feilelinjen vil fremheve utgangspanelet, og markøren vil bli plassert på linjen og kolonnen som er identifisert av feilen.


Trinn 7: Start byggeprosjekter

Det finnes potensielt mange nyttige utdrag som skal legges til et Dart-bunt. La meg komme i gang ved å legge til en utdrag som lager en ny metode.

Fra menyen Sublime Text velger du Verktøy> Ny utdrag ... Du vil igjen bli presentert med en standardfil, denne i XML-format. Endre innholdet til:

  metode source.dart 

Du er velkommen til å endre innholdet i knutepunkt fra metode til noe annet som du finner mer nyttig. Dette er hva du skriver før du trykker på Tab for å få utklippet.

Lagre filen som method.sublime-tekstutdrag (utvidelsen er avgjørende, og basenavnet er hva koden din vil dukke opp som i menyene), på følgende sted i forhold til din Sublime Text 2 Packages-mappe:

/Dart/method.sublime-snippet

Du bør allerede ha mappen "Dart" fra installasjonen av språkgrammatikkfilen.

Prøv nå den nye versjonen din (du må kanskje starte Sublime Text, men jeg tror dette ikke lenger er et problem).

I en Dart-fil, skriv "metode" (eller hva du angav, hvis du smidd din egen fanutløser), trykk på Tab og se den utvide. Du kan bla gjennom de ulike stoppene, starter ved returtype, deretter til metodenavnet, og til slutt mellom parentesene hvis du vil legge til argumenter. Den siste fanen vil slippe deg på første linje i metoden.

Den kule delen er at hvis du endrer returtype fra tomrom, du får automatisk return null uttalelse på slutten av metoden kropp. Selvfølgelig vil du tilpasse dette til dine behov, men forhåpentligvis er det en funksjon som sparer litt skrive. Den magiske hendelsen skjer i den uhåndterlige andre linjen i koden; hvis du aldri har sett dette før, så er det litt vanskelig å forklare konsistent, men det ser på innholdet i det første tabstoppet (returtype) og hvis det er noe annet enn "tomrom", legger den til return null. Det kan være fornuftig hvis du noen gang har brukt vanlige uttrykk, spesielt med substitusjonssyntaxen til / Mønster / erstatning / funnet i Perl.

Feltet er bredt åpent for oppretting av tidsbesparende Dart-fragmenter. Du er velkommen til å legge inn dine utdrag i kommentarene.


Det er alt

Og der har du det De som bruker en bestemt tekstredigerer over alt annet, kan fortsette å gjøre det, selv med dette nye Dart-språket. Takk for at du leser, og jeg håper du har lært noe om Sublime Text 2s utvidbarhet underveis.