coc.nvimでVimにRuby/Vue.jsのLSPを導入する

LSPとは

Language Server Protocolの略で、言語固有の機能を様々なエディタやIDEで利用出来るようにするための規格のことです。例えば自動補完とか定義参照などを行ってくれます。

今回はこれをcoc.nvimというVimプラグインを使ってVimに導入してみたいと思います。coc.nvimをまだインストールしていない方はこちらをご確認下さい。ちなみに検証環境は下記の通りです。

• Mac OS
• Vim 8.2.850

RubyのLSPを導入

端末にsolargraphというGEMをインストールします。これはRubyのLanguage Serverになります。

$ gem install solargraph

次にVimで下記コマンドを実行します。

:CocInstall coc-solargraph

これで.rbファイルの編集時の補完候補にLSPのサポートが加わります。ファイル内で使用した変数以外にもRubyの標準ライブラリ等が候補に出現するようになっているかと思います。

Vue.jsのLSPを導入

続いてVimにVue.jsのLSP拡張機能をインストールしてみます。Vimで下記コマンドを実行して下さい。

:CocInstall coc-vetur

次にプロジェクトルートディレクトリにjsconfig.jsonを作成します。これはLanguage Serverにプロジェクト内のファイルのコードを理解させるためのファイルです。

{
  "include": [
    "app/javascript/*"
  ],
  "compilerOptions": {
    "baseUrl": "app",
    "paths": {
      "components/*": [
        "app/javascript/*"
      ]
    }
  }
}

• includeオプション：
  • プロジェクトに含むファイルを明示的に指定
  • ※プロジェクトに依ります
• compilerOptionsオプション：
  • パスの設定など

その後.vueファイルを編集する時に自動補完や構文エラーの警告を行ってくれるようになっているかと思います。

終わりに

coc.nvimは拡張機能の管理がとても便利です。インストールしても動かなかったり不要になった拡張機能は:CocUninstallで削除出来ますし、何を入れているのかは:CocList extensionsで確認出来ます。