Посібник із сучасної веб-розробки з (Neo) vim

Є багато чудових редакторів, які надають масу можливостей для веб-розробки. Відтворити ці особливості у Vim завжди було проблемою. Я люблю Vim, але я також присвятив масу часу, щоб налаштувати свою установку. Ця стаття - підсумок результатів моєї роботи.

Я використовую coc.nvim і denite для забезпечення свого досвіду кодування. Denite використовується для нечіткого пошуку файлів, управління відкритими файлами та пошуку вашого проекту. Coc.nvim керує двигуном intellisense, обгортаючи багато однакових розширень ядра, що керують IDE VSCode. Для мого повного налаштування, включаючи те, як я налаштовую ці плагіни та багато іншого, перегляньте мої файли крапок.

Примітка : Я просто згадаю Vim у цій статті, але я фактично використовую Neovim. Усі плагіни також працюють з Vim - залежно від версії, - але такі речі, як функція "плаваючого вікна", будуть специфічними для Neovim.

Вступ

Я пишу TypeScript / JavaScript щодня, і я знаю, наскільки різка різниця між Vim і таким редактором, як VSCode. У сучасних редакторах є багато можливостей, для досягнення яких у Vim потрібен час, досвід та / або плагіни.

Я створив наступний перелік функцій, яких я очікую від сучасного редактора. Стандартні функції редактора (наприклад, підсвічування синтаксису) не включені.

  1. Нечіткий пошук файлів - якщо ви знаєте ім'я файлу в проекті, ви зможете швидко його відкрити (наприклад - два натискання клавіш + мінімальна кількість символів для унікальної назви файлу).
  2. Перемикання файлів - Ви повинні бачити відкриті файли та швидко перемикатися між відкритими файлами як за допомогою нечіткого пошуку, так і для перегляду вручну.
  3. Обмежування - підключення коду має бути автоматичнимі швидко , і ви повинні мати можливість використовувати засіб виправлення коду.
  4. Пошук проекту - Ви повинні мати можливість шукати довільний рядок, шукати символ, знаходити визначення та знаходити звички символу.
  5. Code Intellisense - Якщо ваша IDE надає відповідні безперебійні пропозиції та автозавершення, це може суттєво збільшити продуктивність. На мій погляд, "білий кит" для більшості користувачів Vim.

Отримати всі ці речі у роботі у Vim може бути болем. Існує безліч плагінів на вибір, конфігурації для налаштування та документи для читання. Після 7 років спроб і помилок, нарешті, я налаштував себе на чудове місце. Найкраща частина?

Я покажу вам, як отримати всю основну функціональність лише за допомогою двох плагінів.

Я не буду висвітлювати кожну функцію цих чудових плагінів або перераховувати всі можливі альтернативи (а їх є безліч чудових). Я зосереджуся на виділенні основних функціональних можливостей, які я використовую, а також будь-яких відображень або конфігурацій, які я використовую для підвищення рівня досвіду.

Тож без зайвих сумнівів, давайте до цього дійдемо.

Деніт

Що ви отримуєте: нечіткий пошук файлів, управління файлами, пошук проектів

Я не збираюся брехати, Дените досить божевільна. Просто погляньте на документи. На базовому рівні він забезпечує шар нечіткого пошуку поверх набору основних функціональних можливостей. Його побудував легендарний Шуго, майстер джедаїв з Віму.

Denite побудований на основі lambdalisue / neovim-prompt. Він має повнофункціональний інтерфейс, до якого звикання може зайняти деякий час. Ви можете створювати власні меню та використовувати багато спеціальних джерел, використовуючи Denite як шар зверху.

Основи

Я в основному використовую Denite для пошуку файлів у своєму проекті та управління відкритими файлами. Я налаштував Denite використовувати ripgrep для посилення мого пошуку. Ви можете побачити, як я це налаштував, у своєму налаштуванні.

У мене є всі основні функції, які відображено для швидкого та простого доступу. Клавіші, які я використовую для цих відображень, є лише особистими уподобаннями, і їх слід налаштовувати для кожного користувача. Я використовую опцію «плаваюче вікно» для моїх відображень Denite, але підтримуються й інші варіанти (наприклад, горизонтальні / вертикальні розбиття).

Керування відкритими файлами

;відкриває список відкритих на даний момент файлів. Ви можете почати друкувати, і це дозволить вам нечітко шукати ваші поточні відкриті файли. Відкривши список файлів,l>o lets you browse the list like you are in normal mode, where you can open and/or delete any files from the list.

Original text


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!