Suggerimenti per portare la bellezza di Visual Studio Code a Vim.

Premessa

Voglio iniziare col dire che questo non è un articolo per denigrare gli editor. Puoi usare qualunque editor di testo tu voglia. In effetti non importa. Sto solo scrivendo questo perché ho trovato in Vim un livello di produttività che non ho mai ottenuto con qualsiasi editor usato prima (Sublime Text, Atom o VSCode).

Se hai sentito parlare di Vim, e desideri provarlo, spero che questo articolo possa darti un poco della familiarità che troveresti in VSCode.

Perché Vim?

Ci sono tante ragioni per usare Vim, queste sono alcune delle mie.

Mantieni le Tue Mani a Ore 10 e 2

Quando usi solo la tastiera, ottieni una spinta intrinseca nella produttività semplicemente perché non devi fisicamente spostare le tue mani. Forse sarai anche cintura nera di movimento mouse, e ti potresti spostare avanti e indietro a una velocità tale che il movimento risulti invisibile a occhio nudo. Per il resto di noi semplici umani, ci vuole tempo.

E ora un po' di matematica veloce.

Ci vogliono 600ms per spostare la mano dai "tasti home" al mouse. In media, per amor di discussione, lo faccio una volta al minuto mentre sto scrivendo del codice, che sia per scorrere le videate, per passare a un nuovo file, o qualcosa di simile.

600 (tempo sprecato in millisecondi) x 60 (volte all'ora) x 5 (ore nelle quali scrivo codice) = 180,000ms sprecati =

3. Minuti.Ogni.Giorno.

Va bene, forse non è poi così male, tuttavia quei tre minuti potrebbero essere meglio spesi scrivendo una funzione oppure rifattorizzando del codice, non agitando la mano come se fossi Harry Potter!

Velocità

La mia citazione preferita che descrive cos'è scrivere codice in Vim è:

“Scrivi codice alla velocità del pensiero”

Vim è concepito attorno all'idea che tu stia comunicando direttamente con il tuo computer. Tu gli dici cosa vuoi fare, e lui lo fa per te. Ciò che a me ha fatto aprire gli occhi è stata questa piccola constatazione:

Cancellare tutto quanto si trova tra due oggetti (parentesi, apici, ecc.) è tanto semplice quanto digitare "di" più il simbolo che racchiude l'oggetto, per esempio per eliminare il contenuto del testo piazzato tra due apici digita

di'

Questo è solo un assaggio delle stupefacenti scorciatoie che puoi utilizzare con Vim.

Sono un Vero Programmatore!

Parte del viaggio per imparare VIM è esporre te stesso al mondo UNIX. Ho l'impressione che più conosci cose come bash, migliori saranno le tue qualità di programmatore.

È probabile che tu abbia una riga di comando ben impostata. Non sarebbe bello se il tuo editor di codice e la tua riga di comando potessero lavorare insieme?

Come Fai a Uscire da Vim?

È altamente probabile che qualche volta tu abbia modificato con Vim un file su un server Linux, e che non riuscissi ad uscire dal file. Diciamo, ad esempio, modificando la chiave SSH su Digital Ocean. Se conosci VIM...non ti devi preoccupare di questo!

La Vera Ragione per la Quale sono Passato a Vim

E' ora di essere onesti. La vera ragione che mi ha fatto passare a Vim è stata guardare Kyle Mathews (creatore di Gatsby.js) che lo usava durante una  demo.

Funzionalità di VS Code e Loro Equivalenti

Convinto? Bene, ecco alcuni strumenti!

Sistema di Plugin

Vim di per sé è piuttosto scarno. Per aggiungere i plugin, deve avere un meccanismo per gestirli. Entra in scena Plug:

junegunn/vim-plug

Nota: ci sono diversi gestori di plugin in circolazione. Ho scelto Plug senza una ragione particolare. Mi piace, e non ho mai avuto problemi usandolo. Per tua informazione, Vundle è deprecato.

Cercare i File

Negli anni, ci sono state un mucchio di soluzioni per la ricerca dei file, come indica la moltitudine di risposte nei forum. Ho provato diverse combinazioni e alla fine ho scelto questa:

Fuzzy Finder(fzf) + Ripgrep

Fzf è un plugin di ricerca fuzzy molto ben progettato e mantenuto, e funziona sia da riga di comando che da Vim.

Nota: potresti vedere Ag(Silver searcher) in molti articoli, tuttavia il progetto del plugin relativo ad Ag non è più mantenuto, pertanto suggerisco RipGrep.

Intellisense

Il sistema di completamento automatico (Intellisense) in VSCode è probabilmente la sua migliore funzionalità. Per nostra fortuna è stato portato su Vim!

neoclide/coc.nvim

CoC ha un proprio sistema di estensioni, che ricalca quello di VSCode. È facile da usare e ben documentato (la parte più importante).

Nota: potresti vedere qualche vecchio articolo che parla di YouCompleteMe, ma per quanto mi risulta non è più mantenuto.

File System Explorer

VSCode, come la maggior parte degli editor moderni, è dotato di un file explorer. Quello nativo di Vim netrw va bene, e ho visto parecchi articoli come questo, che dicevano che non ti serve nient'altro. Tuttavia trovo che NERDTree sia troppo utile per non usarlo.

scrooloose/nerdtree

Integrazione con Git

Qui devo essere onesto, eseguo la maggior parte delle mie interazioni con Git direttamente dal terminale. Tuttavia, VSCode ha una divisione dello schermo per il comando git diff incredibilmente accattivante. Per ottenere quel livello di integrazione prova questo plugin:

tpope/vim-fugitive

Plugin aggiuntivi che potresti volere

Queste sono alcune delle estensioni che usavo con Visual Studio Code e che volevo portare in Vim.

Autocomplete Brackets

Questo piccolo bel pacchetto chiuderà automaticamente quelle parentesi fastidiose.

jiangmiao/auto-pairs

File Icons

Questo aggiungerà icone a cose tipo NERDTree.

ryanoasis/vim-devicons

Prettier

Forse non lo sai, ma il team ufficiale di Prettier ha un plugin Vim. Fantastico! Inoltre è incredibilmente semplice da impostare.

prettier/vim-prettier

Fallo funzionare nel salvataggio automatico, dai un'occhiata a questo articolo.

Snippets - Frammenti di Codice

Sappi che se usi il plugin Conquer of Completion, puoi importare gli snippet di VSCode!

Prova questo per vedere come farlo:

neoclide/coc.nvim

Questo è il pacchetto di snippet di React che sto usando.

xabikos/vscode-react

Altre cose

La casa per i plugin di Vim è Vim Awesome.

Vim Awesome

Un gran bel posto per vedere le persone che usano Vim:

Vimcasts - Screencasts gratuiti sull'editor di testo Vim

Dotfiles

Ho rimappato alcuni tasti per facilitare le cose, puoi vedere il mio dotfile per tutto quanto.

DarthOstrich/dotfiles

Pensieri Finali

Il Mio Viaggio

Ora uso esclusivamente Vim, dopo averci messo circa un anno per impararlo. All'inizio lo usavo solo per il miei progetti personali, poiché il mio livello di produttività era basso. Dovevo sempre fermarmi per cercare informazioni su come fare qualcosa. Tuttavia ho abbandonato VSCode completamente circa 4 mesi fa, e non ho alcuna intenzione di tornare indietro.

Ci vuole disciplina

Impare Vim potrebbe sembrare scoraggiante, e francamente, lo è. Richiede l'imposizione di auto disciplina. D'altro canto, non serve dappertutto in ambito di sviluppo? Non c'è strumento/linguaggio/framework che abbia mai imparato che non avesse richiesto un certo qual livello di pratica deliberata.

Vim è una scelta di vita. Ci vorrà del tempo per abituarsi e sarà frustrante a volte. Tuttavia se perseveri, ti garantisco che il tuo flusso di lavoro migliorerà. Come sempre, buona programmazione!

Risorse Aggiuntive per Imparare (in lingua inglese)

Mastering Vim Quickly — Jovica Ilic

8 Vim Tricks That Will Take You From Beginner to Expert

Riferimenti (in lingua inglese)

Switching to Vim

10 simple Linux tips which save 50% of my time in the command line

VSCode ha un sacco di ottime estensioni e Live Server è una delle migliori.

Con appena un paio di click, Live Server ti permette di vedere la tua pagina live in un browser vero e proprio. Meglio ancora, ricarica automaticamente la pagina quando aggiorni il tuo codice, così i cambiamenti sono visibili subito sul browser.

Tutto quello che devi fare è fare clic col tasto destro nel file HTML che vuoi vedere, quindi selezionare "Apri in Live Server":

E se il Live Server non si apre nel browser e non mostra la pagina come ti aspetti? Se stai avendo questo problema, ecco alcune cose che puoi provare.

Riavvia VSCode

A volte la cosa migliore che puoi fare è riaprire VSCode da zero.

Prima di tutto, salva tutto il tuo lavoro. Poi chiudi VSCode, fermando così anche tutte le estensioni che hai installato.

Poi riapri VSCode e prova di nuovo, vai al file HTML che vuoi vedere, clicca col pulsante destro e seleziona "Apri in Live Server".

Imposta il browser per il Live Server

È possibile che l'estensione funzioni, ma che il tuo sistema non abbia un browser di default.

Anche se hai impostato un browser di default per il tuo sistema, non può far male dire al Live Server quale browser vuoi usare in maniera esplicita.

Come prima cosa, apri la Command Pallete con F1, poi digita Preferences: Open Settings (JSON) e seleziona questa opzione.

Questo aprirà il file di impostazioni settings.json di VSCode.

Scorri alla fine del file, aggiungi una virgola dopo l'ultima impostazione e incolla "liveServer.settings.CustomBrowser": "chrome":

Nota che puoi anche usare "firefox", "safari" o qualsiasi altro browser come valore per l'impostazione "liveServer.settings.CustomBrowser".

Infine, salva il file settings.json e prova di nuovo a eseguire Live Server.

Imposta il browser di default per il sistema operativo

Anche dopo aver detto al Live Server quale browser vuoi usare, è possibile che non stia comunque aprendo la pagina nel browser correttamente.

La prossima cosa da fare è impostare il browser di default del sistema operativo stesso.

Il metodo esatto per farlo può variare in base al tuo sistema operativo, quindi è meglio fare una ricerca per scoprire come farlo se non ne sei sicuro.

Ecco come appare la pagina delle impostazioni in Windows:

Vai alla pagina live manualmente

Se per qualche ragione il Live Server non sta ancora aprendo la pagina nel browser automaticamente, non preoccuparti. Puoi sempre aprire il browser di tua scelta e vedere la pagina direttamente.

Apri il tuo browser preferito e vai a http://127.0.0.1:5500/<your_file_name>.

Per esempio, se il tuo file si chiama index.html, vai a http://127.0.0.1:5500/index.html.

Se il Live Server è in esecuzione, dovresti vedere la pagina.

Per concludere

Queste sono alcune delle cose che puoi provare se il Live Server non sta funzionando nel modo in cui ti aspetti.

Buona programmazione!