Has anyone configured volar/vue-language-features?

[rash-pro]

Hello!,
I've searched around the internet, and haven't found a working configuration with eglot and volar

so far I've achieved running the server but it dies after the timeout,
I've increased the timeout to 120 seconds and still dies, so I don't think it's that the issue

This is my current config:

(use-package eglot
  :defer t
  :config
  (setq read-process-output-max (* 1024 1024))
  (add-to-list 'eglot-server-programs '(vue-mode . ("yarn" "vue-language-server" "--stdio")))
  :hook
  (ruby-mode . eglot-ensure)
  (vue-mode . eglot-ensure))

Any pointers are welcome.

Thanks in advance.

[sevillaarvin]

Yep, here is my init.el

https://config.cyberaesthete.xyz/dist/.emacs.d/init.el

I haven't experienced the timeout and dying, what version of volar are you on?

What I have experienced is volar not starting at all because it needs the tsserver for initializationOptions. Here's the relevant part in my config:

https://config.cyberaesthete.xyz/emacs.html#org0a3fea4

  (:when-loaded
    (add-to-list 'eglot-server-programs
                 '(vue-mode . (eglot-volar "vue-language-server" "--stdio")))

    (defclass eglot-volar (eglot-lsp-server) ()
      :documentation "A custom class for volar")

    (cl-defmethod eglot-initialization-options ((server eglot-volar))
      "Passes through required volar initialization options"
      (let*
          ((serverPath
            (expand-file-name
             "lib/tsserverlibrary.js"
             (shell-command-to-string "npm list --global --parseable typescript | head -n1 | tr -d \"\n\""))))
        (list :typescript
              (list :serverPath serverPath)
              :languageFeatures
              (list :completion
                    (list :defaultTagNameCase "both"
                          :defaultAttrNameCase "kebabCase"
                          :getDocumentNameCasesRequest nil
                          :getDocumentSelectionRequest nil)
                    :diagnostics
                    (list :getDocumentVersionRequest nil))
              :documentFeatures
              (list :documentFormatting
                    (list :defaultPrintWidth 100
                          :getDocumentPrintWidthRequest nil)
                    :documentSymbol t
                    :documentColor t)))))

[pbgc]

on MacOS this was not working ... had to change:

(shell-command-to-string "npm list --global --parseable typescript | head -n1 | tr -d \"\n\"")

to

(string-trim-right (shell-command-to-string "npm list --global --parseable typescript | head -n1"))

[epetousis]

For anyone else still having trouble even with the correct LSP init options: don't forget to ensure that your major mode is entitled vue-mode. If you are using web-mode, don't forget to define a derived mode using e.g (define-derived-mode vue-mode web-mode "Vue"), or eglot will send web as the languageId to Volar, and you will receive no completions.

[joaotavora]

There are also other waysto override the languageId, not sure if they're documented(I think they are), but look in the source code.

[epetousis]

I should've thought to look 😅 there is indeed (put 'web-mode 'eglot-language-id "vue") as another potential solution.

[jacobzlogar]

thank you @sevillaarvin @hirotaka!!!