de Caleb Taylor

Un ghid pentru dezvoltarea web modernă cu (Neo) vim

Există o mulțime de editori extraordinari care oferă o mulțime de caracteristici pentru dezvoltarea web. Recreerea acelor caracteristici în Vim a fost întotdeauna o provocare. Îmi place Vim, dar am dedicat și un tonă de timp pentru a-mi regla setarea. Acest articol este un rezumat al rezultatului muncii mele.

Un ghid pentru dezvoltarea web moderna cu Neo vim
Jarvis în acțiune

eu folosesc coc.nvim și denite pentru a-mi alimenta experiența de codare. Denite este folosit pentru a găsi fișiere neclare, pentru a gestiona fișiere deschise și pentru a căuta proiectul. Coc.nvim conduce inteligență motor înfășurând multe dintre aceleași extensii de bază care acționează VSCode IDE. Pentru configurarea mea completă, inclusiv modul în care configurez aceste pluginuri și multe altele, verificați fișierele mele dot.

Notă: Voi face referire doar la Vim în acest articol, dar de fapt îl folosesc Neovim. Toate pluginurile funcționează și cu Vim – în funcție de versiune – dar lucruri precum funcția „fereastră plutitoare” vor fi specifice Neovim.

Introducere

Scriu TypeScript / JavaScript zilnic și știu cât de puternică este diferența dintre Vim și un editor precum VSCode. Există multe caracteristici disponibile în editorii moderni care necesită timp, expertiză și / sau pluginuri pentru a realiza în Vim.

Am creat următoarea listă de caracteristici pe care le aștept de la un editor modern. Funcțiile editorului standard (cum ar fi evidențierea sintaxei) nu sunt incluse.

  1. Găsirea fișierelor neclare – Dacă cunoașteți numele fișierului în proiect, ar trebui să îl puteți deschide rapid (cum ar fi – două apăsări de taste + numărul minim de caractere pentru numele de fișier unic).
  2. Comutarea fișierelor – Ar trebui să puteți vedea fișierele deschise și să comutați rapid între fișierele deschise, atât cu găsirea neclară, cât și cu navigarea manuală.
  3. Linting – Codul de scame trebuie să fie automat și rapid, și ar trebui să puteți utiliza un instrument de remediere a codului.
  4. Căutare de proiecte – Ar trebui să puteți căuta un șir arbitrar, să căutați un simbol, să găsiți definiții și să găsiți utilizările unui simbol.
  5. Code Intellisense – Faptul că IDE-ul dvs. vă oferă sugestii relevante, fără probleme și completări automate poate fi un impuls imens pentru productivitate. După părerea mea, „balena albă” pentru majoritatea utilizatorilor Vim.

Funcționarea tuturor acestor lucruri în Vim poate fi o durere. Există o mulțime de pluginuri din care puteți alege, configurații de modificat și documente de citit. După 7 ani de încercări și erori, am ajuns în sfârșit la configurarea mea într-un loc minunat. Cea mai bună parte?

Vă voi arăta cum să obțineți toate funcționalitățile de bază cu doar două pluginuri.

Nu voi acoperi toate caracteristicile acestor plugin-uri minunate sau nu voi enumera toate alternativele posibile (și există o mulțime de cele mai bune). Mă voi concentra pe evidențierea funcționalității de bază pe care o folosesc, precum și a oricăror mapări sau configurații pe care le folosesc pentru a crește experiența.

Deci, fără alte întrebări, să trecem la el.

Denite

Ce obții: Găsirea fișierelor neclare, gestionarea fișierelor, căutarea proiectelor

Nu am să mint, Denite este destul de nebun. Aruncă o privire la documentele. La un nivel de bază, oferă un strat de identificare fuzzy, deasupra unei grămezi de funcționalități de bază. A fost construit de legendar Shougo, un maestru Jedi al lui Vim.

Denite este construit pe lambdalisue / neovim-prompt. Are o interfață completă, cu care poate dura ceva timp să te obișnuiești. Puteți crea meniuri personalizate și puteți utiliza multe surse personalizate cu Denite ca strat deasupra.

Noțiuni de bază

Folosesc în primul rând Denite pentru găsirea fișierelor în proiectul meu și gestionarea fișierelor deschise. Am configurat Denite pentru utilizare ripgrep pentru a-mi alimenta căutarea. Poti sa vezi cum am configurat în configurarea mea.

Am toate caracteristicile cheie mapate pentru acces rapid și ușor. Cheile pe care le folosesc pentru aceste mapări sunt doar preferințe personale și ar trebui personalizate pentru fiecare utilizator. Folosesc opțiunea „fereastră plutitoare” pentru mapările mele Denite, dar sunt acceptate și alte variante (cum ar fi divizările orizontale / verticale).

Gestionarea fișierelor deschise

; afișează o listă a fișierelor deschise în prezent. Puteți începe să tastați și vă va permite să căutați în mod fuzzy prin fișierele deschise curente. Cu lista de fișiere deschisă,<ctrl> o vă permite să răsfoiți lista ca dvs.re in modul normal, unde puteți deschide și / sau șterge orice fișiere din listă.

Un ghid pentru dezvoltarea web moderna cu Neo vim
Gestionarea bufferelor deschise cu Denite

Fuzzy Finding Files

<leader> t fuzzy-caută fișiere în directorul curent. Cu ripgrep, toate fișierele din your .gitignore sunt, de asemenea, ignorate.

1612165388 290 Un ghid pentru dezvoltarea web moderna cu Neo vim
Fișiere de căutare neclară în directorul curent

Căutare de proiecte

<leader>g and <; lider> j căutați întregul proiect pentru un termen dat și, respectiv, căutați termenul sub cursor.

1612165389 677 Un ghid pentru dezvoltarea web moderna cu Neo vim
Căutând cu Denite

Configurare

Denite poate fi un instrument destul de dur pentru a vă înfășura capul. Este bine documentat, dar face referire la unele concepte care ar putea să nu fie familiare pentru majoritatea utilizatorilor. Toate ale mele Denite configurații sunt documentate în configurarea mea, deci ar trebui să o puteți folosi ca referință. Iată un eșantion rapid de configurare a opțiunilor de bază ale Denite pentru lucruri precum personalizarea grupurilor de evidențiere și a aspectelor.

Coc.nvim

Ce obții: Motor de cod Intellisense, completare automată, scame, fixare cod

Una dintre cele mai mari provocări cu dezvoltarea modernă în Vim este înființarea completare cod intelisense. Majorității editorilor moderni le place Cod Visual Studio vin cu motoare intellisense încorporate sau ușor disponibile cu un plugin (cu configurare minimă).

Am încercat câteva soluții și coc.nvim este cel mai bun pe care l-am folosit. Acesta vine cu câteva caracteristici majore, care sunt esența aducerii lui Vim la același nivel cu IDE-urile moderne.

Există câteva motive principale pentru care cred că este una dintre cele mai bune soluții la intelisense în Vim:

  1. A fost incredibil ușor de configurat și a lucrat imediat atât cu proiectele mele TypeScript, cât și cu cele JavaScript.
  2. Este construit pe servere de limbă, care alimentează inteligența în mulți editori moderni.
  3. Extensii de server de limbă precum coc-tsserver sunt construite deasupra Extensie de cod TypeScript / JavaScript care este încorporat în VSCode. Deci, pe măsură ce extensiile de server VSCode se îmbunătățesc, utilizatorii Vim pot beneficia și ei.

Noțiuni de bază

Punerea în funcțiune a coc.nvim este foarte simplă. Odată ce urmați instructiuni de instalare, puteți instala extensii de server de limbă rulând :CocInstall .

De exemplu, în proiectele mele actuale bazate pe web, pot avea un motor intelisense complet funcțional pentru majoritatea proiectelor TypeScript / JavaScript moderne prin rularea:

:CocInstall coc-tsserver coc-eslint coc-json coc-prettier coc-css

Extensie LSP

Acesta este nucleul experienței coc.nvim. Cu o extensie de server de limbă ca coc-tsserver, primești un o mulțime de caracteristici. Voi evidenția câteva:

  • Suport completare cod
  • Mergeți la definiție
  • Găsiți referințe
  • Ajutor pentru semnătură
  • Validarea codului
  • Suport pentru Javascript & TypeScript și JSX / TSX
1612165390 550 Un ghid pentru dezvoltarea web moderna cu Neo vim
coc-tsserver în acțiune cu React și Typescript

În mod implicit, obțineți completarea rapidă și automată a codului. Tipurile sunt importate automat și puteți vedea semnături de funcții și completări de cod relevante pe măsură ce tastați.

Am configurate câteva mapări cheie pentru a utiliza rapid câteva caracteristici cheie ale serverului de limbă:

Aceste mapări vă permit să treceți rapid la o definiție a simbolului, să vedeți implementarea unui simbol sau să găsiți unde se face referință. Le folosesc pe toate frecvent și le găsesc ca fiind un impuls uriaș de productivitate.

1612165391 324 Un ghid pentru dezvoltarea web moderna cu Neo vim
Utilizarea mapărilor coc.nvim

Linting

Mă bazez pe ESLint pentru linting atât proiectele mele JavaScript, cât și proiectele TypeScript. Acum că TSLint este învechit, alegerea este și mai ușoară. Am folosit inițial Ale (care este un instrument excelent), dar a avut unele probleme atunci când a fost utilizat împreună cu coc.nvim.

Acum, folosind extensie server de limbaj coc-eslint, puteți obține feedback în timp real de la linter și serverul dvs. de limbă folosind același instrument. Folosesc și eu coc-mai frumos pentru a avea formatul coc.nvim codul meu în mai frumoasă standarde pentru salvarea fișierelor.

1612165392 837 Un ghid pentru dezvoltarea web moderna cu Neo vim
Folosind eslint și mai frumos prin coc.nvim

Configurare

Puteți configura configurarea coc.nvim prin crearea unui fișier de configurare. Chiar acum, A mea este destul de simplu:

Puteți citi mai multe despre configurarea propriului fișier de configurare coc.nvim Aici.

Concluzie

Cam asta o înfășoară. Mi-ar plăcea să aud feedback sau sugestii, așa că vă rog să lăsați un comentariu! În cazul în care ați ratat-o ​​mai sus, pentru configurarea mea completă, verificați dotfiles și articolul meu despre restul configurării mele în afara Vim. Mulțumesc pentru lectură!