WebStorm
The JavaScript and TypeScript IDE
Exploitez la puissance de Vim dans WebStorm et d’autres IDE de JetBrains
Le plugin IdeaVim, qui permet aux développeurs d’utiliser Vim avec leur·s IDE JetBrains, existe depuis un certain temps déjà. Nous avons une équipe dédiée à la maintenance de ce plugin, qui travaille à vous offrir le meilleur des deux mondes : la rapidité d’un éditeur centré sur le clavier et la puissance d’un IDE.
Vim vous permet de vous déplacer dans votre texte et de le modifier de façon très fluide. Ses actions de mouvement en ont fait l’un des éditeurs de texte les plus appréciés des développeurs. Avec Vim, l’édition de texte est très efficace car vous pouvez naviguer rapidement sans recourir à la souris.
Dans cet article, nous examinons de plus près les principales fonctionnalités du plugin IdeaVim et expliquons comment commencer à l’utiliser.
Installer le plugin IdeaVim
Pour installer le plugin IdeaVim, allez dans Preferences / Settings | Plugins et recherchez IdeaVim sous l’onglet Marketplace. Vous pouvez installer le plugin depuis cette page.
Vous êtes maintenant prêt·e à utiliser Vim dans votre IDE.
Principales spécificités du plugin IdeaVim
Si vous connaissez déjà Vim, vous devriez être rapidement à l’aise avec l’utilisation d’IdeaVim. Si cela n’est pas le cas, voici quelques éléments de base qui vous aideront à vous familiariser avec ce plugin.
Première utilisation de Vim
Pour un nouvel utilisateur de Vim, le workflow lui semblera certainement très différent de ce dont il a l’habitude. Vim étant extrêmement centré sur le clavier, il faut un peu de temps pour se familiariser avec ses raccourcis clavier. La première chose à savoir sur Vim est qu’il propose plusieurs modes : Normal, Insert, Visual et Command.
Mode Normal : Esc
Le mode Normal est celui qui fait toute la particularité de Vim. Avec ce mode, appuyer sur une touche ne modifie pas le texte. Au lieu de cela, les touches font office de raccourcis qui permettent de se déplacer dans l’éditeur. En mode Normal, le curseur est plus épais que dans les autres modes.
Voici quelques-unes des commandes pour les mouvements de base :
h: déplace le curseur d’un caractère vers la gauche.l: déplace le curseur d’un caractère vers la droite.k: déplace le curseur d’une ligne vers le haut.j: déplace le curseur d’une ligne vers le bas.w: avance d’un mot.b: recule d’un mot.0: retourner au début de la ligne.$: aller à la fin de la ligne.
Cette liste est loin d’être exhaustive, il ne s’agit là que d’une sélection des commandes de mouvement les plus courantes et utiles lorsque l’on commence à utiliser Vim. Il est aussi possible de combiner des commandes de mouvement avec des chiffres, par exemple, 8j déplacera le curseur vers le bas de huit lignes et 6k remontera le curseur de six lignes.
Mode Insert: i
Le comportement du mode Insert est beaucoup plus proche de ce que la plupart des gens connaissent déjà. En mode Insert, les caractères sont ajoutés au fur et à mesure de la saisie, comme dans un éditeur de texte classique. Pour passer en mode Insert et pouvoir commencer à saisir du texte, appuyez simplement sur une touche correspondant à une commande d’insertion (une touche avec une lettre par exemple). Vous saurez que vous êtes en mode Insert car le curseur apparaîtra moins épais. Pour en sortir, il suffit d’appuyer sur la touche Échap.
Parmi les commandes d’insertion de base, vous trouverez :
i: fait passer Vim en mode Insert où que se trouve le curseur.a: déplace le curseur après le caractère sur lequel vous êtes et fait passer en mode Insert.o: insère une nouvelle ligne sous la ligne actuelle et fait passer en mode Insert sur la nouvelle ligne.
L’effet de ces commandes est légèrement différent lorsqu’elles sont exécutées avec leurs variantes en majuscules :
Maj+I: déplace le curseur au début de la ligne et fait passer en mode Insert.Maj+A: déplace le curseur à la fin de la ligne et fait passer en mode Insert.Maj+O: insère une nouvelle ligne au-dessus et fait passer en mode Insert sur la nouvelle ligne.
Mode Visual : v
Le dernier des principaux modes de Vim est le mode Visual. Avec ce mode, vous pouvez utiliser les commandes de mouvement pour ajuster la sélection, puis utiliser d’autres commandes comme d pour supprimer le texte sélectionné ou y pour copier la sélection. En bref, il vous permet de sélectionner le texte sur lequel vous souhaitez exécuter des commandes.
Les commandes visuelles de base incluent :
v: sélectionne le caractère où se trouve le curseur.Maj + V: sélectionne toute la ligne.d: supprime le texte sélectionné.y: copie le texte sélectionné.
Mode Commande : :
Le mode Commande permet d’exécuter différentes commandes dans le code. Pour passer en mode Commande, il suffit d’appuyer sur :. Une boîte dans laquelle vous pouvez saisir vos commandes s’ouvre alors en bas de la fenêtre de l’éditeur. Vous pouvez aussi utiliser / pour ouvrir un champ de recherche en bas de la fenêtre de l’éditeur, qui permet de rechercher des modèles et des correspondances de caractères.
Voici quelques-unes des commandes de base :
:w: enregistrer le fichier:100: aller directement à la ligne 100/: rechercher
Il ne s’agit que de quelques-unes des combinaisons de touches les plus basiques d’IdeaVim. Une fois que vous vous serez familiarisé avec les déplacements propres à Vim, vous naviguerez dans l’éditeur de texte beaucoup plus facilement et rapidement. Il existe de nombreuses autres commandes de Vim prises en charge dans IdeaVim que vous serez en mesure d’utiliser efficacement avec du temps et de la pratique.
Première utilisation d’un IDE JetBrains
L’utilisation d’un IDE vous donne accès à la refactorisation, au débogage et aux tests. Les IDE de JetBrains ne requièrent aucune configuration de l’environnement pour la prise en charge de langages spécifiques ou la recherche rapide. Par ailleurs, il fournissent des suggestions de modèles dynamiques et la saisie semi-automatique du code.
La principale différence entre Vim et IdeaVim est que, par défaut, IdeaVim ne fonctionne pas en dehors de l’éditeur. Plusieurs plugins sont disponibles pour enrichir IdeaVim et vous permettre de bénéficier d’une expérience encore plus proche de celle qu’offre Vim.
Plugins Vim supplémentaires
Il émule vim-easymotion et son objectif est simple : réduire le nombre de frappes sur le clavier nécessaires pour vous permettre d’atteindre l’emplacement souhaité dans votre code.
Vous devez tout d’abord installer un plugin supplémentaire. Ensuite, il faut ajouter le code suivant à votre fichier .ideavimrc :
Plug 'easymotion/vim-easymotion'
Le plugin NERDTree vous permet de naviguer dans le volet du projet en utilisant des raccourcis clavier de type Vim. Il émule NERDTree.
Ajoutez l’extrait de code suivant à votre fichier .ideavimrc :
Plug 'preservim/nerdtree`map <c-t> :NERDTree<CR>
Vous pouvez ajouter d’autres commandes pour NERDTree avec le fichier .ideavimrc.
Au-delà de ces quelques exemples, vous trouverez sur cette page une liste des principaux plugins Vim pour IdeaVim.
Utilisation d’IdeaVim avec votre IDE JetBrains
Configurer le fichier ideavimrc
L’une des différences majeures entre IdeaVim et Vim est que les IDE de JetBrains utilisent le fichier de configuration ~/.ideavimrc au lieu de ~/.vimrc.
Si vous utilisez déjà Vim et que vous avez configuré votre fichier vimrc comme vous le souhaitez, vous pouvez utiliser les mêmes paramètres dans IdeaVim. Ajoutez simplement source ~/.vimrc à votre fichier ideavimrc.
Si vous utilisez Vim pour la première fois, nous vous recommandons de prêter particulièrement attention à ce qui suit. Dans Vim, et par extension dans IdeaVim, vous pouvez paramétrer un fichier de configuration qui s’exécutera au démarrage de votre IDE. Il est possible d’ajouter des ensembles de commandes à ce fichier, ce qui vous permet de configurer vos paramètres.
Vous devez créer ce fichier vous-même dans le répertoire principal.
Créer le fichier ideavimrc
Dans la barre d’état, vous trouverez une icône IdeaVim. Pour créer le fichier, cliquez simplement sur l’icône IdeaVim et sélectionnez Create ~/.ideavimrc. Vous pouvez ensuite le modifier dans l’IDE. Consultez le contenu de cette discussion pour trouver des exemples de configurations d’autres utilisateurs.
Relier les raccourcis de Vim aux actions de l’IDE
IdeaVim peut agir comme un pont qui vous permet de bénéficier la fois des avantages de Vim et de ceux d’un IDE. Vous pouvez relier les raccourcis de Vim aux actions de l’IDE, par exemple map \r <Action>(ReformatCode). Ainsi, si vous utilisez \r et appelez l’action Reformat code dans l’IDE et elle utilisera la fonctionnalité de reformatage du code de l’IDE.
IdeaVim ajoute plusieurs commandes qui permettent de répertorier et d’exécuter les actions de l’IDE en tant que commandes exécutables et via des commandes de mappages :map.
Pour les mappages, vous pouvez utiliser un mot-clé spécial. Par exemple :map gh <Action>(ShowErrorDescription)
Cela active le survol du curseur lorsque vous appuyez sur gh.
Les actions les plus populaires incluent :
QuickJavaDoc: Quick Documentation (pour tous les langages).ShowErrorDescription: affiche une description de l’erreur sous le caret (au survol du curseur).QuickImplementations: fournit une infobulle avec plus de détails concernant le symbole sous le curseur.
Remarque : il est également possible d’exécuter des actions à partir de la boîte de commandes si vous ne souhaitez les utiliser qu’une seule fois.
Pour exécuter des actions, utilisez la séquence suivante : :action {action_id}. Cette commande exécutera l’action correspondante sur le code. Par exemple, :action ShowErrorDescription exécute l’action Show Error Description de l’IDE.
ideajoin
Les IDE de JetBrains disposent de la fonctionnalité Smart Join qui comprend le contexte du code et peut formater le code lorsqu’il est joint. Ainsi, lorsque vous utilisez la commande de join standard j de Vim, l’IDE utilisera toujours la fonctionnalité Smart Join. Pour activer cette fonctionnalité, il vous suffit d’ajouter set ideajoin à votre fichier ~/.ideavimrc. Vous trouverez ici des exemples de la façon dont Smart Join gère le code.
ideaput
Une dernière chose importante et d’activer ideaput pour le presse-papiers. Cela vous permettra d’utiliser l’insertion de l’IDE afin de pouvoir coller des éléments normalement à partir du presse-papiers ; sans cela, cela peut être compliqué.
Apprendre la configuration clavier de Vim
La maîtrise de l’édition façon Vim demande beaucoup de pratique. Pour progresser plus rapidement, il est préférable d’être complètement immergé et d’utiliser uniquement Vim. Mais dans certains cas, il peut arriver que cette façon de travailler nuise à votre productivité. Si vous souhaitez arrêter l’émulation de Vim, vous pouvez à tout moment cliquer sur l’icône IdeaVim dans la barre d’état et décocher Enabled.
Conseil supplémentaire : si vous avez du mal à vous souvenir des mouvements de Vim, de très bons aides-mémoires pour les raccourcis clavier de Vim sont disponibles en ligne. Vous pouvez ensuite définir l’image comme arrière-plan dans l’IDE : ouvrez Preferences / Settings | Appearance & Behavior | Appearance, puis cliquez sur le bouton Background Image.
Nous espérons que ceux et celles d’entre vous qui souhaitent utiliser Vim avec WebStorm ou tout autre IDE de JetBrains auront trouvé cet article utile. Si vous avez d’autres astuces et conseils à partager, ajoutez-les dans la section commentaires ci-dessous. Et si vous appréciez ce genre de contenu et aimeriez disposer d’un guide plus avancé sur l’utilisation d’IdeaVim, n’hésitez pas à nous le faire savoir.
L’Équipe WebStorm
Auteur de l’article original en anglais :
Subscribe to WebStorm Blog updates
