Panduan untuk Pembangunan Web moden dengan (Neo) vim

Terdapat banyak editor hebat di luar sana yang menyediakan banyak ciri untuk pembangunan web. Menciptakan semula ciri-ciri tersebut di Vim selalu menjadi cabaran. Saya suka Vim, tetapi saya juga telah mendedikasikan tan masa untuk Tweaker persediaan saya. Artikel ini adalah ringkasan hasil kerja saya.

Saya menggunakan coc.nvim dan menolak untuk menguatkan pengalaman pengkodan saya. Denite digunakan untuk kabur mencari fail, mengurus fail terbuka, dan mencari projek anda. Coc.nvim menggerakkan enjin intellisense dengan membungkus banyak sambungan teras yang sama yang mendorong VSCode IDE. Untuk persediaan penuh saya, termasuk bagaimana saya mengkonfigurasi pemalam ini dan banyak lagi, periksa dotfiles saya.

Nota : Saya hanya akan merujuk Vim dalam artikel ini, tetapi saya sebenarnya menggunakan Neovim. Semua plugin berfungsi dengan Vim juga - bergantung pada versi - tetapi perkara seperti ciri "tetingkap terapung" akan khusus untuk Neovim.

Pengenalan

Saya menulis TypeScript / JavaScript setiap hari, dan saya tahu betapa perbezaannya antara Vim dan editor seperti VSCode di luar kotak. Terdapat banyak ciri yang terdapat pada editor moden yang memerlukan masa, kepakaran, dan / atau plugin untuk dicapai di Vim.

Saya telah membuat senarai ciri berikut yang saya harapkan daripada penyunting moden. Ciri penyunting standard (seperti sorotan sintaks) tidak disertakan.

  1. Mencari Fail Fuzzy - Sekiranya anda mengetahui nama fail dalam projek, anda seharusnya dapat membukanya dengan cepat (seperti - dua ketukan kekunci + bilangan aksara minimum untuk nama fail yang unik).
  2. Peralihan Fail - Anda seharusnya dapat melihat fail terbuka, dan beralih antara fail terbuka dengan cepat, baik dengan penemuan kabur dan penyemakan manual.
  3. Linting - Linting kod mestilah automatikdan pantas , dan anda seharusnya dapat menggunakan pembetulan kod.
  4. Pencarian Projek - Anda seharusnya dapat mencari rentetan sewenang-wenangnya, mencari simbol, mencari definisi, dan mencari penggunaan simbol.
  5. Code Intellisense - Memastikan IDE anda memberikan cadangan dan penyelesaian automatik yang relevan dan lancar dapat meningkatkan produktiviti. Pada pendapat saya, "paus putih" untuk kebanyakan pengguna Vim.

Mendapatkan semua perkara ini di Vim boleh menyakitkan. Terdapat banyak plugin untuk dipilih, konfigurasi untuk tweak, dan dokumen untuk dibaca. Setelah 7 tahun percubaan dan kesilapan, akhirnya saya berjaya mendapatkan persediaan yang hebat. Bahagian terbaik?

Saya akan menunjukkan kepada anda bagaimana mendapatkan semua fungsi teras dengan hanya dua pemalam.

Saya tidak akan merangkumi setiap ciri plugin hebat ini, atau menyenaraikan semua kemungkinan alternatif (dan ada banyak pilihan hebat). Saya akan memberi tumpuan kepada menonjolkan fungsi teras yang saya gunakan, serta pemetaan atau konfigurasi yang saya gunakan untuk meningkatkan pengalaman.

Jadi tanpa basa-basi lagi, mari sampai ke sana.

Menolak

Apa yang anda dapat: Penemuan fail kabur, pengurusan fail, carian projek

Saya tidak akan berbohong, Denite cukup gila. Lihat sahaja dokumennya. Pada tahap asas, ia menyediakan lapisan mencari kabur di atas sekumpulan fungsi teras. Ia dibina oleh Shougo legenda, seorang Jedi master Vim.

Denite dibina berdasarkan lambdalisue / neovim-prompt. Ia mempunyai antara muka dengan ciri penuh yang memerlukan sedikit masa untuk membiasakan diri. Anda boleh membuat menu tersuai, dan menggunakan banyak sumber tersuai dengan Denite sebagai lapisan di atas.

Asas

Saya terutamanya menggunakan Denite untuk mencari fail dalam projek saya, dan menguruskan fail terbuka saya. Saya telah mengkonfigurasi Denite untuk menggunakan ripgrep untuk menguatkan carian saya. Anda dapat melihat bagaimana saya mengkonfigurasinya dalam persediaan saya.

Saya mempunyai semua ciri utama yang dipetakan untuk akses cepat dan mudah. Kunci yang saya gunakan untuk pemetaan ini hanyalah pilihan peribadi, dan harus disesuaikan setiap pengguna. Saya menggunakan pilihan "tetingkap terapung" untuk pemetaan Denite saya, tetapi variasi lain juga disokong (seperti pemisahan mendatar / menegak).

Menguruskan Fail Terbuka

;memaparkan senarai fail yang sedang dibuka. Anda boleh mula menaip dan ini membolehkan anda mencari-cari secara kabur melalui fail terbuka semasa anda. Dengan senarai fail terbuka, 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!