Un guide du développement Web moderne avec (Neo) vim

Il existe de nombreux grands éditeurs qui fournissent une tonne de fonctionnalités pour le développement Web. Recréer ces fonctionnalités dans Vim a toujours été un défi. J'adore Vim, mais j'ai également consacré beaucoup de temps à peaufiner ma configuration. Cet article est un résumé du résultat de mon travail.

J'utilise coc.nvim et denite pour alimenter mon expérience de codage. Denite est utilisé pour rechercher des fichiers flous, gérer les fichiers ouverts et rechercher dans votre projet. Coc.nvim pilote le moteur intellisense en encapsulant plusieurs des mêmes extensions principales qui pilotent l'IDE VSCode. Pour ma configuration complète, y compris la façon dont je configure ces plugins et plus encore, consultez mes fichiers dotfiles.

Remarque : je ferai simplement référence à Vim dans cet article, mais j'utilise en fait Neovim. Les plugins fonctionnent tous aussi avec Vim - selon la version - mais des choses comme la fonction «fenêtre flottante» seront spécifiques à Neovim.

Intro

J'écris TypeScript / JavaScript au quotidien, et je sais à quel point la différence est nette entre Vim et un éditeur comme VSCode prêt à l'emploi. Il existe de nombreuses fonctionnalités disponibles dans les éditeurs modernes qui demandent du temps, de l'expertise et / ou des plugins à réaliser dans Vim.

J'ai créé la liste suivante des fonctionnalités que j'attends d'un éditeur moderne. Les fonctionnalités standard de l'éditeur (comme la coloration syntaxique) ne sont pas incluses.

  1. Recherche de fichier floue - Si vous connaissez le nom du fichier dans le projet, vous devriez être en mesure de l'ouvrir rapidement (par exemple - deux frappes + nombre minimum de caractères pour un nom de fichier unique).
  2. Changement de fichier - Vous devriez être capable de voir les fichiers ouverts et de basculer rapidement entre les fichiers ouverts, à la fois avec une recherche floue et une navigation manuelle.
  3. Linting - Le peluchage du code doit être automatiqueet rapide , et vous devriez pouvoir utiliser un fixateur de code.
  4. Recherche de projet - Vous devriez être en mesure de rechercher une chaîne arbitraire, de rechercher un symbole, de trouver des définitions et de trouver des utilisations d'un symbole.
  5. Code Intellisense - Le fait que votre IDE fournisse des suggestions pertinentes et transparentes et des complétions automatiques peut être un énorme coup de pouce à la productivité. À mon avis, la «baleine blanche» pour la plupart des utilisateurs de Vim.

Faire fonctionner toutes ces choses dans Vim peut être pénible. Il existe des tonnes de plugins à choisir, de configurations à modifier et de documents à lire. Après 7 ans d'essais et d'erreurs, j'ai enfin eu ma configuration à un bon endroit. La meilleure partie?

Je vais vous montrer comment obtenir toutes les fonctionnalités de base avec seulement deux plugins.

Je ne couvrirai pas toutes les fonctionnalités de ces super plugins, ni ne listerai toutes les alternatives possibles (et il y en a beaucoup d'excellentes). Je me concentrerai sur la mise en évidence des fonctionnalités de base que j'utilise, ainsi que sur les mappages ou configurations que j'utilise pour améliorer l'expérience.

Alors sans plus tarder, allons-y.

Denite

Ce que vous obtenez: recherche de fichiers floue, gestion de fichiers, recherche de projets

Je ne vais pas mentir, Denite est assez folle. Jetez un œil à la documentation. Au niveau de base, il fournit une couche de recherche floue au-dessus d'un tas de fonctionnalités de base. Il a été construit par le légendaire Shougo, un maître Jedi de Vim.

Denite est construit sur lambdalisue / neovim-prompt. Il possède une interface complète qui peut prendre un certain temps pour s'y habituer. Vous pouvez créer des menus personnalisés et utiliser de nombreuses sources personnalisées avec Denite comme couche par-dessus.

Basiques

J'utilise principalement Denite pour rechercher des fichiers dans mon projet et gérer mes fichiers ouverts. J'ai configuré Denite pour utiliser ripgrep pour alimenter ma recherche. Vous pouvez voir comment je l'ai configuré dans ma configuration.

J'ai toutes les fonctionnalités clés mappées pour un accès rapide et facile. Les clés que j'utilise pour ces mappages sont juste des préférences personnelles et doivent être personnalisées par utilisateur. J'utilise l'option «fenêtre flottante» pour mes mappages Denite, mais d'autres variantes sont également prises en charge (comme les fractionnements horizontaux / verticaux).

Gestion des fichiers ouverts

;affiche une liste des fichiers actuellement ouverts. Vous pouvez commencer à taper et cela vous permettra d'effectuer une recherche floue dans vos fichiers ouverts actuels. Avec la liste de fichiers ouverte,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!