Útmutató a modern webfejlesztéshez a (Neo) vim segítségével

Nagyon sok nagyszerű szerkesztő létezik, amelyek rengeteg szolgáltatást nyújtanak a webfejlesztéshez. Ezeknek a funkcióknak a létrehozása a Vimben mindig is kihívást jelentett. Szeretem Vim, de én is elkötelezett a csomó időt csípés a beállítás során. Ez a cikk összefoglalja munkám eredményét.

A coc.nvim-et használom, és a denite-t használom a kódolási élményem megerősítésére. A Denite a fájlok homályos keresésére, a nyitott fájlok kezelésére és a projekten történő keresésre szolgál. A Coc.nvim úgy hajtja az intellisense motort, hogy sok ugyanolyan magbővítményt becsomagol, mint a VSCode IDE. A teljes beállításhoz, beleértve ezeket a bővítmények konfigurálását és még sok mást, nézze meg a dotfileimat.

Megjegyzés : Ebben a cikkben csak a Vimre hivatkozom, de valójában a Neovim-et használom. A beépülő modulok a Vim-kel is működnek - a verziótól függően -, de az olyan dolgok, mint a „lebegő ablak” funkció, a Neovimra vonatkoznak.

Bevezetés

Naponta írok TypeScript / JavaScript programot, és tudom, mennyire éles a különbség a Vim és egy olyan szerkesztő között, mint a VSCode. A modern szerkesztőkben számos olyan szolgáltatás érhető el, amelyek eléréséhez idő, szakértelem és / vagy beépülő modulok szükségesek a Vim-ben.

Létrehoztam a következő funkciókat, amelyeket egy modern szerkesztőtől elvárok. A szokásos szerkesztőfunkciók (például a szintaxis kiemelése) nem szerepelnek benne.

  1. Fuzzy File Finding - Ha ismeri a fájl nevét a projektben, akkor képesnek kell lennie arra, hogy gyorsan megnyissa (például - két billentyűleütés + minimális karakterszám az egyedi fájlnévig).
  2. Fájlváltás - Képesnek kell lennie a megnyitott fájlok megtekintésére és a váltásra a megnyitott fájlok között, mind fuzzy kereséssel, mind kézi böngészéssel.
  3. Szöszölés - A kódolásnak automatikusnak kell lennieés gyorsan , és képesnek kell lennie egy kódjavító használatára.
  4. Projektkeresés - Önnek képesnek kell lennie egy tetszőleges karakterlánc keresésére, egy szimbólum keresésére, definíciók keresésére és egy szimbólum használatára.
  5. Code Intellisense - Ha az IDE releváns, zökkenőmentes javaslatokat és automatikus kiegészítéseket nyújt, hatalmas lendületet jelenthet a termelékenységben. Véleményem szerint a „fehér bálna” a legtöbb Vim felhasználó számára.

Ezeknek a dolgoknak a Vimben való működtetése fájdalmat okozhat. Rengeteg plugin közül lehet választani, konfigurációkat kell módosítani és el kell olvasni a dokumentumokat. 7 év próba és hiba után végre remek helyre kerültem. A legjobb rész?

Megmutatom, hogyan érheti el az összes alapvető funkciót mindössze két beépülő modullal.

Nem foglalkozom ezeknek a fantasztikus bővítményeknek minden funkciójával, és nem sorolom fel az összes lehetséges alternatívát (és nagyon sok remek van). Arra fogok összpontosítani, hogy kiemelem az általam használt alapvető funkcionalitást, valamint minden hozzárendelést vagy konfigurációt, amelyet az élmény növelése érdekében használok.

Tehát minden további nélkül, térjünk rá.

Denite

Mit kap: Fuzzy fájlkeresés, fájlkezelés, projektkeresés

Nem fogok hazudni, Denite eléggé őrült. Vessen egy pillantást a dokikra. Alapszinten fuzzy-kereső réteget biztosít egy csomó alapvető funkció tetején. A legendás Shougo, a Vim jedimestere építette.

A Denite a lambdalisue / neovim-prompt-ra épül. Teljes funkcionalitású felülettel rendelkezik, amely eltarthat egy ideig, amíg megszokja. Létrehozhat egyedi menüket, és sok egyéni forrást használhat, a Denite rétegként a tetején.

Alapok

Elsősorban a Denite-t használom fájlok keresésére a projektemben és a megnyitott fájljaim kezelésére. A Denite-t úgy konfiguráltam, hogy a ripgrep-et használja a keresés megerősítésére. A beállításomban láthatja, hogyan konfiguráltam.

Az összes kulcsfontosságú tulajdonságomat feltérképeztem a gyors és könnyű hozzáférés érdekében. Az ezekhez a leképezésekhez használt kulcsok csak személyes preferenciák, és felhasználónként kell őket testre szabni. A „lebegő ablak” opciót használom a Denite leképezésekhez, de más variációk is támogatottak (például vízszintes / függőleges osztások).

Nyitott fájlok kezelése

;megjeleníti a jelenleg megnyitott fájlok listáját. Elkezdheti a gépelést, és lehetővé teszi a fuzzy-keresést a jelenlegi nyitott fájljain keresztül. Ha a fájllista nyitva van, l>o lets you browse the list like you a re in normal mode, where you can open and/or delete any files from the list.

Fuzzy Finding Files

r>t fuzzy-searches files in the current directory. With ripgrep, any files in your .gitignore are also ignored.

Project Searching

r> g and <;leader>j search the entire project for a given term, and searching the term under cursor, respectively.

Configuration

Denite can be a pretty tough tool to wrap your head around. It’s well documented, but it does reference some concepts that may be unfamiliar to most users. All of my Denite configurations are documented in my setup, so you should be able to use it as a reference. Here’s a quick sample of configuring the base options of Denite for things like customizing highlight groups and layouts.

Coc.nvim

What you get: Intellisense code engine, auto-completion, linting, code fixing

One of the biggest challenges with modern development in Vim is setting up intellisense code completion. Most modern editors like Visual Studio Code come with intellisense engines built in, or easily available with a plugin (with minimal setup).

I have tried a few solutions, and coc.nvim is the best I’ve used. It comes with several major features that are the crux of bringing Vim to the same level as modern IDEs.

There are a few main reasons I think it’s one of the better solutions to intellisense in Vim:

  1. It was incredibly easy to setup, and immediately worked with both my TypeScript and JavaScript projects.
  2. It’s built upon language servers, which power intellisense in many modern editors.
  3. Language server extensions like coc-tsserver are built on top of the TypeScript/JavaScript code extension that is built into VSCode. So as VSCode server extensions improve, Vim users can benefit as well.

Basics

Getting coc.nvim up and running is very straightforward. Once you follow the installation instructions, you can install language server extensions by running :CocInstall .

For example, in my current web-based projects, I can have a fully-functioning intellisense engine for most modern TypeScript/JavaScript projects by running:

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

LSP Extension

This is core of coc.nvim experience. With a language server extension like coc-tsserver, you get a ton of features. I’ll highlight a few:

  • Code completion support
  • Go to definition
  • Find references
  • Signature help
  • Code validation
  • Support for Javascript & TypeScript and JSX/TSX

By default, you get fast, automatic code completion. Types are automatically imported, and you can see function signatures and relevant code completions as you type.

I have a few key mappings set up to quickly utilize a few key features of the language server:

These mappings allow you to quickly jump to a symbol definition, see the implementation for a symbol, or find where it’s referenced. I use them all frequently and find them to be a huge productivity boost.

Linting

I rely on ESLint for linting both my JavaScript and TypeScript projects. Now that TSLint is being deprecated, the choice is even easier. I initially used Ale (which is a great tool), but it had some issues when used together with coc.nvim.

Now, using the coc-eslint language server extension, you can get real-time feedback from your linter and language server using the same tool. I also use coc-prettier to have coc.nvim format my code to prettier standards on file save.

Configuration

You can configure your coc.nvim setup by creating a configuration file. Right now, mine is pretty simple:

You can read more about setting up your own coc.nvim configuration file here.

Conclusion

That about wraps it up. I’d love to hear any feedback or suggestions, so please leave a comment! In case you missed it above, for my full setup, check out my dotfiles and my article on the rest of my setup outside of Vim. Thanks for reading!