Водич за савремени веб развој са (Нео) вим

Постоји пуно сјајних уредника који пружају мноштво функција за веб развој. Поновно стварање тих карактеристика у Виму увек је био изазов. Волим Вима, али такође сам посветио тону времена подешавању своје поставке. Овај чланак је резиме резултата мог рада.

Користим цоц.нвим и дените за покретање свог искуства кодирања. Дените се користи за нејасно проналажење датотека, управљање отвореним датотекама и претраживање вашег пројекта. Цоц.нвим покреће интеллисенсе мотор умотавањем многих истих екстензија језгра које покрећу ВСЦоде ИДЕ. За моје целокупно подешавање, укључујући како конфигуришем ове додатке и још више, погледајте моје тачке датотека.

Напомена : У овом чланку ћу се само позвати на Вима, али заправо користим Неовим. Сви додаци раде и са Вимом - у зависности од верзије - али ствари попут функције „плутајући прозор“ биће специфичне за Неовим.

Интро

Свакодневно пишем ТипеСцрипт / ЈаваСцрипт и знам колико је разлика између Вима и уређивача попут ВСЦоде готова. У модерним уредницима доступне су многе функције којима је потребно време, стручност и / или додаци за постизање у Виму.

Направио сам следећу листу функција које очекујем од модерног уређивача. Стандардне функције уређивача (попут истицања синтаксе) нису укључене.

  1. Нејасно проналажење датотеке - Ако знате назив датотеке у пројекту, требало би да је можете брзо отворити (као што су - два притиска тастера + минималан број знакова у јединственом имену датотеке).
  2. Пребацивање датотека - Требали бисте бити у могућности да видите отворене датотеке и брзо се пребацујете између отворених датотека, и помоћу нејасног проналажења и ручног прегледавања.
  3. Повезивање - Повезивање кода би требало да буде аутоматскои брзо , и требали бисте бити у могућности да користите поправљач кода.
  4. Претраживање пројеката - Требали бисте бити у могућности да претражујете произвољни низ, тражите симбол, проналазите дефиниције и проналазите начине употребе симбола.
  5. Цоде Интеллисенсе - Ако ваш ИДЕ пружа релевантне, неприметне предлоге и аутоматско довршавање може бити огроман подстицај за продуктивност. По мом мишљењу, „бели кит“ за већину корисника Вима.

Ако све ове ствари раде у Виму, може бити болно. Постоји мноштво додатака које можете изабрати, конфигурације за подешавање и докумената за читање. После 7 година покушаја и грешака, коначно сам поставио своје место на одлично место. Најбољи део?

Показаћу вам како да добијете све основне функције са само два додатка.

Нећу покривати све карактеристике ових сјајних додатака или набрајати све могуће алтернативе (а има пуно сјајних). Усредсредићу се на истицање основне функције коју користим, као и на сва мапирања или конфигурације које користим за унапређење искуства.

Дакле, без даљег хода, пређимо на то.

Дените

Шта добијате: Нејасно проналажење датотека, управљање датотекама, претраживање пројеката

Нећу да лажем, Дените је прилично луда. Само погледајте документе. На основном нивоу, пружа слој за нејасно проналажење на врху гомиле основних функција. Изградио га је легендарни Шуго, једи мајстор из Вима.

Дените је изграђен на ламбдалисуе / неовим-промпт. Има интегрисани интерфејс на који може бити потребно неко време да се навикне. Можете да креирате прилагођене меније и да користите многе прилагођене изворе са слојем Дените као слојем на врху.

Основе

Дените првенствено користим за проналажење датотека у свом пројекту и управљање отвореним датотекама. Конфигурисао сам Дените да користи рипгреп за покретање претраживања. Можете видети како сам то конфигурисао у свом подешавању.

Имам све кључне функције мапиране за брз и лак приступ. Кључеви које користим за ова мапирања су само личне жеље и треба их прилагодити сваком кориснику. Користим опцију „плутајући прозор“ за своја Дените мапирања, али подржане су и друге варијације (попут хоризонталних / вертикалних подела).

Управљање отвореним датотекама

;доноси списак тренутно отворених датотека. Можете почети да куцате и то ће вам омогућити нејасно претраживање кроз ваше тренутне отворене датотеке. Са отвореном листом датотека, 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!