Ein Leitfaden zur modernen Webentwicklung mit (Neo) vim

Es gibt viele großartige Editoren, die eine Menge Funktionen für die Webentwicklung bieten. Die Neuerstellung dieser Funktionen in Vim war schon immer eine Herausforderung. Ich liebe Vim, aber ich habe auch viel Zeit darauf verwendet, mein Setup zu optimieren. Dieser Artikel ist eine Zusammenfassung des Ergebnisses meiner Arbeit.

Ich benutze coc.nvim und denite, um meine Codierungserfahrung zu verbessern. Denite wird verwendet, um Dateien unscharf zu finden, geöffnete Dateien zu verwalten und Ihr Projekt zu durchsuchen. Coc.nvim steuert die Intellisense-Engine, indem es viele der gleichen Kernerweiterungen umschließt, die die VSCode-IDE steuern. Informationen zu meinem vollständigen Setup, einschließlich der Konfiguration dieser Plugins und mehr, finden Sie in meinen Punktedateien.

Hinweis : Ich werde in diesem Artikel nur auf Vim verweisen, aber ich verwende tatsächlich Neovim. Die Plugins funktionieren alle - je nach Version - auch mit Vim, aber Dinge wie die Funktion "Floating Window" sind spezifisch für Neovim.

Intro

Ich schreibe täglich TypeScript / JavaScript und weiß, wie stark der Unterschied zwischen Vim und einem sofort einsatzbereiten Editor wie VSCode ist. In modernen Editoren sind viele Funktionen verfügbar, deren Erreichung in Vim Zeit, Fachwissen und / oder Plugins erfordert.

Ich habe die folgende Liste von Funktionen erstellt, die ich von einem modernen Editor erwarte. Standard-Editorfunktionen (wie das Hervorheben der Syntax) sind nicht enthalten.

  1. Fuzzy- Dateisuche - Wenn Sie den Dateinamen im Projekt kennen, sollten Sie ihn schnell öffnen können (z. B. - zwei Tastenanschläge + Mindestanzahl von Zeichen für einen eindeutigen Dateinamen).
  2. Dateiwechsel - Sie sollten in der Lage sein, geöffnete Dateien anzuzeigen und schnell zwischen geöffneten Dateien zu wechseln, sowohl mit Fuzzy-Suche als auch mit manuellem Durchsuchen.
  3. Flusen - Das Flusen von Code sollte automatisch erfolgenund schnell , und Sie sollten in der Lage sein, einen Code-Fixer zu verwenden.
  4. Projektsuche - Sie sollten in der Lage sein, nach einer beliebigen Zeichenfolge zu suchen, nach einem Symbol zu suchen, Definitionen zu finden und Verwendungen eines Symbols zu finden.
  5. Code Intellisense - Wenn Ihre IDE relevante, nahtlose Vorschläge und automatische Vervollständigungen bereitstellt, kann dies die Produktivität erheblich steigern. Meiner Meinung nach der „weiße Wal“ für die meisten Vim-Benutzer.

All diese Dinge in Vim zum Laufen zu bringen, kann schmerzhaft sein. Es stehen unzählige Plugins zur Auswahl, Konfigurationen zum Optimieren und Dokumente zum Lesen. Nach 7 Jahren Versuch und Irrtum habe ich mein Setup endlich an einem großartigen Ort. Der beste Teil?

Ich werde Ihnen zeigen, wie Sie mit nur zwei Plugins alle Kernfunktionen nutzen können.

Ich werde nicht alle Funktionen dieser fantastischen Plugins behandeln oder alle möglichen Alternativen auflisten (und es gibt viele großartige). Ich werde mich darauf konzentrieren, die Kernfunktionalität hervorzuheben, die ich verwende, sowie alle Zuordnungen oder Konfigurationen, die ich verwende, um die Erfahrung zu verbessern.

Kommen wir also ohne weiteres dazu.

Denite

Was Sie erhalten: Fuzzy-Dateisuche, Dateiverwaltung, Projektsuche

Ich werde nicht lügen, Denite ist ziemlich verrückt. Schauen Sie sich einfach die Dokumente an. Grundsätzlich bietet es eine Fuzzy-Finding-Ebene über einer Reihe von Kernfunktionen. Es wurde vom legendären Shougo, einem Jedi-Meister von Vim, gebaut.

Denite basiert auf Lambdalisue / Neovim-Prompt. Es verfügt über eine voll ausgestattete Benutzeroberfläche, an die man sich erst nach einiger Zeit gewöhnen kann. Sie können benutzerdefinierte Menüs erstellen und viele benutzerdefinierte Quellen mit Denite als oberster Ebene verwenden.

Grundlagen

Ich verwende Denite hauptsächlich zum Suchen von Dateien in meinem Projekt und zum Verwalten meiner geöffneten Dateien. Ich habe Denite so konfiguriert, dass meine Suche mit ripgrep unterstützt wird. Sie können sehen, wie ich es in meinem Setup konfiguriert habe.

Ich habe alle wichtigen Funktionen für einen schnellen und einfachen Zugriff zugeordnet. Die Schlüssel, die ich für diese Zuordnungen verwende, sind nur persönliche Vorlieben und sollten pro Benutzer angepasst werden. Ich verwende die Option "Floating Window" für meine Denite-Zuordnungen, aber auch andere Variationen werden unterstützt (wie horizontale / vertikale Teilungen).

Offene Dateien verwalten

;Ruft eine Liste der aktuell geöffneten Dateien auf. Sie können mit der Eingabe beginnen und Ihre aktuell geöffneten Dateien unscharf durchsuchen. Wenn die Dateiliste geöffnet ist,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!