Kib's Memo

Komodo Edit

Article numéro 1 écrit le dimanche 23 septembre 2007 à 10 h 21 min dans les catégories : IDE
KomodoIDE

KomodoEdit est le nouvel IDE de la firme ActiveState , contrairement à son grand frère KomodoIDE, celui-ci est gratuit et dispose de ses principales fonctionnalités. (La seule chose qui manque vraiment est l'arbre de classes/méthodes pour naviguer plus facilement dans vos sources).

Il permet d'éditer beaucoup de langages de scripts dont :

  • Perl, PHP, Python, Ruby et Tcl;
  • JavaScript, CSS, HTML et XML

Enfin, KomodoEdit est scriptable en JavaScript ou Python, mais sachez qu'il faudra aussi connaître les bases de XUL pour pouvoir vraiment étendre ses capacités.

J'ai fait ce petit guide car l'interface de l'IDE n'est pas des plus simples à prendre en main au départ, en particulier pour les snippets.

Configurer la vue d'ensemble:

Allez dans le menu View/Tabs et cochez tout, faites de même avec View/Toolbars sauf peut-être pour l'option "Show button text", mais c'est une affaire de gôut.

Rendez-vous ensuite dans le menu "Edit/Preferences..." et cliquez sur "Fonts and colors" dans la liste.

3 ou 4 Schemes (configurations déjà établies) sont là, mais encore une fois, vous pouvez y ajouter la votre.

Enfin, dans la liste "Editor", cochez "show line numbers".

Comment lancer un script ?

Une fois Komodo Edit lancé, allez dans le menu Tools/Run Command... qui est aussi accessible par le raccourci clavier Ctrl+R. Vous devriez obtenir un nouveau dialogue comme celui-ci (les champs n'étant pas encore remplis pour vous):

Run_Command

Appuyez alors sur la flèche comme vous l'indique le cadre marron sur l'image précédente :

Commandes

Choisissez "%(python)" qui représente le chemin de votre exécutable Python et ajoutez-y " %f" pour le nom du fichier courant.

Revenez maintenant dans le dialogue Run Command pour accéder au champ "Start in", appuyez sur la flèche tout au bout pour obtenir ceci :

StartIn

Choisissez "%D" : le répertoire ou se situe le fichier que vous éditez.

Nous n'éditerons pas le champ "Run in", il est configuré par défaut pour que la sortie de votre scxript s'affiche dans la partie Command Output tout en bas de l'IDE. Néanmoins, libre à vous de choisir si vous désirez une console indépendante.

Votre environnement est maintenant fonctionnel si tout se passe bien.

En cas de problème, pensez à verifier le chemin de votre interpréteur dans le menu "Edit/Preferences..." qui ressemble à ceci:

Pref_Lang

[TODO] : lancer un script avec des arguments

Comment créer des snippets ?

Les snippets sont de petits bouts de textes qui vous permettrons de gagner un temps non négligeable lorsque vous éditez vos sources.

Supposons par exemple que vous vouliez entrer la balise suivante dans votre code HTML afin d'insérer un lien, vous feriez donc comme ceci:

<a href="adresse du lien">texte qui apparait à la place de l'adresse</a>

La syntaxe est lourde, il y a des balises partout et il faut reconnaître qu' elles sont un peu pénibles à entrer au clavier, bref c'est une grosse perte de productivité.

On va donc créer un snippet pour cela. Rendez-vous dans la ToolBox, c'est à dire la partie droite de votre IDE. Faites un clic-droit et choisissez "Add/New Snippet...".

Vous avez alors devant vous ce petit dialogue :

Snippet_editor

Donnez-lui un nom dans le premier champ, pour faire original j'ai choisi 'lien'.

Maintenant, entrez ceci dans le champ de texte

<a href="[[%tabstop:Adresse]]">[[%tabstop:Remplacement]]</a>

Mais qu'est-ce que cette synatxe à deux-balles vous demandez-vous ? Ni plus ni moins que celle des snippets ! Mais rassurez-vous, un mémo est toujours là pour vous aider à entrer vos snippets, il suffit pour cela de cliquer sur la petite flèche en haut à droite du champ de texte.

Un menu apparaît alors vous permettant de choisir le raccourci désiré. En ce qui nous concerne, ce sera le premier , à savoir "[[%tabstop]]", c'est aussi le plus puissant de tous. Les autres étant réservés pour insérer la date courante ou le nom du fichier que vous éditez.

Une fois votre snippet édité, faites bien attention à la place de votre curseur (représenté en rouge) dans le champ de texte. Vous pouvez décider de sa position finale une fois que votre snippet sera completé. Placez-le ou vous voulez, mais pas dans un des champs "[[%tabstop]]".

Vous pouvez ensuite cochez les deux cases en bas du dialogue, je ne traduis pas, elles parlent d'elles-mêmes.

Appuyez enfin sur "Apply" puis "OK" et rendez-vous dans l'éditeur pour tester.

Au fait, vous avez remarqué qu'on pouvait aussi assigner au snippet un raccourci clavier hein ? Je vous conseille de ne pas en mettre, et vous verrez pourquoi bientôt...

Placez le curseur ou bon vous semble dans la zone de texte de votre IDE, dans la toolbox, cliquez deux fois sur "lien" (c'est le nom de votre snippet). Voici ce que vous devriez obtenir, modulo mon shebang qui n'a rien à faire là dans un document html :)

Snip_phase1

Après un appui sur Tab, voici ce qu'on obtient :

Snip_phase2

Tapez l'adresse que vous souhaitez :

Snip_phase3

a nouveau sur Tab et entrez à nouveau le texte du remplacement :

Snip_phase4

Des triggers pour mes snippets:

Je vous ai déjà dit qu'il ne valait mieux pas innonder votre IDE avec des raccourcis clavier, même si l'IDE possède des keybindings pour EMacs/Vim, on s'y perd très vite avec nos snippets.

Pour le moment, insérer un snippet est plutôt une tâche lourde car elle nécessite l'intervention de la souris pour aller dans la ToolBox.

Qu'a cela ne tienne, nous allons créer une macro pour insérer nos snippets dès qu'on entrera leur nom dans la zone de texte de l'IDE. Il suffira alors d'appuyer sur votre raccourci clavier pour l'activer.

Autrement dit, il nous suffira d'un seul raccourci clavier pour tous les activer.

Allons dans la ToolBox, "Add/Macro", apellez-la comme bon vous semble, "TextMate" m'a paru joli.

MacroTM

Maintenant, placez ceci dans la zone de texte (JavaScript coché) :

komodo.view.setFocus();
try {
    komodo.editor.wordLeftExtend();
    var snippet = komodo.interpolate('%s');
    var tmpl = komodo.findPart("snippet", snippet, "container");
    if(tmpl) {
        Snippet_insert(tmpl);
    } else {
        var msg = "no snippet found named " + snippet;
        StatusBar_AddMessage(msg,"debugger",5000,true);
    }
} catch(e) {
    alert(e);
}

Changez d'onglet pour "Key Bindings" et choisissez-vous un raccourci clavier, comme vous le voyez, j'ai choisi Ctrl+Tab (Attention : évitez Tab à tout pris!).

MacroTM_key

Validez, entrez maintenant "lien" dans la zone de texte de l'IDE, pressez Ctrl+Tab (ou votre raccourci), le snippet s'active : admiration...

N'oubliez pas que pour passer au prochain tabstop, il faudra appuyer sur Tab :)

Astuces:

Tuer un processus:

Créer une nouvelle macro JavaScript (je l'ai nommée "Kill_Process") dans laquelle vous entrerez cette ligne:

ko.run.output.kill(-1);

Affectez-la avec un raccourci clavier (j'ai choisi Ctrl-Shift-K), vous pouvez maintenant arrêter tranquilement un script lancé.

Extensions:

MoreKomodo est une extension vous permettant de manipuler des fichiers ou répertoires, mais aussi de faire quelques manipulations simples sur du texte et de gérer des favoris.

Commentaires (Voir)