Suggerimento rapido configurazione di Sublime Text 2 per la codifica Dart

Sublime Text 2 è un potente editor di testo, popolare grazie alla sua disponibilità multipiattaforma e al suo talento per sfruttare le funzionalità TextMate preesistenti. Combina Sublime Text 2 con il nuovo linguaggio Dart di Google e i codificatori di potenza possono essere molto felici.


Aggiornamento: nuova guida video

Nota dell'editore: Poiché questo articolo è stato pubblicato per la prima volta, è diventato obsoleto. Ora c'è un flusso di lavoro molto migliore per l'uso di Dart in Sublime Text 2, che Timothy Armstrong spiega in questo video:


L'articolo originale è lasciato inedito sotto.


Prerequisiti

Affinché ciò avvenga rapidamente, presumo che tu abbia delle conoscenze fondamentali. Dovresti avere familiarità con quanto segue per questo suggerimento:

  • Una conoscenza operativa dei pacchetti Sublime Text 2. La maggior parte di questo consiglio si concentra sui passaggi necessari per creare il nostro pacchetto Dart, ma se non hai mai usato uno snippet prima di poter eseguire il backup per un secondo e andare a saperne di più su Sublime Text prima.
  • Aiuterà anche una conoscenza pratica di Dart. In realtà non codificheremo alcun dardo, ma avere alcuni file Dart con cui testare le cose ti aiuterà molto.
  • Controlleremo il codice da un repository di Subversion e mentre ti fornirò il comando da utilizzare, si spera che questa non sia la prima volta che usi Subversion.
  • Infine, una conoscenza generale del tuo sistema operativo specifico è in ordine. Avremo bisogno di fare una piccola quantità di configurazione e se ti senti a tuo agio, ad esempio, modificando a .bash_profile file tramite il terminale, allora starai bene.

Se hai bisogno di materiale di lettura precedente, ti rimando a quanto segue:

  • La documentazione di Sublime Text 2 (comunque non ufficiale) è conservata su sublimetext.info/docs. Le pagine su Packages, Syntax Definitions e Snippet erano particolarmente utili nella stesura di questo suggerimento.
  • Le informazioni sulle freccette possono essere trovate sul sito ufficiale o seguendo il tutorial Introduzione a Dart di Activetuts
  • Molto è stato scritto su Subversion, per non parlare di un libro online completo. Questo è un po 'più di quello che ti serve, dato che devi semplicemente installare Subversion e fare il checkout di una singola cartella
  • Google sarà tuo amico quando si tratta di imparare di più sulla configurazione del tuo sistema.

Passaggio 1: installazione di Dart Editor

Non useremo l'Editor di Dart (il punto di questo tutorial è di usare Sublime Text per lo sviluppo di Dart, dopotutto), ma il download include Dart SDK, che è davvero quello che stiamo cercando. Anche se sei un appassionato fanatico di Sublime Text 2, non è ancora una pessima idea avere il Dart Editor "ufficiale" installato e maneggevole.

Sul sito Dart ufficiale, è possibile scaricare Dart Editor dal seguente link:

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

Sotto "Step 1" di quella pagina, troverai un link a un file ZIP contenente i Dart Editors. Si tratta di circa 70-100 MB, a seconda del sistema operativo, quindi non è un download terribilmente pesante. Ma comincia!

Il Dart Editor è basato su Eclipse, quindi se lo hai usato sarai a casa con Dart Editor. Non entrerò nei dettagli sull'utilizzo di questo tutorial, ma mi sento libero di giocarci. Il tutorial Dart introduttivo di Activetuts + (attualmente disponibile esclusivamente tramite Facebook) illustra l'utilizzo di base di Dart Editor.

Si noti che se non si desidera installare Dart Editor, è possibile scaricare solo l'SDK scuro per il proprio sistema operativo su questo URL (è solo 2 o 3 MB):

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


Passo 2: Se hai Linux a 64 bit

Se tu non avere un'installazione Linux a 64 bit, puoi saltare questo passaggio. (Sì, questo include utenti di Windows e Mac; scorrere verso il basso per le istruzioni.)

Se tu siamo su un'installazione Linux a 64 bit, è necessario installare una libreria a 32 bit per eseguire il compilatore Dart, anche se è stato scaricato il Dart Editor a 64 bit. Non sono un guru di Linux da nessuna parte, ma questo ha funzionato per me, sulla mia installazione di Ubuntu 11.

Vai al Software Center e cerca "lib32stdc ++ 6" o "GNU Standard C ++ Library 32 bit". Installalo. Puoi continuare con i prossimi passaggi durante l'installazione: assicurati che questa libreria sia stata installata correttamente prima di provare a eseguire il sistema di generazione.


Passaggio 3: scarica il file di lingua Dart TextMate di Google

Il file di lingua di TextMate è ospitato su Google Code qui (vista basata su Web nel repository).

Questo è in realtà parte di un bundle TextMate più grande (ma non molto più grande), ma siamo interessati solo alla grammatica della lingua.

Prima di prendere quel file, creare un percorso per farlo vivere sul tuo sistema. Dovrai creare una cartella chiamata Dardo nel seguente percorso, a seconda del tuo sistema operativo:

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

Quindi apri la tua interfaccia a riga di comando e vai all'interno di quella appena creata Dardo cartella.

Subversion non semplifica il checkout di un singolo file, ma possiamo esportare un singolo file. Inserisci questo comando:

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

Dopo un momento dovresti avere il Dart.tmLanguage file nella tua cartella Dart.

Vai avanti e provalo (potrebbe essere necessario riavviare Sublime Text). Apri un file Dart e controlla la sintassi colorata:


Un semplice file Dart in Sublime Text 2, che mostra l'evidenziazione della sintassi

Passaggio 4: Individua il tuo frogc eseguibile

frogc è il compilatore Dart-to-JavaScript. È uno strumento da riga di comando, ma è per fortuna facile da usare. Lo utilizzeremo in un sistema di generazione sublime in seguito per trasformare i nostri file Dart in JavaScript, quindi non abbiamo nemmeno bisogno di usarlo sulla riga di comando in ogni caso.

Per rendere il sistema di costruzione, abbiamo bisogno del percorso per il nostro frogc eseguibile. Questo è stato scaricato con Dart SDK (che hai scaricato con Dart Editor o da solo). Sarà situato a dart-sdk / bin / frogc. "dart-sdk" sarà o dove hai scaricato e decompresso l'SDK da solo, o annidato solo all'interno del dardo cartella che contiene anche l'applicazione Dart Editor, che sarà dove l'hai inserita.

Abbiamo bisogno di un percorso compatibile con la riga di comando per frogc. Su Mac OS, puoi fare ciò:

Apri una finestra di Terminale e trascina frogc su di essa. La finestra conterrà il testo del percorso del file che hai lasciato.

Per Windows:

Fare clic sulla barra degli indirizzi della finestra. Dovrebbe trasformarsi in un percorso di testo normale per la cartella, che è possibile copiare. Dovrai aggiungere "\ frogc.bat" alla fine per ottenere il percorso di frogc, non solo la cartella bin.

Se sei su Linux, probabilmente già sai come farlo.

Assicurati che il percorso sia assoluto e facilmente disponibile. Inseriscilo negli appunti o in un file di testo zero per il passaggio successivo.


Passaggio 5: creare un sistema Dart Build per compilare JavaScript

Per rendere questo pacchetto linguistico veramente utile, dovremmo impostare un sistema di compilazione, che ci consente di eseguire i file attraverso un comando di generazione della shell.

In Sublime Text, scegli il Strumenti> Crea sistema> Nuovo sistema di generazione ... menu. Ti verrà presentato un nuovo file con i seguenti contenuti predefiniti:

"cmd": ["make"]

Questo è solo un oggetto JSON che descrive un comando di compilazione molto semplice. Aggiungeremo molto di più a questo per renderlo utile per lo sviluppo di Dart.

Con quel percorso che hai determinato nell'ultimo passaggio prontamente disponibile, possiamo modificare il nostro sublime-build file.

Se utilizzi Mac o Linux, modifica il contenuto del file in:

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

Quanto sopra è quello che ho sul mio sistema Mac. Dove dice / Applicazioni / dardo / dardo-sdk / bin / frogc, aggiungi il tuo percorso frogc.

Se sei su Windows, il file sarà piuttosto simile, ma dovresti cambiare il "cmd"linea a:

 "cmd": ["cmd", "/ C", "C: \\ inserire il percorso qui \\ frogc.bat", "$ file"], "file_regex": "^ (. + \\. dart) : (\\ d +): (\\ d +):. + \\ [0m (. +) $ "," selector ":" source.dart "

Per spiegare brevemente cosa fa, il cmd la proprietà è fondamentalmente solo ciò che deve essere eseguito sulla riga di comando. frogc è semplice da usare: basta richiamare il comando e alimentarlo in un file. Il $ file parte di quella linea è una variabile che viene espansa automaticamente alla pagina del file corrente.

Su Windows, le cose sono un po 'più divertenti di default (almeno in questo scenario, non è uno spasso per Microsoft, lo giuro!). Quello che abbiamo eseguirà la riga di comando di Windows (cmd) con il parametro "non mantenere la finestra del terminale in alto" (/ C, anche se il "keep the terminal window up" /K parametro non lo mostra), ed esegui frogc.bat, passandogli il percorso completo del file. Questo è il modo rapido per farlo funzionare, ma sembra che produca errori nella build corrente. Questo è probabilmente un problema temporaneo, poiché al momento della stesura di questo documento questi errori vengono prodotti con l'SDK standard e non con l'ultimo SDK. Vedi il prossimo passo per un percorso alternativo.

Il file_regex linea è per scopi di segnalazione degli errori. Se una riga nell'output del comando corrisponde a questo modello di espressione regolare, viene riconosciuta come un errore e viene premuto F4 li evidenzierà per te nel pannello di output.

Sfortunatamente, frogc utilizza i codici di stile del testo per rendere le parti del messaggio di errore di un colore diverso e / o in grassetto. Quando vengono reindirizzati in Sublime Text, questi codici di stile sono presentati come testo normale, quindi l'output può essere un po 'difficile da leggere, con [0m e codici simili disseminati nel testo leggibile dall'uomo. Non sono a conoscenza di questo modo, purtroppo.

La linea finale, selettore, specifica l'ambito in cui questo sistema di generazione dovrebbe avere luogo. Con questo set a source.dart, I file Dart dovrebbero scegliere automaticamente questo sistema di costruzione. Sublime Text 2 sa che un file ".dart" è, beh, un file Dart grazie alla grammatica linguistica che abbiamo installato.

Salva questo file come Dart-frogc.sublime-build nel [Dati sublimi] / Pacchetti / Utente / Dart /


Power-User Step facoltativo per Windows

Per evitare i suddetti errori su Windows e rendere il tuo sistema di compilazione più in linea con le versioni Mac e Linux, possiamo aggiungere la cartella bin di dart-sdk all'ambiente Windows, in modo che Sublime Text sappia cercare lì per frogc.

Per aggiungere il percorso, fare clic su Start, quindi fare clic con il tasto destro del mouse su Computer e selezionare Proprietà. (In alternativa: Pannello di controllo> Sistema e sicurezza> Sistema.) Fai clic su "Impostazioni di sistema avanzate", quindi su "Variabili d'ambiente".

Ora trova la variabile "percorso", in Variabili utente o Variabili di sistema (funziona con entrambi). Se non esiste, puoi fare clic su Nuovo per crearlo, ma se esiste, fare clic su Nuovo lo sovrascriverà, quindi fai attenzione.

Aggiungi il percorso corretto alla fine di ciò che è già lì, usando un punto e virgola per separarlo da tutto il resto. Non è necessario sfuggire alle barre o sostituire spazi con caratteri di sottolineatura o simili. Il mio sembra:

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

(Scorri la casella in alto a destra.)

Questo ti lascerà correre frogc c: \ whatever \ source.dart dalla finestra di comando, ma ancora non funzionerà con Sublime Text 2. Per qualche ragione, ST2 su Windows richiede di specificare l'estensione del file nel file di sistema build, in questo modo:

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

A questo punto, dovresti avere un sistema di build utilizzabile su Windows che è meno probabile che si rompa.


Passaggio 6: utilizzo del sistema di generazione

Vai avanti e prova il nostro nuovo sistema di costruzione. Aprire un file DART e premere F7 o Control-B (sul Mac, Comando-B). "B" per Build.

Dovresti vedere il pannello di output aperto in basso, e se la Freccetta è priva di errori, vedrai [Finito].

Se hai errori, otterrai un output molto più complesso. Per esempio:

Quando ciò accade, premere F4 per andare avanti attraverso le varie linee di errore, e Shift-F4 per andare indietro. La riga di errore verrà evidenziata nel pannello di output e il cursore verrà posizionato sulla riga e sulla colonna identificate dall'errore.


Passaggio 7: iniziare a creare frammenti di codice

Ci sono potenzialmente molti snippet utili da aggiungere a un pacchetto Dart. Lasciatemi iniziare aggiungendo uno snippet che crea un nuovo metodo.

Dal menu Testo sublime, scegli Strumenti> Nuovo frammento ... Ti verrà nuovamente presentato un file predefinito, questo in formato XML. Cambia i suoi contenuti in:

  metodo source.dart 

Sentiti libero di cambiare il contenuto del nodo da metodo a qualcos'altro che troverai più utile. Questo è ciò che scrivi prima di premere Tab per ottenere lo snippet.

Salva il file come method.sublime-frammento (l'estensione è cruciale, il nome base è ciò che il tuo frammento viene visualizzato come nei menu), nella seguente posizione relativa alla tua cartella di pacchetti Sublime Text 2:

/Dart/method.sublime-snippet

Dovresti già avere la cartella "Dart" dall'installazione del file di grammatica della lingua.

Ora prova il tuo nuovo snippet (potrebbe essere necessario riavviare Sublime Text, ma penso che questo non sia più un problema).

In un file Dart, digita "method" (o qualunque cosa tu abbia specificato, se hai creato il tuo trigger di tabulazione), premi Tab e guardalo espandere. È possibile scorrere tra le varie fermate, a partire dal tipo di ritorno, quindi al nome del metodo e infine tra parentesi se si desidera aggiungere argomenti. L'ultima scheda ti lascerà cadere sulla prima riga del metodo.

La parte interessante è che se cambi il tipo di ritorno da vuoto, ottieni un automatico restituisce null dichiarazione alla fine del tuo corpo metodo. Ovviamente vorrete adattarlo alle vostre esigenze, ma si spera che sia una caratteristica che consente di risparmiare un po 'di battitura. La magia avviene nell'enorme seconda riga del frammento; se non l'hai mai visto prima, allora è un po 'difficile da spiegare in modo conciso, ma guarda il contenuto del primo tab stop (il tipo restituito) e se è qualcosa di diverso da "vuoto", aggiunge il restituisce null. Potrebbe avere senso se hai mai usato le espressioni regolari, in particolare con la sintassi di sostituzione di / Pattern / sostituto / trovato in Perl.

Il campo è aperto per la creazione di frammenti di Dart che fanno risparmiare tempo. Sentiti libero di inserire i tuoi frammenti nei commenti.


È tutto

E il gioco è fatto; quelli di utilizzo che preferiscono un determinato editor di testo rispetto a qualsiasi altra cosa possono continuare a farlo, anche con questo nuovo linguaggio Dart. Grazie per la lettura, e spero che tu abbia imparato qualcosa sull'estensibilità di Sublime Text 2 lungo la strada.