Emacs setup for vue + typescript (volar + eglot + web-mode) #1184
-
|
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/ |
Beta Was this translation helpful? Give feedback.
Replies: 8 comments 19 replies
-
|
Had the same issue and this is what worked for me: |
Beta Was this translation helpful? Give feedback.
-
|
This was not working for me.. had to change:
to
|
Beta Was this translation helpful? Give feedback.
-
|
Has anyone gotten this to actually work? It can't seem to find the "tdsk" root in my case. I get an error: (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)))) |
Beta Was this translation helpful? Give feedback.
-
|
@trev-dev i give you my vue setup that works great (for me). Maybe it can help: |
Beta Was this translation helpful? Give feedback.
-
|
It helps in the sense that it looks a lot like mine. If I inspect (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 |
Beta Was this translation helpful? Give feedback.
-
|
I got it. Eglot was timing out too quickly. I set |
Beta Was this translation helpful? Give feedback.
-
|
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)))) |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
@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) |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
@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!). |
Beta Was this translation helpful? Give feedback.
-
|
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 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)))))
|
Beta Was this translation helpful? Give feedback.
-
|
I have tried it with no luck. I have modified the config so that eglot sends |
Beta Was this translation helpful? Give feedback.
-
|
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:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Yeah, agreed. I'm just trying to figure out why the hover and highlight events just return nothing. Something server-side I'm sure. |
Beta Was this translation helpful? Give feedback.
-
|
@joaotavora right! Sorry |
Beta Was this translation helpful? Give feedback.
-
|
In case it's helpful, the vue-eglot-init-options config above has a bug, which prevents the server from giving diagnostics in the The change is that "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
}
}, |
Beta Was this translation helpful? Give feedback.
-
|
@garyo the config you are pointing does not have any :vue section ... it's an older version before Volar introducing Hybrid Mode .. |
Beta Was this translation helpful? Give feedback.
-
|
Yes indeed, you're right, that one you linked to has the fix, close-paren after |
Beta Was this translation helpful? Give feedback.
-
|
I haven't been able to get this to work with eglot after much effort. No matter what I try the language server gives blank replies to any Also why would you be looking for a global typescript lib for the tsdk instead of the project root as LSP does? |
Beta Was this translation helpful? Give feedback.
-
|
I was also missing |
Beta Was this translation helpful? Give feedback.
-
|
I'd like to add that on Node 23 the - npm list --global --parseable typescript | head -n1
+ NODE_NO_WARNINGS=1 npm list --global --parseable typescript | head -n1becuase the first version (without NODE_NO_WARNINGS) returns (on Node 23): so due to the |
Beta Was this translation helpful? Give feedback.
Had the same issue and this is what worked for me: