(Neo)vimを使用した最新のWeb開発のガイド

Web開発のための機能をたくさん提供する素晴らしいエディターがたくさんあります。Vimでこれらの機能を再現することは常に課題でした。私はVimを愛して、私はまた捧げてきましトン私のセットアップの微調整に時間を。この記事は私の仕事の結果の要約です。

私はcoc.nvimとdeniteを使用して、コーディングエクスペリエンスを強化しています。Deniteは、ファイルのあいまいな検索、開いているファイルの管理、およびプロジェクトの検索に使用されます。Coc.nvimは、VSCode IDEを駆動するのと同じコア拡張機能の多くをラップすることにより、インテリセンスエンジンを駆動します。これらのプラグインの構成方法などを含む完全なセットアップについては、ドットファイルを確認してください。

:この記事ではVimを参照するだけですが、実際にはNeovimを使用しています。プラグインはすべてVimでも動作しますが(バージョンによって異なります)、「フローティングウィンドウ」機能などはNeovimに固有のものになります。

イントロ

私は毎日TypeScript / JavaScriptを書いていますが、VimとVSCodeのようなエディターの違いがすぐにわかることは明らかです。Vimで実現するには、時間、専門知識、プラグインを必要とする最新のエディターで利用できる多くの機能があります。

最新のエディターに期待する機能のリストを次のように作成しました。標準のエディター機能(構文の強調表示など)は含まれていません。

  1. ファジーファイル検索—プロジェクト内のファイル名がわかっている場合は、すばやく開くことができるはずです(たとえば、2回のキーストローク+一意のファイル名に対する最小文字数)。
  2. ファイルの切り替え—ファジー検索と手動ブラウジングの両方で、開いているファイルを表示し、開いているファイルをすばやく切り替えることができるはずです。
  3. リンティング—コードリンティングは自動である必要がありますと高速、コードフィクサーを使用できるはずです。
  4. プロジェクト検索—任意の文字列の検索、記号の検索、定義の検索、および記号の使用法の検索ができる必要があります。
  5. コードインテリセンス— IDEに関連性のあるシームレスな提案とオートコンプリートを提供させることで、生産性を大幅に向上させることができます。私の意見では、ほとんどのVimユーザーにとって「白いクジラ」です。

これらすべてをVimで動作させるのは苦痛です。選択できるプラグイン、微調整する構成、読むドキュメントがたくさんあります。7年間の試行錯誤の末、ようやく素晴らしい場所にセットアップできました。最良の部分?

2つのプラグインだけですべてのコア機能を取得する方法を紹介します。

これらの素晴らしいプラグインのすべての機能を網羅したり、考えられるすべての代替案をリストしたりすることはしません(そして素晴らしいものがたくさんあります)。私が使用するコア機能と、エクスペリエンスを向上させるために使用するマッピングまたは構成を強調することに焦点を当てます。

それで、それ以上の苦労なしに、それに取り掛かりましょう。

デナイト

得られるもの:ファジーファイル検索、ファイル管理、プロジェクト検索

私はうそをつくつもりはありません、デナイトはかなり正気ではありません。ドキュメントをご覧ください。基本的なレベルでは、一連のコア機能の上にファジー検出レイヤーを提供します。Vimのジェダイマスターである伝説のShougoによって建てられました。

Deniteはlambdalisue / neovim-promptに基づいて構築されています。それは慣れるのに時間がかかるかもしれないフル機能のインターフェースを持っています。カスタムメニューを作成し、Deniteを最上位のレイヤーとして使用して多くのカスタムソースを使用できます。

基本

私は主に、プロジェクト内のファイルの検索と開いているファイルの管理にDeniteを使用しています。ripgrepを使用して検索を強化するようにDeniteを構成しました。セットアップでどのように構成したかがわかります。

すばやく簡単にアクセスできるように、すべての主要な機能をマッピングしています。これらのマッピングに使用するキーは個人的な好みであり、ユーザーごとにカスタマイズする必要があります。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!