Nuxt.js + Vim で補完が効かない


こちらの記事→「Nuxt.js を IntelliJ から利用した際に、 @~ alias を解決してくれない対処」の vim 版です。

主に以下のような方のための記事です。

  • Nuxt + vim 環境で開発している
  • vim に vls(vue-language-server) が導入されている
  • タグジャンプ・補完が効かないのでジャバスクリプトなんもわからん

原因

Nuxt.js の場合、 import 時の ~@ はパス解決に利用される。

import Hoge from "~/Hoge"

こういった記述をしている場合、パス解決のための情報を Language Server が知らないため、 Hoge が何者かわからない。
実際、相対パス記述に変更すればタグジャンプ・補完ができるようになります。

先の記事によると、IntelliJの場合は nuxt.config.js のパスを設定してやれば勝手に解析してくれるようですが、 vlsのオプション にそういったものはなく、vim の場合は難しそうでした。

対処方法

以下のような tsconfig.json を作成する。ディレクトリ名は適宜変えてください。
参考: Path Mapping

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src/",
    "paths": {
      "~/*": "./src/*"
    },
    "allowJs": true
  }
}