Visual Studio
Code Vim

Creato Novembre 2022

Utilizzo Visual Studio Code da diverso tempo ormai, ma negli ultimi anni, grazie a questa estensione, ho imparato ad apprezzare le scorciatoie di un altro editor di testi chiamato VIM.

VIM ha un approccio diverso dal convenzionale per quanto riguarda la manipolazioni di testi.

Si tiene alla larga dall’utilizzare il mouse come è consueto fare nella maggior parte dei programmi e si focalizza, invece, nel tenere le mani per il maggior tempo possibile sulla tastiera velocizzando e rendendo più ergonomica l’esperienza di lavoro.

Le sue combinazioni di tasti vengono reimplementate nei più popolari editor di testi ed è così che è nata l’estensione Visual Studio Code Vim ed ora vanta di più di 11 mila stelle su Github e 4 milioni di download sullo store di Microsoft.

La facilità di cambiare una sezione di codice senza mai togliere le mani dalla tastiera grazie a VSCodeVim.

Cosa mi ha spinto a contribuire

Una delle funzioni di VSCodeVim che trovo particolarmente utile è un plugin, originalmente di Vim, chiamato Vim Surround il quale, da come si può intuire dal nome, permette di circondare del testo in svariati modi.

Ecco alcuni esempi di quello che si può fare con Vim Surround assumendo che il cursore si trovi sulla prima lettera di ogni riga.

Partendo da Hello world circondato da virgolette. Premendo c, s, virgolette, virgolette singole si transforma in Hello World circondato da virgolette singole — Change surrounding double quotes with single quotes.

Partendo da Hello world circondato da virgolette singole. Premendo c, s, virgolette singole, t, p si transforma in Hello World circondato da p tag — Change surrounding quotes with a paragraph tag.

Partendo da Hello world circondato da p tag. Premendo d, s, t, si transforma in Hello World non circondato da niente — Delete surrounding tag.

Partendo da Hello world. Premendo y, s, i, w, parentesi graffa si transforma in Hello World — Surround inner word with curly braces padded with spaces.

Ho notato che nella versione di VSCode non era presente la possibilità di circondare del testo con una funzione come è, invece, possibile nella versione originale.

Guardando nella repository ho trovato un’issue riguardante il problema il che mi ha fatto venire voglia di provare al risolvere il problema.

Un’occhiata alla codebase

L’estensione è scritta totalmente in Typescript, utilizza TSLint come linter, Prettier per lo stile, Jest per i test, e Webpack e Docker per trasformare il codice in una copia l’estensione funzionante da poi importare in VSCode.

Dopo aver creato il mio fork mi sono messo al lavoro in una feature branch e ho completato la mia versione dell’implementazione completa di test ed ho subito aperto una pull request!

Ed ecco come appare dal vivo, le combinazioni di tasti sono:

ys per comunicare al plugin Vim Surround di voler aggiungere qualcosa
t; seleziona il testo partendo dal cursore a ; (si legge come "to semicolon")
f dice al plugin di voler circondare con una funzione
format! è il nome della funzione (o tecnicamente macro in questo caso)
Enter per confermare il testo

Dopo qualche mese ricevo un’email, la mia pull request era stata approvata! Un altro mese dopo la mia contribuzione diventa finalmente viene inclusa in una versione di rilascio disponibile a tutti!

Spero che il mio contributo possa essere di aiuto, quelle che teoricamente possono essere, milioni di persone e di continuare a contribuire in futuro.

Cosa ho imparato dall’esperienza

Ho fatto esperienza nel navigare una codebase così grande e capire in quale modo funziona.

Ad interagire e collaborare con persone che di cui conosco solo la passione del voler collaborare ad un progetto comune grazie a Git e Github.

Che contribuire all’Open Source non è così spaventoso come sembrava di essere, tutte le persone con cui ho interagito sono state gentili e felici che io abbia aiutato.