【2020年冬】Vim/NeovimでDenoの開発環境を構築する #Vim

Deno Advent Calendar 2020 3日目の記事です🦕

今日は、Vim/NeovimでDenoの開発環境を構築する方法について説明します。

概要

この記事では、Vim/Neovimにおける主要なLSPクライアントであるcoc.nvim及びvim-lspのそれぞれについて、Denoの開発環境をセットアップする方法を説明します。

想定読者

この記事は以下のような方を想定して書かれています。

普段の開発でVimまたはNeovimを使用している
dein.vimやvim-plug等のプラグインマネージャの使用方法を把握している
- dein.vimの使用方法について
  - おすすめプラグイン〜 Vimはいいぞ！ゴリラと学ぶVim講座(7)
- vim-plugの使用方法について
  - pathogen から vim-plug に乗り換えた

coc.nvimを使ってDenoの開発環境をセットアップする

要約

coc-denoを使うとよいと思います。

coc.nvimとは?

Node.jsを使って実装されたVim/NeovimのLSPクライアントです。詳しくはGitHubリポジトリまたは以下のページを参照ください

Vimにcoc.nvimを入れたら便利すぎて感動したっていう話

セットアップ方法

coc.nvimのインストール

まず、coc.nvimはNode.jsに依存しているため、入っていなければ事前にインストールしてください。(Node.jsの10.12以上のバージョンのものが必要です)

次に、coc.nvimをインストールします。

dein.vimをお使いの場合は、TOMLファイルに以下の記述を追加すればcoc.nvimをインストールできます。

dein.toml

 [[plugins]]
 repo = 'neoclide/coc.nvim'
 rev = 'release'
 merged = 0

vim-plugをお使いの場合は、vimrcまたはinit.vimに次のように記述すればインストールできると思います。

.vimrc

Plug 'neoclide/coc.nvim', {'branch': 'release'}

coc.nvimの拡張をインストール

次に、coc-tsserverとcoc-denoをインストールします。

coc-denoとは、coc.nvimでDenoの開発をサポートするための拡張です。
この拡張をcoc-tsserverと併用することで、Denoの開発が容易になります。

Vim/Neovimで以下のコマンドを実行すると、coc-tsserverとcoc-denoをインストールできます。

:CocInstall coc-tsserver coc-deno

動作例

上記セットアップを実施すると、自動補完やシンボルジャンプ等の便利な機能が使えるようになります。

より詳細なセットアップ方法については、以下を参照ください

Vimでdenoの開発環境を構築する2020

vim-lspを使ってDenoの開発環境をセットアップする

要約

typescript-language-serverとtypescript-deno-plugin ※を併用するとよいと思います。

vim-lspとは?

VimScriptのみで実装されたLSPプラグインです。
詳しくはGitリポジトリまたは以下を参照ください

vim-lspでできること

セットアップ方法

vim-lspのインストール

まず、vim-lspをインストールします。

必要に応じて、asyncomplete.vimやasyncomplete-lsp.vim等を追加でインストールすると、自動補完ができるようになります。

dein.vimをお使いの場合は、TOMLファイルに以下の記述を追加するとインストールできます。

dein.toml

[[plugins]]
repo = 'prabirshrestha/vim-lsp'

# 以下の2つのプラグインは必要に応じてインストールする
[[plugins]]
repo = 'prabirshrestha/asyncomplete.vim'

[[plugins]]
repo = 'prabirshrestha/asyncomplete-lsp.vim'

vim-plugをお使いの場合は、vimrcまたはinit.vimで以下のように記述するとインストールできると思います。

.vimrc

Plug 'prabirshrestha/vim-lsp'
Plug 'prabirshrestha/asyncomplete.vim'
Plug 'prabirshrestha/asyncomplete-lsp.vim'

npmパッケージのインストール

次に、以下の3つのnpmパッケージをインストールします。

$ npm install -g typescript-language-server typescript typescript-deno-plugin

vim-lspの設定

以下の設定をvimrcまたはinit.vimに追加してください。

if executable("typescript-language-server")
  " グローバルインストールされたnpmモジュールの保存場所
  let s:npm_root = trim(system("npm root -g"))

  " vim-lspのinitialization_optionsを使用して、typescript-deno-pluginのインストール場所をtypescript-language-serverへ伝えます
  let s:has_typescript_deno_plugin = isdirectory(s:npm_root . "/typescript-deno-plugin")
  let s:plugins = s:has_typescript_deno_plugin
    \ ? [{ "name": "typescript-deno-plugin", "location": s:npm_root }]
    \ : []
  augroup LspTypeScript
    autocmd!
    autocmd User lsp_setup call lsp#register_server({
    \   "name": "typescript-language-server",
    \   "cmd": {server_info -> ["typescript-language-server", "--stdio"]},
    \   "root_uri": {server_info->lsp#utils#path_to_uri(lsp#utils#find_nearest_parent_file_directory(lsp#utils#get_buffer_path(), 'tsconfig.json'))},
    \   "whitelist": ["typescript", "typescript.tsx"],
    \   "initialization_options": { "plugins": s:plugins },
    \ })
  augroup END
endif