2023年3月14日火曜日

emacsでvue3(volar)の開発環境を整える

emacsでvue3(volar)の開発環境を整える

概要

emacs で vue3 の Language Server である volar と連携してみました
vue2 までの vetur + vls の設定ではなく volar + vue-language-server の設定になります
全然情報がなかったので備忘録として残しておきます

環境

  • macOS 11.7.4
  • npm 9.5.0
  • volar 1.2.0
  • emacs 28.2
    • lsp-mode 20230310.1855

インストール

  • npm install -g @volar/vue-language-server

これで vue-language-server コマンドが使えるようになります

emacs 設定

  • vim .emacs.d/site-list/init.el
(require 'lsp-mode)
(lsp-workspace-folders-add "/path/to/nuxt-app")
(add-hook 'vue-mode-hook #'lsp)

注意事項: 現在のlsp-modeのバージョンだと必ず lsp-workspace-folders-add にプロジェクトのパスを追加しなければならない

https://github.com/emacs-lsp/lsp-mode/issues/3559

上記にあるように lsp-volar--activate-p というプロジェクトをアクティベートする関数にバグがあるため手動でプロジェクトのパスを設定する必要があります

プロジェクトが追加になった場合は面倒ですが追記しましょう

動作確認

/path/to/nuxt-app/app.vue を emacs で開くと vetur ではなく volar が起動するはずです
server_id が vue-semantic-server になっていれば volar になっています

うまく volar が起動せず vue-language-server を認識せず vls などを起動しようとしている場合は lsp-workspace-folders-add が追加されているか確認してください

最後に

emacs + vue3 (volar) の設定方法を紹介しました

おそらくまだ lsp-volar には修正が入ると思います
素直に vscode を使ったほうがいいのだろうか、、

参考サイト

0 件のコメント:

コメントを投稿