Awesome
LSP-volar
This is a helper package that automatically installs and updates the Volar Language Server for you.
Warning This package integrates with the legacy 1.x version of the Vue Language Features (formerly Volar). To use the latest version of Vue Language Features migrate to
LSP-vue
.
Table of Contents
Installation
- Install LSP, Vue Syntax Highlight and LSP-volar from Package Control.
- Restart Sublime.
Configuration
Open the configuration file using Command Palette with Preferences: LSP-volar Settings
command or opening it from the Sublime menu (Preferences > Package Settings > LSP > Servers > LSP-volar
).
Enable for non-Vue files
Allow LSP-volar to start in *.ts | *.tsx | *.js | *.jsx
files.
Warning Don't use this unless you really have a specific reason. It provides worse experience than
LSP-typescript
in.js/.ts
files due to not receiving diagnostic updates on modifying related files. Also it's missing some features ofLSP-typescript
. See related issue: https://github.com/vuejs/language-tools/issues/3229
Per project:
Create a sublime project file with the following contents:
{
"folders":
[
{
"path": "."
}
],
"settings": {
"LSP": {
"LSP-volar": {
"selector": "text.html.vue | source.ts | source.tsx | source.js | source.jsx"
},
"LSP-typescript": {
"enabled": false
}
}
}
}
Globally:
From the Command Palette select Preferences: LSP-volar Settings
and paste the following:
// Settings in here override those in "LSP-volar/LSP-volar.sublime-settings"
{
"selector": "text.html.vue | source.ts | source.tsx | source.js | source.jsx"
}
NOTE: When enabling LSP-volar for non-Vue files, it is advisable to disable the
LSP-typescript
package to avoid showing duplicate results.
Commands
Package provides a few commands in the Command Palette that can be useful for debugging Volar issues.
LSP-volar (Debug): Show Virtual Files
Shows a tree view of all internal virtual files associated with the currently opened vue
file and allows for seeing their contents.
LSP-volar (Debug): Write Virtual Files
Writes all internal virtual files to disk. The files will be created alongside the original vue
files that Volar has loaded internally. This can also include vue
files within node_modules
. Those files can be useful in figuring out why there are type issues in vue
files that maybe are due to a Volar bug.
Note Type-checking those genearated
.ts
files usingLSP-typescript
is not equivalent to whatLSP-volar
does as Volar does some internal Vue type augmentations thatLSP-typescript
does not do. To get a more relevant type checking when inspecting those files it's recommended to disableLSP-typescript
and enableLSP-volar
for TS files instead. Check Enable for non-Vue files section.
Note If there are many
vue
files in the project then a lot of files can be created by this command and those could be a bit tiresome to clean up later. In a git-tracked project you might want to usegit clean -fx
to remove all untracked files. Just make sure you don't have any useful untracked files.
Inlay hints
Inlay hints are short textual annotations that show parameter names, type hints.
To enable inlay hints:
- Open the command palette and select
Preferences: LSP Settings
, then enableshow_inlay_hints
:
{
"show_inlay_hints": true
}
- Modify the following settings through
Preferences: LSP-volar Settings
:
{
"settings": {
// javascript inlay hints options.
"javascript.inlayHints.enumMemberValues.enabled": false,
"javascript.inlayHints.functionLikeReturnTypes.enabled": false,
"javascript.inlayHints.parameterNames.enabled": "none",
"javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": false,
"javascript.inlayHints.parameterTypes.enabled": false,
"javascript.inlayHints.propertyDeclarationTypes.enabled": false,
"javascript.inlayHints.variableTypes.enabled": false,
// typescript inlay hints options.
"typescript.inlayHints.enumMemberValues.enabled": false,
"typescript.inlayHints.functionLikeReturnTypes.enabled": false,
"typescript.inlayHints.parameterNames.enabled": "none",
"typescript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": false,
"typescript.inlayHints.parameterTypes.enabled": false,
"typescript.inlayHints.propertyDeclarationTypes.enabled": false,
"typescript.inlayHints.variableTypes.enabled": false,
}
}
NOTE: Inlay hints require TypeScript 4.4+.