lsp-volar
Language support for Vue3
This package has been merged into lsp-mode, so you can use lsp-mode directly. There will only be some experimental updates here. Once stable, they will be submitted to lsp-mode.
Installation
Doom Emacs
in packages.el
(package! lsp-volar :recipe (:host github :repo "jadestrong/lsp-volar"))in config.el
(use-package! lsp-volar)straight.el
First, place the following bootstrap code in your init-file:
(defvar bootstrap-version)
(let ((bootstrap-file
(expand-file-name "straight/repos/straight.el/bootstrap.el" user-emacs-directory))
(bootstrap-version 5))
(unless (file-exists-p bootstrap-file)
(with-current-buffer
(url-retrieve-synchronously
"https://raw.githubusercontent.com/raxod502/straight.el/develop/install.el"
'silent 'inhibit-cookies)
(goto-char (point-max))
(eval-print-last-sexp)))
(load bootstrap-file nil 'nomessage))Then install lsp-volar package:
(straight-use-package
'(lsp-volar :type git :host github :repo "jadestrong/lsp-volar"))Last use it:
(use-package lsp-volar
:straight t)Hacks
If you prompt \u0000 lsp-warn when performing autocomplete in Vue template, you need to use advice-add to override the following function lsp--create-filter-function to filter the special characters. see this issue johnsoncodehk/volar#1118 .
In doom-emacs, you can place this code in your ~/.doom.d/config.el ,otherwise, you need to use advice-add to replace defadvice! .
(defadvice! +lsp--create-filter-function (workspace)
:override #'lsp--create-filter-function
(let ((body-received 0)
leftovers body-length body chunk)
(lambda (_proc input)
(setf chunk (if (s-blank? leftovers)
input
(concat leftovers input)))
(let (messages)
(while (not (s-blank? chunk))
(if (not body-length)
;; Read headers
(if-let ((body-sep-pos (string-match-p "\r\n\r\n" chunk)))
;; We've got all the headers, handle them all at once:
(setf body-length (lsp--get-body-length
(mapcar #'lsp--parse-header
(split-string
(substring-no-properties chunk
(or (string-match-p "Content-Length" chunk)
(error "Unable to find Content-Length header."))
body-sep-pos)
"\r\n")))
body-received 0
leftovers nil
chunk (substring-no-properties chunk (+ body-sep-pos 4)))
;; Haven't found the end of the headers yet. Save everything
;; for when the next chunk arrives and await further input.
(setf leftovers chunk
chunk nil))
(let* ((chunk-length (string-bytes chunk))
(left-to-receive (- body-length body-received))
(this-body (if (< left-to-receive chunk-length)
(prog1 (substring-no-properties chunk 0 left-to-receive)
(setf chunk (substring-no-properties chunk left-to-receive)))
(prog1 chunk
(setf chunk nil))))
(body-bytes (string-bytes this-body)))
(push this-body body)
(setf body-received (+ body-received body-bytes))
(when (>= chunk-length left-to-receive)
(condition-case err
(with-temp-buffer
(apply #'insert
(nreverse
(prog1 body
(setf leftovers nil
body-length nil
body-received nil
body nil))))
(decode-coding-region (point-min)
(point-max)
'utf-8)
(goto-char (point-min))
(while (search-forward "\\u0000" nil t)
(replace-match "" nil t))
(goto-char (point-min))
(push (lsp-json-read-buffer) messages))
(error
(lsp-warn "Failed to parse the following chunk:\n'''\n%s\n'''\nwith message %s"
(concat leftovers input)
err)))))))
(mapc (lambda (msg)
(lsp--parser-on-message msg workspace))
(nreverse messages))))))Changelog
-
In
volar 0.30.0you can skip calculate auto import by setlsp-typescript-suggest-auto-importstonilto improve the completion speed. Check this issue.lsp-typescript-suggest-auto-importsis a setting registed bylsp-vetur.This will disable the auto completation of third-party libraries and affect the experience, so you don't have to set it to
nilunless you feel that there is a significant performance imporvement after disabling it . -
After
volar 0.32.1@volar/serverwas renamed to@volar/vue-language-server, so you need resintall the new package.
Language Server
M-x lsp-install-serverselectvolar-apiorvolar-docorvolar-html- Or use
npm/yarn,npm install -g @volar/vue-language-server
Customization
lsp-volar
lsp-volar-take-over-mode
It is enabled by default. If you want disable it, add (setq lsp-volar-take-over-mode nil) to your config file. What is Take Over Mode?
lsp-volar-activate-file
If your project don't have a package.json file with vue dependencies in workspace-root, such as a yarn workspace / mono-repo project, you can add a file with a custom name to force enable @volar/server for this project. The default file name is .volarrc. You can specify any file name by modifying the file lsp-volar-activate-file variable.
lsp-volar-completion-tag-casing
Type: (choice (const both) (const kebabCase) (const pascalCase))
Default: both
Casing conversion for tag completion
lsp-volar-completion-attr-casing
Type: (choice (const kebabCase) (const camelCase))
Default: kebabCase
Casing conversion for attr completion.
Reference
- Tutorial: nvim-lspconfig - how to set up multiple language servers
- I have multiple language servers registered for language FOO. Which one will be used when opening a project?
- I have multiple language servers for language FOO and I want to select the server per project, what can I do?
- multiple servers