Astuce Configuration de Sublime Text 2 pour le codage Dart

Sublime Text 2 est un éditeur de texte puissant, apprécié pour sa disponibilité multiplate-forme et son aptitude à tirer parti des capacités TextMate préexistantes. Combinez Sublime Text 2 avec le nouveau langage Dart de Google, et les codeurs de puissance peuvent être très heureux.


Mise à jour: nouveau guide vidéo

Note de l'éditeur: Depuis que cet article a été publié, il est devenu obsolète. Il existe maintenant un flux de travail bien meilleur pour l’utilisation de Dart dans Sublime Text 2, ce que Timothy Armstrong explique dans cette vidéo:


L'article original est laissé non édité ci-dessous.


Conditions préalables

Pour que cela aille vite, je suppose que vous avez des connaissances fondamentales. Vous devez connaître les éléments suivants pour cette astuce:

  • Une connaissance pratique des paquets Sublime Text 2. La majeure partie de cette astuce est centrée sur les étapes nécessaires à la création de notre propre paquet Dart, mais si vous n'avez jamais utilisé d'extrait de code auparavant, vous voudrez peut-être sauvegarder pendant une seconde et en apprendre davantage sur Sublime Text..
  • Une connaissance pratique de Dart aidera également. Nous ne coderons pas vraiment de Dart dans cette astuce, mais le fait de disposer de quelques fichiers Dart permettant de tester des choses nous aidera grandement..
  • Nous allons extraire le code d'un dépôt Subversion et, même si je vais vous donner la commande à utiliser, j'espère que ce n'est pas la première fois que vous utilisez Subversion..
  • Enfin, une connaissance générale de votre système d'exploitation est nécessaire. Nous aurons besoin de faire une petite quantité de configuration et si vous êtes à l'aise, par exemple, la modification d'un .bash_profile déposer via le terminal, alors tout ira bien.

Si vous avez besoin de lectures préalables, je vous renvoie aux informations suivantes:

  • La documentation Sublime Text 2 (même officieuse) est conservée à sublimetext.info/docs. Les pages sur les packages, les définitions de syntaxe et les extraits de code ont été particulièrement utiles pour la rédaction de ce conseil..
  • Vous trouverez des informations sur les fléchettes sur le site officiel ou en suivant le didacticiel Introduction à la fléchette d'Activetuts.
  • Beaucoup a été écrit sur Subversion, sans parler d'un livre complet en ligne. C’est un peu plus que ce dont vous avez besoin, il suffit simplement d’installer Subversion et d’extraire un seul dossier.
  • Google sera votre ami pour en savoir plus sur la configuration de votre système..

Étape 1: Installez Dart Editor

Nous n'utiliserons pas vraiment l'éditeur de fléchettes (le but de ce didacticiel est d'utiliser Sublime Text pour le développement de Dart), mais le téléchargement inclut le SDK Dart, qui est vraiment ce que nous recherchons. Même si vous êtes un fanatique inconditionnel de Sublime Text 2, installer l’éditeur de fléchettes "officiel" n’est pas une très mauvaise idée..

Sur le site officiel de Dart, vous pouvez télécharger l'éditeur de fléchettes à partir du lien suivant:

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

Sous "Étape 1" de cette page, vous trouverez un lien vers un fichier ZIP contenant les éditeurs de fléchettes. Cela varie entre 70 et 100 Mo, selon votre système d'exploitation. Le téléchargement n'est donc pas très lourd. Mais commencez!

L'éditeur de fléchettes est basé sur Eclipse. Par conséquent, si vous l'avez déjà utilisé, vous serez parfaitement à l'aise avec l'éditeur de fléchettes. Je ne vais pas entrer dans les détails sur son utilisation dans ce tutoriel, mais n'hésitez pas à jouer avec. Le didacticiel d'introduction à Dart Activetuts + (actuellement disponible exclusivement sur Facebook) vous explique l'utilisation de base de l'éditeur de fléchettes..

Notez que si vous ne souhaitez pas installer Dart Editor, vous pouvez télécharger uniquement le SDK Dark pour votre système d'exploitation à cette adresse URL (il ne s'agit que de 2 ou 3 Mo):

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


Étape 2: Si vous avez Linux 64 bits

Si vous ne pas Si vous avez une installation Linux 64 bits, vous pouvez ignorer cette étape. (Oui, cela inclut les utilisateurs de Windows et Mac. Faites défiler pour suivre les instructions.)

Si vous sont sur une installation Linux 64 bits, vous devez installer une bibliothèque 32 bits pour pouvoir exécuter le compilateur Dart, même si vous avez téléchargé l'éditeur de Dart 64 bits. Je ne suis pas un gourou de Linux, mais cela a fonctionné pour moi, sur mon installation Ubuntu 11.

Accédez au Centre de logiciel et recherchez "lib32stdc ++ 6" ou "GNU Standard C ++ Library 32 bit". Installez-le. Vous pouvez continuer avec les prochaines étapes pendant l’installation - assurez-vous simplement que cette bibliothèque a été installée avec succès avant de tenter d’exécuter le système de construction..


Étape 3: Télécharger le fichier de langue Dart TextMate de Google

Le fichier de langue TextMate est hébergé sur Google Code ici (affichage Web dans le référentiel)..

Cela fait en fait partie d'un plus grand ensemble TextMate (mais pas tellement plus grand), mais nous ne nous intéressons qu'à la grammaire linguistique..

Avant de récupérer ce fichier, créez un emplacement pour qu'il soit installé sur votre système. Vous devrez créer un dossier nommé Dard à l'emplacement suivant, selon votre système d'exploitation:

  • Mac OS: ~ / Bibliothèque / Application Support / Sublime Text 2 / Packages / Dart
  • Windows 7: C: \ Utilisateurs \ Administrateur \ AppData \ Roaming \ Sublime Text 2 \ Packages \ Dart
  • Linux: ~ / .config / sublime-text-2 / Packages / Dart

Puis ouvrez votre interface de ligne de commande et naviguez jusqu’à l’intérieur de la nouvelle fenêtre créée. Dard dossier.

Subversion ne facilite pas l'extraction d'un seul fichier, mais nous pouvons exporter un seul fichier. Entrez cette commande:

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

Après un moment, vous devriez avoir le Dart.tmLanguage fichier dans votre dossier Dart.

Allez-y et essayez-le (vous devrez peut-être redémarrer Sublime Text). Ouvrez un fichier Dart et vérifiez la syntaxe colorée:


Un fichier Dart simple dans Sublime Text 2, affichant la coloration syntaxique

Étape 4: localisez votre frogc Exécutable

frogc est le compilateur Dart-to-JavaScript. C'est un outil en ligne de commande, mais heureusement, il est facile à utiliser. Nous l'utiliserons plus tard dans un système de construction Sublime pour convertir notre (s) fichier (s) Dart en JavaScript. Nous n'avons donc même pas besoin de l'utiliser en ligne de commande..

Pour construire le système de construction, nous avons besoin du chemin de notre frogc exécutable. Cela a été téléchargé avec le SDK Dart (que vous avez téléchargé avec l'éditeur de fléchettes ou par lui-même). Il sera situé à dart-sdk / bin / frogc. "dart-sdk" sera soit l'endroit où vous avez téléchargé et décompressé le SDK, soit imbriqué juste à l'intérieur de la dard dossier qui contient également l'application Dart Editor, qui sera l'endroit où vous l'avez placé.

Nous avons besoin d'un chemin compatible avec frogc compatible avec la ligne de commande. Sur Mac OS, vous pouvez faire ceci:

Ouvrez une fenêtre de terminal et faites-y glisser frogc. La fenêtre contiendra le texte du chemin du fichier que vous avez déposé.

Pour les fenêtres:

Cliquez dans la barre d'adresse de la fenêtre. Il doit se transformer en chemin de texte brut pour le dossier, que vous pouvez ensuite copier. Vous aurez besoin d'ajouter "\ frogc.bat" à la fin pour obtenir le chemin d'accès à frogc, pas seulement le dossier bin.

Si vous êtes sous Linux, vous savez probablement déjà comment faire cela..

Assurez-vous que le chemin est absolu et facilement disponible. Placez-le dans votre presse-papiers ou dans un fichier de travail pour l'étape suivante..


Étape 5: Créer un système de génération de fléchettes pour compiler JavaScript

Faire ce paquet de langue vraiment utile, nous devrions configurer un système de construction, qui nous permet d’exécuter des fichiers via une commande de construction du shell.

Dans Texte sublime, choisissez le Outils> Système de construction> Nouveau système de construction… menu. Vous serez présenté avec un nouveau fichier avec le contenu par défaut suivant:

"cmd": ["make"]

Ceci est juste un objet JSON qui décrit une commande de construction très basique. Nous ajouterons beaucoup plus à cela pour le rendre utile pour le développement de Dart.

Avec ce chemin que vous avez déterminé à la dernière étape et facilement disponible, nous pouvons modifier notre sublime-build fichier.

Si vous êtes sur Mac ou Linux, modifiez le contenu du fichier en:

"cmd": ["/ Applications / dart / dart-sdk / bin / frogc", "$ fichier"], "fichier_regex": "^ (. + \\. dart): (\\ d +): (\ \ d +):. + \\ [0m (. +) $ "," sélecteur ":" source.dart "

Ce qui précède est ce que j'ai sur mon système Mac. Où il est dit / Applications / dart / dart-sdk / bin / frogc, ajoutez votre propre chemin frogc.

Si vous êtes sous Windows, le fichier sera assez similaire, mais vous devriez changer le "cmd"ligne à:

 "cmd": ["cmd", "/ C", "C: \\ insérer le chemin ici \\ frogc.bat", "$ fichier"], "fichier_regex": "^ (. + \\. dart) : (\\ d +): (\\ d +):. + \\ [0m (. +) $ "," sélecteur ":" source.dart "

Pour expliquer brièvement ce que cela fait, le cmd la propriété est fondamentalement juste ce qu'il faut exécuter sur la ligne de commande. frogc est simple à utiliser: il suffit d’appeler la commande et de l’alimenter dans un fichier. le fichier $ une partie de cette ligne est une variable qui est étendue automatiquement à la page du fichier actuel.

Sous Windows, les choses sont un peu plus funky par défaut (du moins dans ce scénario; ce n'est pas une folie chez Microsoft, je le jure!). Ce que nous avons va exécuter la ligne de commande Windows (cmd) avec le paramètre "ne pas laisser la fenêtre de terminal ouverte" (/ C, même si le "garde la fenêtre du terminal" / K paramètre ne l’affiche pas non plus), et lancez frogc.bat en lui passant le chemin complet du fichier. C'est le moyen rapide de le faire fonctionner, mais semble produire des erreurs dans la construction actuelle. Il s’agit probablement d’un problème temporaire, car au moment de l’écriture, ces erreurs sont générées avec le SDK standard et non avec le dernier SDK. Voir l'étape suivante pour un autre itinéraire.

le file_regex La ligne sert à signaler les erreurs. Si une ligne de la sortie de la commande correspond à ce modèle d’expression régulière, elle est reconnue comme une erreur et appuyez sur F4 les mettra en surbrillance pour vous dans le panneau de sortie.

Malheureusement, frogc utilise des codes de style de texte pour rendre les parties du message d'erreur d'une couleur et / ou d'une gras différents. Quand ils sont redirigés dans Sublime Text, ces codes de style sont présentés sous forme de texte normal, de sorte que la sortie peut être un peu difficile à lire, avec [0m et des codes similaires parsemés parmi le texte lisible par l'homme. Malheureusement, je ne suis au courant d'aucune solution..

La ligne finale, sélecteur, spécifie la portée dans laquelle ce système de génération doit avoir lieu. Avec ceci réglé à source.dart, Les fichiers de fléchettes doivent choisir automatiquement ce système de construction. Sublime Text 2 sait qu’un fichier ".dart" est un, enfin, un fichier Dart grâce à la grammaire linguistique que nous avons installée.

Enregistrer ce fichier sous Dart-frogc.sublime-build dans [Données sublimes] / Packages / Utilisateur / Dart /


Etape Power-User facultative pour Windows

Pour éviter les erreurs mentionnées ci-dessus sous Windows et pour adapter votre système de construction aux versions Mac et Linux, nous pouvons ajouter le dossier bin dart-sdk à l'environnement Windows, afin que Sublime Text sache y rechercher les données de frogc..

Pour ajouter le chemin, cliquez sur Démarrer, puis cliquez avec le bouton droit sur Ordinateur et sélectionnez Propriétés. (Alternativement: Panneau de configuration> Système et sécurité> Système.) Cliquez sur "Paramètres système avancés", puis sur "Variables d'environnement".

Maintenant, recherchez la variable "path", dans les variables utilisateur ou système (cela fonctionne avec l'une ou l'autre). S'il n'existe pas, vous pouvez cliquer sur Nouveau pour le créer, mais s'il existe, cliquer sur Nouveau le remplacera alors faites attention..

Ajoutez le chemin correct à la fin de ce qui existe déjà, en utilisant un point-virgule pour le séparer de tout le reste. Inutile d'échapper aux barres obliques ou de remplacer les espaces par des traits de soulignement ou quelque chose du genre. Le mien ressemble à:

C: \ Windows \ system32; C: \ Windows; C: \ Windows \ System32 \ Wbem; C: \ Utilisateurs \ Administrateur \ Téléchargements \ dart-win32-dernières \ dart-sdk \ bin

(Faites défiler la case ci-dessus à droite.)

Ça va te laisser courir frogc c: \ quel que soit \ source.dart à partir de la fenêtre de commande, mais cela ne fonctionnera toujours pas dans Sublime Text 2. Pour une raison quelconque, ST2 sous Windows nécessite que vous spécifiiez l'extension du fichier dans votre fichier système de génération, comme suit:

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

À ce stade, vous devriez avoir un système de compilation utilisable sous Windows moins susceptible de se briser..


Étape 6: Utiliser le système de construction

Allez-y et essayez notre nouveau système de construction. Ouvrez un fichier Dart et appuyez sur F7 ou Contrôle-B (sur le Mac, Command-B). "B" pour Build.

Vous devriez voir le panneau de sortie s’ouvrir en bas, et si le Dart est sans erreur, vous verrez juste [Fini].

Si vous avez des erreurs, vous aurez une sortie beaucoup plus complexe. Par exemple:

Lorsque cela se produit, appuyez sur F4 pour avancer par les différentes lignes d'erreur, et Maj-F4 reculer. La ligne d'erreur sera mise en surbrillance dans le panneau de sortie et votre curseur sera placé sur la ligne et la colonne identifiées par l'erreur..


Étape 7: Commencez à créer des extraits

Il existe potentiellement de nombreux extraits utiles à ajouter à un ensemble de fléchettes. Laissez-moi vous aider à commencer en ajoutant un extrait qui crée une nouvelle méthode.

Dans le menu Texte sublime, choisissez Outils> Nouvel extrait… Vous serez à nouveau présenté avec un fichier par défaut, celui-ci au format XML. Changer son contenu en:

  méthode source.dart 

N'hésitez pas à changer le contenu de la noeud de méthode à quelque chose d'autre que vous trouverez plus utile. C’est ce que vous tapez avant d’appuyer sur Tab afin d’obtenir le fragment.

Enregistrez le fichier sous method.sublime-snippet (l'extension est cruciale; le nom de base correspond à ce que votre extrait de code va afficher, comme dans les menus), à l'emplacement suivant par rapport à votre dossier Sublime Text 2 Packages:

/Dart/method.sublime-snippet

Vous devriez déjà avoir le dossier "Dart" de l'installation du fichier de grammaire linguistique.

Maintenant, essayez votre nouvel extrait (vous devrez peut-être redémarrer Sublime Text, mais je pense que ce n'est plus un problème).

Dans un fichier Dart, tapez "méthode" (ou ce que vous avez spécifié, si vous avez falsifié votre propre déclencheur de tabulation), appuyez sur Tabulation et observez-le se développer. Vous pouvez parcourir les différents arrêts, en commençant par le type de retour, puis par le nom de la méthode, et enfin entre les parenthèses si vous souhaitez ajouter des arguments. Le dernier onglet vous laissera tomber à la première ligne de la méthode.

La partie intéressante est que si vous modifiez le type de retour de vide, vous obtenez un automatique retourne null déclaration à la fin de votre corps de méthode. Naturellement, vous voudrez l'adapter à vos besoins, mais j'espère que c'est une fonctionnalité qui vous permettra d'économiser un peu de frappe. La magie se passe dans la deuxième ligne lourde de l'extrait; Si vous n'avez jamais vu cela auparavant, il est un peu difficile à expliquer de manière concise, mais le contenu du premier point de tabulation (le type de retour) est examiné et le résultat est différent de "vide", ajoute le retourne null. Si vous avez déjà utilisé des expressions régulières, en particulier avec la syntaxe de substitution / pattern / substitute / trouvé à Perl.

Le champ est largement ouvert pour la création d'extraits de Dart permettant de gagner du temps. N'hésitez pas à poster vos extraits dans les commentaires.


C'est tout

Et voila; ceux qui préfèrent un éditeur de texte à l’autre peuvent continuer à le faire, même avec ce nouveau langage Dart. Merci de m'avoir lu et j'espère que vous avez appris quelque chose sur l'extensibilité de Sublime Text 2 tout au long du processus..