LSP-volar
Vue support for Sublime's LSP plugin
Details
Installs
- Total 6K
- Win 2K
- Mac 2K
- Linux 1K
Jul 27 | Jul 26 | Jul 25 | Jul 24 | Jul 23 | Jul 22 | Jul 21 | Jul 20 | Jul 19 | Jul 18 | Jul 17 | Jul 16 | Jul 15 | Jul 14 | Jul 13 | Jul 12 | Jul 11 | Jul 10 | Jul 9 | Jul 8 | Jul 7 | Jul 6 | Jul 5 | Jul 4 | Jul 3 | Jul 2 | Jul 1 | Jun 30 | Jun 29 | Jun 28 | Jun 27 | Jun 26 | Jun 25 | Jun 24 | Jun 23 | Jun 22 | Jun 21 | Jun 20 | Jun 19 | Jun 18 | Jun 17 | Jun 16 | Jun 15 | Jun 14 | Jun 13 | Jun 12 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 4 | 1 | 4 | 2 | 1 | 1 | 5 | 2 | 4 | 3 | 6 | 0 | 0 | 2 | 2 | 4 | 2 | 3 | 3 | 2 | 2 | 3 | 1 | 4 | 2 | 0 | 1 | 2 | 0 | 1 | 4 | 0 | 3 | 2 | 1 | 1 | 4 | 3 | 4 | 2 | 3 | 4 | 1 | 2 | 3 |
Mac | 0 | 5 | 0 | 1 | 3 | 0 | 1 | 0 | 2 | 1 | 1 | 1 | 2 | 1 | 1 | 4 | 2 | 5 | 0 | 3 | 1 | 0 | 4 | 2 | 3 | 3 | 1 | 3 | 1 | 2 | 1 | 0 | 1 | 2 | 2 | 5 | 2 | 0 | 2 | 1 | 1 | 0 | 3 | 4 | 2 | 3 |
Linux | 0 | 2 | 1 | 0 | 1 | 1 | 2 | 0 | 1 | 1 | 1 | 0 | 1 | 1 | 1 | 4 | 0 | 2 | 1 | 2 | 0 | 2 | 0 | 6 | 2 | 1 | 2 | 5 | 2 | 0 | 2 | 1 | 1 | 4 | 2 | 2 | 0 | 1 | 2 | 4 | 5 | 0 | 0 | 1 | 0 | 2 |
Readme
- Source
- raw.githubusercontent.com
LSP-volar
This is a helper package that automatically installs and updates the Volar Language Server for you.
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:
1. Open the command palette and select Preferences: LSP Settings
, then enable show_inlay_hints
:
“js
{
"show_inlay_hints”: true
}
2. Modify the following settings through `Preferences: LSP-volar Settings`:
```js
{
"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+.
Vue 2 support
Please see Volar's Installation for setup instructions.