Emacs setup for vue + typescript (volar + eglot + web-mode)

[aadi58002]

Hello there,I searched through the eglot issues and discussion and most i could find was this discussion for a eglot recipe for volarhttps://github.com//discussions/1058

but the server connects and starts but i don't get any completion.

Reddit Question -> https://www.reddit.com/r/emacs/comments/11svcvj/emacs_setup_for_vue_typescript_volar_eglot_webmode/
Eglot logs https://pastebin.com/nttpMqPa

[sierkov-bot]

Had the same issue and this is what worked for me:

;; web-mode setup
(define-derived-mode vue-mode web-mode "Vue")
(add-to-list 'auto-mode-alist '("\\.vue\\'" . vue-mode))

(defun vue-eglot-init-options ()
             (let ((tsdk-path (expand-file-name
                               "lib"
                               (shell-command-to-string "npm list --global --parseable typescript | head -n1 | tr -d \"\n\""))))
               `(:typescript (:tsdk ,tsdk-path
                              :languageFeatures (:completion
                                                 (:defaultTagNameCase "both"
                                                  :defaultAttrNameCase "kebabCase"
                                                  :getDocumentNameCasesRequest nil
                                                  :getDocumentSelectionRequest nil)
                                                 :diagnostics
                                                 (:getDocumentVersionRequest nil))
                              :documentFeatures (:documentFormatting
                                                 (:defaultPrintWidth 100
                                                  :getDocumentPrintWidthRequest nil)
                                                 :documentSymbol t
                                                 :documentColor t)))))

;; Volar
(add-to-list 'eglot-server-programs
                        `(vue-mode . ("vue-language-server" "--stdio" :initializationOptions ,(vue-eglot-init-options))))

[pbgc]

This was not working for me.. 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"))

[trev-dev]

Has anyone gotten this to actually work? It can't seem to find the "tdsk" root in my case. I get an error:
error in process filter: [eglot] -32603: Request initialize failed with message: Can't find typescript.js or tsserverlibrary.js in undefined

(defun eglot-volar-find-typescript ()
  "Get the global npm typescript location."
  (string-trim-right
   (shell-command-to-string (concat "npm list --global --parseable typescript"
                                    " | head -n1"))))

(defun eglot-volar-init-options ()
  "Get the vue-language-server initOptions."
  (let ((tdsk-path (expand-file-name "lib" (eglot-volar-find-typescript))))
    `(:typescript (:tdsk ,tdsk-path
                   :languageFeatures (:completion
                                      (:defaultTagNameCase "both"
                                       :defaultAttrNameCase "kebabCase"
                                       :getDocumentNameCasesRequest nil
                                       :getDocumentSelectionRequest nil)
                                   :diagnostics
                                   (:getDocumentVersionRequest nil))
                   :documentFeatures (:documentFormatting
                                      (:defaultPrintWidth 100
                                       :getDocumentPrintWidthRequest nil)
                                      :documentSymbol t
                                      :documentColor t)))))

(with-eval-after-load 'eglot
  (add-to-list 'eglot-server-programs
               `(vue-mode . ("vue-language-server"
                             "--stdio"
                             :initializationOptions
                             ,(eglot-volar-init-options))))

[pbgc]

@trev-dev i give you my vue setup that works great (for me). Maybe it can help:

(define-derived-mode pbgc-vue-mode web-mode "pbVue"
  "A major mode derived from web-mode, for editing .vue files with LSP support.")


(add-to-list 'auto-mode-alist '("\\.vue\\'" . pbgc-vue-mode))

(defun pbgc-vue-custom ()
  (flycheck-mode t)
  (eglot-ensure))
(add-hook 'pbgc-vue-mode-hook 'pbgc-vue-custom)

(defun vue-eglot-init-options ()
             (let ((tsdk-path (expand-file-name
                               "lib"
                               (string-trim-right (shell-command-to-string "npm list --global --parseable typescript | head -n1"))
                               )))
               `(:typescript (:tsdk ,tsdk-path
                              :languageFeatures (:completion
                                                 (:defaultTagNameCase "both"
                                                  :defaultAttrNameCase "kebabCase"
                                                  :getDocumentNameCasesRequest nil
                                                  :getDocumentSelectionRequest nil)
                                                 :diagnostics
                                                 (:getDocumentVersionRequest nil))
                              :documentFeatures (:documentFormatting
                                                 (:defaultPrintWidth 100
                                                  :getDocumentPrintWidthRequest nil)
                                                 :documentSymbol t
                                                 :documentColor t)))))

;; Volar
(add-to-list 'eglot-server-programs
                        `(pbgc-vue-mode . ("vue-language-server" "--stdio" :initializationOptions ,(vue-eglot-init-options))))

[trev-dev]

It helps in the sense that it looks a lot like mine. If I inspect eglot-server-programs, I see this as the first member of my list:

(vue-mode "vue-language-server" "--stdio"
          :initializationOptions (:typescript
                                  (:tdsk "/home/trev/.local/node/lib/node_modules/typescript/lib"
                                         :languageFeatures
                                         (:completion
                                          (:defaultTagNameCase "both"
                                           :defaultAttrNameCase "kebabCase"
                                           :getDocumentNameCasesRequest nil
                                           :getDocumentSelectionRequest nil)
                                          :diagnostics (:getDocumentVersionRequest nil))
                                         :documentFeatures
                                         (:documentFormatting
                                          (:defaultPrintWidth 100 :getDocumentPrintWidthRequest nil)
                                          :documentSymbol t :documentColor t))))

The "missing" files typescript.js or tsserverlibrary.js are indeed at "/home/trev/.local/node/lib/node_modules/typescript/lib"

[trev-dev]

I got it. Eglot was timing out too quickly. I set eglot-connect-timeout to 120 and it works.

[unhammer]

For those installing vue-language-server from nix:

(define-derived-mode vue-mode web-mode "Vue")
(add-to-list 'auto-mode-alist '("\\.vue\\'" . vue-mode))
(defun vue-eglot-init-options ()
  "Set SDK path and default options."
  (let ((tsdk-path (expand-file-name
                    "lib/node_modules/typescript/lib/"
                    (shell-command-to-string
                     (string-join '("nix-store  --query --references `which vue-language-server`"
                                    "xargs -n1 nix-store -q --referrers"
                                    "grep typescript-language-server"
                                    "tr -d '\n'")
                                  " | ")))))
    `(:typescript (:tsdk ,tsdk-path
                         :languageFeatures (:completion
                                            (:defaultTagNameCase "both"
                                                                 :defaultAttrNameCase "kebabCase"
                                                                 :getDocumentNameCasesRequest nil
                                                                 :getDocumentSelectionRequest nil)
                                            :diagnostics
                                            (:getDocumentVersionRequest nil))
                         :documentFeatures (:documentFormatting
                                            (:defaultPrintWidth 100
                                                                :getDocumentPrintWidthRequest nil)
                                            :documentSymbol t
                                            :documentColor t)))))
(add-to-list 'eglot-server-programs ;; nix-env -iA nixpkgs.nodePackages.volar
             `(vue-mode . ("vue-language-server" "--stdio" :initializationOptions ,(vue-eglot-init-options))))

[garyo]

I'm doing pretty much that, but the init options aren't getting passed to the server. Can you check your eglot log to see if yours are getting passed?

[pbgc]

@garyo I'm 100% sure that the init options are being passed. I already checked that in the past .. but I don't need to .. because if the typescript option and and hybridMode: false were not being passed ... it would not work at all! (without setting hybridMode to false I would need to have another separated Language Server for typescript ... and eglot cannot handle more than a Language Server at the same time)

[pbgc]

@garyo looking at your settings .. you are missing the:

:vue (:hybridMode :json-false)

and

(put 'pbgc-vue-mode 'eglot-language-id "vue")

Comment you code and try to use mine above .. to check if it will work (I think it will) .. or there's another problem.
I'm using: @vue/[email protected]

[garyo]

Indeed -- I had a couple of errors in my code (including my file wasn't getting set into the proper major mode), so it wasn't getting the options passed properly. Got it going now.
I do still get "[eglot] (warning) Server tried to register unsupported capability `workspace/didChangeWorkspaceFolders'" and it's not giving me any completions or results yet, but at least the server seems to stay running.

[pbgc]

@garyo just ignore the warning (I get it too..and can be ignored. You could try to disable that registration attempt by eglot .. but just ignore it!).
If you don't get any completions ... you don't have corfu-mode or company-mode enabled on the buffer!

[sethidden]

fyi treesit-auto recently merged support for downloading vue grammars for tree-sitter: renzmann/treesit-auto#86 so now theoretically you could download vue-ts-mode to get tree-sitter support instead of web-mode

Run (treesit-install-all) after installing the treesit-auto pkg to install the grammars so that vue-ts-mode can work.

I'm using Elpaca with use-package here

(use-package treesit-auto
    :ensure t
    :config
    (setq treesit-auto-install t)
    (treesit-auto-add-to-auto-mode-alist 'all)
    (global-treesit-auto-mode))

(use-package vue-ts-mode
    :ensure (:host github :repo "8uff3r/vue-ts-mode"))

    (use-package eglot
      :ensure t
      ;; these are all my modes that i launch eglot for but you vue-ts-mdoe is most important for this post's topic
      :hook (((js-ts-mode json-ts-mode yaml-ts-mode typescript-ts-mode java-ts-mode mhtml-mode css-ts-mode vue-ts-mode) . eglot-ensure))
      :preface
      (defun vue-eglot-init-options ()
        (let ((tsdk-path (expand-file-name
                          "lib"
                          (string-trim-right (shell-command-to-string "npm list --global --parseable typescript | head -n1")))))
          `(:typescript (:tsdk ,tsdk-path
                               :languageFeatures (:completion
                                                  (:defaultTagNameCase "both"
    								   :defaultAttrNameCase "kebabCase"
    								   :getDocumentNameCasesRequest nil
    								   :getDocumentSelectionRequest nil)
                                                  :diagnostics
                                                  (:getDocumentVersionRequest nil))
                               :documentFeatures (:documentFormatting
                                                  (:defaultPrintWidth 100
    								  :getDocumentPrintWidthRequest nil)
                                                  :documentSymbol t
                                                  :documentColor t)))))
      :config
      (add-to-list 'eglot-server-programs
                   `(vue-ts-mode . ("vue-language-server" "--stdio" :initializationOptions ,(vue-eglot-init-options)))))

[pedroprieto]

I have tried it with no luck. I have modified the config so that eglot sends languageid = vue instead of vue-ts. However, I only get emmet completions (html and css), but no JavaScript integration. Does eglot support it?

[joaotavora]

The registration attempt is not by Eglot. The message is pretty clear about that

…

On Mon, Aug 26, 2024, 12:48 pbgc ***@***.***> wrote: @garyo <https://github.com/garyo> just ignore the warning (I get it too..and can be ignored. You could try to disable that registration attempt by eglot .. but just ignore it!). If you don't get any completions ... you don't have corfu-mode or company-mode enabled on the buffer! — Reply to this email directly, view it on GitHub <#1184 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC6PQ2PFQ3N4WHW3OUURL3ZTMIYDAVCNFSM6AAAAAAV5I3YSGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANBVGA4DMNY> . You are receiving this because you commented.Message ID: ***@***.***>

[garyo]

Yeah, agreed. I'm just trying to figure out why the hover and highlight events just return nothing. Something server-side I'm sure.

[jsonrpc] e[10:58:47.782] --> textDocument/didOpen {"jsonrpc":"2.0","method":"textDocument/didOpen","params":{"textDocument":{"uri":"file:///Users/garyo/astrid/tutor-site/hugorcd-canvas/app/pages/articles/%5B...slug%5D.vue","version":0,"languageId":"gco-vue","text":"<script lang=\"ts\" setup>\nimport { Toaster } from 'vue-sonner'\n\nconst { t, locale } = useI18n()\n\nconst route = useRoute()\nconst { data: page } = await useAsyncData(`${route.path}`, () => queryContent(route.path).findOne())\n\nif (!page.value) {\n  throw createError({ statusCode: 404, statusMessage: 'Page not found' })\n}\n\nuseContentHead(page.value)\n\nconst runtimeConfig = useRunti...
...
[jsonrpc] e[10:58:51.389] --> textDocument/hover[3] {"jsonrpc":"2.0","id":3,"method":"textDocument/hover","params":{"textDocument":{"uri":"file:///Users/garyo/astrid/tutor-site/hugorcd-canvas/app/pages/articles/%5B...slug%5D.vue"},"position":{"line":21,"character":9}}}
[jsonrpc] e[10:58:51.389] --> textDocument/documentHighlight[4] {"jsonrpc":"2.0","id":4,"method":"textDocument/documentHighlight","params":{"textDocument":{"uri":"file:///Users/garyo/astrid/tutor-site/hugorcd-canvas/app/pages/articles/%5B...slug%5D.vue"},"position":{"line":21,"character":9}}}
[jsonrpc] e[10:58:51.397] <-- textDocument/hover[3] {"jsonrpc":"2.0","id":3,"result":null}
[jsonrpc] e[10:58:51.398] <-- textDocument/documentHighlight[4] {"jsonrpc":"2.0","id":4,"result":[]}
[jsonrpc] e[10:58:54.494] --> textDocument/hover[5] {"jsonrpc":"2.0","id":5,"method":"textDocument/hover","params":{"textDocument":{"uri":"file:///Users/garyo/astrid/tutor-site/hugorcd-canvas/app/pages/articles/%5B...slug%5D.vue"},"position":{"line":22,"character":8}}}
[jsonrpc] e[10:58:54.494] --> textDocument/documentHighlight[6] {"jsonrpc":"2.0","id":6,"method":"textDocument/documentHighlight","params":{"textDocument":{"uri":"file:///Users/garyo/astrid/tutor-site/hugorcd-canvas/app/pages/articles/%5B...slug%5D.vue"},"position":{"line":22,"character":8}}}
[jsonrpc] e[10:58:54.505] <-- textDocument/hover[5] {"jsonrpc":"2.0","id":5,"result":null}
[jsonrpc] e[10:58:54.505] <-- textDocument/documentHighlight[6] {"jsonrpc":"2.0","id":6,"result":[]}
[jsonrpc] e[10:58:55.503] --> textDocument/hover[7] {"jsonrpc":"2.0","id":7,"method":"textDocument/hover","params":{"textDocument":{"uri":"file:///Users/garyo/astrid/tutor-site/hugorcd-canvas/app/pages/articles/%5B...slug%5D.vue"},"position":{"line":36,"character":9}}}
[jsonrpc] e[10:58:55.503] --> textDocument/documentHighlight[8] {"jsonrpc":"2.0","id":8,"method":"textDocument/documentHighlight","params":{"textDocument":{"uri":"file:///Users/garyo/astrid/tutor-site/hugorcd-canvas/app/pages/articles/%5B...slug%5D.vue"},"position":{"line":36,"character":9}}}
[jsonrpc] e[10:58:55.514] <-- textDocument/hover[7] {"jsonrpc":"2.0","id":7,"result":null}
[jsonrpc] e[10:58:55.515] <-- textDocument/documentHighlight[8] {"jsonrpc":"2.0","id":8,"result":[]}

[pbgc]

@joaotavora right! Sorry

[garyoberbrunner-gpsw]

In case it's helpful, the vue-eglot-init-options config above has a bug, which prevents the server from giving diagnostics in the <script> section of a Vue SFC. Here's a correct version:

  (defun vue-eglot-init-options ()
    (let ((tsdk-path (typescript-lib-dir)))
      `(:typescript (:tsdk ,tsdk-path)
                    :vue (:hybridMode :json-false)
                    :languageFeatures (:completion
                                       (:defaultTagNameCase "both"
                                                            :defaultAttrNameCase "kebabCase"
                                                            :getDocumentNameCasesRequest nil
                                                            :getDocumentSelectionRequest nil)
                                       :diagnostics
                                       (:getDocumentVersionRequest nil))
                    :documentFeatures (:documentFormatting
                                       (:defaultPrintWidth 100
                                                           :getDocumentPrintWidthRequest nil)
                                       :documentSymbol t
                                       :documentColor t))))

  )

The change is that :vue and :languageFeatures etc. are at the same JSON level as :typescript, not a sub-object of it (so just moving a close-paren, really). The resulting JSON sent to the server looks like this:

    "initializationOptions": {
      "typescript": {
        "tsdk": "/Users/garyo/.config/yarn/global/node_modules/typescript/lib"
      },
      "vue": {
        "hybridMode": false
      },
      "languageFeatures": {
        "completion": {
          "defaultTagNameCase": "both",
          "defaultAttrNameCase": "kebabCase",
          "getDocumentNameCasesRequest": null,
          "getDocumentSelectionRequest": null
        },
        "diagnostics": {
          "getDocumentVersionRequest": null
        }
      },
      "documentFeatures": {
        "documentFormatting": {
          "defaultPrintWidth": 100,
          "getDocumentPrintWidthRequest": null
        },
        "documentSymbol": true,
        "documentColor": true
      }
    },

[pbgc]

@garyo the config you are pointing does not have any :vue section ... it's an older version before Volar introducing Hybrid Mode ..
with the one I sent after (#1184 (reply in thread)) I get diagnostics..

[garyo]

Yes indeed, you're right, that one you linked to has the fix, close-paren after ,tsdk-path. So:(:typescript (:tsdk ,tsdk-path) :vue (:hybridMode :json-false)) ...
I'm using a slightly-modified globally-installed @vue/[email protected] (had to clean up a couple of its dependencies in its package.json due to recent volar breaking changes) and it works with my config but not with yours (with yours I get no docs in the typescript part). There certainly are lots of moving parts though!