Comment écrire un plugin Atom pour augmenter les capacités de ce bel éditeur? Simplement d’un coup de Javascript.

Introduction

Atom est un bon IDE multi-langages et surtout extensible grâce à ses plugins. Dans cet article, je vais vous expliquer comment écrire un tel plugin.

Objectif

L’objectif de mon plugin est de déployer un projet web dans tomcat. Rien d’extraordinaire mais c’est toujours utile. J’avoue que j’ai cherché si un tel plugin est disponible mais je n’ai rien trouvé de probant. Donc je me suis décidé à écrire cette petite fonctionnalité dans Atom. Le plugin sera nommé “gtg-deploy-tomcat” et devra permettre de choisir le dossier du projet à déployer ainsi que le dossier de destination dans Tomcat, par le biais d’un fichier gtg-deployment.json.

Création du plugin

Cette étape est simple puisque Atom intègre un modèle de plugin. Il faut lancer le programme de création comme ceci:

  • Ctrl + Shift + P pour invoquer la palette de commandes.
  • Chercher “package generator”.
  • Entrez le nom de votre plugin (pour moi gtg-deploy-tomcat).

Une nouvelle fenêtre Atom apparaît, avec le code source du plugin. Un petit Ctrl + Shift + F5 le fera apparaître dans le menu “Packages”.

Structure du plugin

Le plugin, écrit en Javascript, est structuré selon cette arborescence:

  • keymaps/gtg-deploy-tomcat.json: il contient le raccourci clavier utilisé pour activer et désactiver le plugin.
  • lib/gtg-deploy-tomcat-view.js: contient la définition de la vue, c’est à dire comment le plugin va s’afficher.
  • lib/gtg-deploy-tomcat.js: il s’agit du code du plugin.
  • menus/gtg-deploy-tomcat.json: ce fichier contient la définition de l’intégration du plugin dans les menus Atom.
  • spec/gtg-deploy-tomcat-spec.js: ici on trouve les tests unitaires du plugin.
  • spec/gtg-deploy-tomcat-view-spec.js: ensuite les tests unitaires pour la vue.
  • styles/gtg-deploy-tomcat.less: la feuille de style, au format LESS.
  • CHANGELOG.md: la liste des modifications apportées au plugin.
  • LICENSE.md: la licence de distribution et utilisation du plugin.
  • package.json: la description du plugin.
  • README.md: la description qui sera affichée sur la page github.

Modifications

Changer le nom du menu

Dans le dossier “menus”, il faut éditer le fichier .json (gtg-deploy-tomcat dans mon cas) puis modifier le contenu de comme suit:

  • context-menu > atom-text-editor > label: remplacer “Toggle” par le nom de votre choix.
  • menu > submenu > submenu > label: remplacer “Toggle” par le même nom que précédemment.

Après avoir sauvé le fichier, une petit Ctrl + Shift + F5 et le menu apparaît sous son nouveau nom.

Changer le raccourci clavier

Par défaut, le raccourci vers le plugin est Ctrl + Shift + O, ce que je ne trouve pas super adapté. Je vais le remplacer par Ctrl + Shift + Alt + D (il y a beaucoup de raccourcis en Ctrl + Shift). Pour cela, il faut éditer le fichier .json présent dans le dossier “keymaps” (facile). Dans mon cas, le JSON est le suivant:

    
1{
2  "atom-workspace": {
3    "ctrl-shift-alt-d": "gtg-deploy-tomcat:toggle"
4  }
5}

Ensuite, ça devient habituel: sauver puis Ctrl + Shift + F5 et le plugin s’active avec le raccourci choisi.

Lorsque le plugin est activé

Lorsque le plugin est activé, il doit effectuer plusieurs opérations pour réaliser le déploiement du projet web. On va donc éditer le fichier .js du dossier lib/ et modifier la fonction “toggle” pour effectuer les actions suivantes:

  1. Trouver le fichier de déploiement.
  2. Lire le fichier.
  3. Exécuter la copie des fichiers indiqués.
  4. Afficher un message de confirmation.

Code final

Je ne vais pas décrire tout le code, c’est assez pénible à écrire et à lire. Je vous propose de télécharger le zip contenant le plugin. Comme d’habitude, vous pouvez en faire ce que bon vous semble (même l’utiliser, soyons fous!).

Parmi les points à noter, j’ai utilisé une variable pour déterminer si le plugin est visible ou non. En effet, Atom ne gère pas l’état “affiché” ou “masqué” lors de l’appel de la fonction “toggle”: la fonction est appelée à chaque invocation du plugin. Il faut donc gérer cet état sous peine de déployer le projet lors de l’appel du plugin (visible donc) et lorsqu’on veut masquer la fenêtre de résultat.

Conclusion

Atom est un éditeur simple (en comparaison d’un IDE comme IntelliJ de JetBrains) et très efficace pour développer en Html / Css / Javascript. Grâce à son système de plugins, il est facilement possible de lui adjoindre des fonctionnalités pour gagner en productivité.