vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js

Vue Language Tools

⚡ High-performance Vue language tooling based-on Volar.js

💬 #language-tools on our Discord Server

Packages

• Vue Language Features
  Vue, Vitepress, petite-vue language support extension for VSCode
• TypeScript Vue Plugin
  VSCode extension to support Vue in TS server
• vue-tsc
  Type-check and dts build command line tool
• vue-component-meta
  Component props, events, slots types information extract tool
• vite-plugin-vue-component-preview
  Vite plugin for support Vue component preview view with Vue Language Features
• @vue/language-server
  The language server itself.
• @vue/typescript-plugin
  Typescript plugin for the language server.

Community Integration

yaegassy/coc-volar ⚡ 🤝 🅿️
Vue language client for coc.nvim

neovim/nvim-lspconfig ⚡ 🤝
Vue language server configuration for Neovim

How to configure vue language server with neovim and lsp?

Hybrid mode configuration (Requires @vue/language-server version ^2.0.0)

Note: The "Take Over" mode has been discontinued. Instead, a new "Hybrid" mode has been introduced. In this mode, the Vue Language Server exclusively manages the CSS/HTML sections. As a result, you must run @vue/language-server in conjunction with a TypeScript server that employs @vue/typescript-plugin. Below is a streamlined configuration for Neovim's LSP, updated to accommodate the language server following the upgrade to version 2.0.0.

-- If you are using mason.nvim, you can get the ts_plugin_path like this
-- local mason_registry = require('mason-registry')
-- local vue_language_server_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server'

local vue_language_server_path = '/path/to/@vue/language-server'

local lspconfig = require('lspconfig')

lspconfig.tsserver.setup {
  init_options = {
    plugins = {
      {
        name = '@vue/typescript-plugin',
        location = vue_language_server_path,
        languages = { 'vue' },
      },
    },
  },
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
}

-- No need to set `hybridMode` to `true` as it's the default value
lspconfig.volar.setup {}

None-Hybrid mode(similar to takeover mode) configuration (Requires @vue/language-server version ^2.0.7)

Note: If hybridMode is set to false Volar will run embedded tsserver therefore there is no need to run it separately.

For more information see #4119

Make sure you have typescript installed globally or pass the location to volar

Use volar for all .{vue,js,ts,tsx,jsx} files.

local lspconfig = require('lspconfig')

-- lspconfig.tsserver.setup {} 
lspconfig.volar.setup {
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    vue = {
      hybridMode = false,
    },
  },
}

Use volar for only .vue files and tsserver for .ts and .js files.

local lspconfig = require('lspconfig')

lspconfig.tsserver.setup {
  init_options = {
    plugins = {
      {
        name = '@vue/typescript-plugin',
        location = '/path/to/@vue/language-server',
        languages = { 'vue' },
      },
    },
  },

lspconfig.volar.setup {
  init_options = {
    vue = {
      hybridMode = false,
    },
  },
},

mattn/vim-lsp-settings ⚡
Vue language server auto configuration for vim-lsp

sublimelsp/LSP-volar 🤝
Vue language client for Sublime

kabiaa/atom-ide-volar
Vue language client for Atom

emacs-lsp/lsp-mode (jadestrong/lsp-volar) ⚡ 🤝
Vue language client for Emacs

tommasongr/nova-vue
Vue language client for Nova

xiaoxin-sky/lapce-vue
Vue language client for Lapce

Kingwl/monaco-volar
Vue language support for Monaco on Browser

WebStorm
Built-in integration for @vue/language-server

Eclipse WildWebDeveloper
Vue language server configuration for Eclipse

* ⚡ support multiple servers
* 🤝 support take over mode
* 🅿️ support extra preview features

Contribution Guide

If you want to work on the volar extension follow these commands to set up your local development environment.

🔎 Note that you will need pnpm - you can download it here: https://pnpm.io/installation.

git clone https://github.com/vuejs/language-tools.git
cd language-tools
pnpm install
pnpm run build

The recommended way to develop the volar extension is to use the Debug Tools provided by VSCode. Alternatively, you can run one of the scripts defined in the package.json file.

❗ You should always use the debug launch configs or package.json scripts defined in the root of the project.

Additional info for contributing to open source projects can be found here: https://docs.github.com/en/get-started/quickstart/contributing-to-projects

To develop with upstream Volar.js modules, you can setup workspace with https://github.com/volarjs/workspace.

High Level System Overview

flowchart LR
	%% IDEs
	VSC[VSCode]
	COC[coc.nvim]
	NEO[Neovim]
	VIM[vim-lsp]
	SUBLIME[Sublime]
	ATOM[Atom]
	EMACS[Emacs]
	NOVA[Nova]
	LAPCE[Lapce]

	%% Language Clients
	COC_VUE[yaegassy/coc-volar]
	NEO_VUE[neovim/nvim-lspconfig]
	VIM_VUE[mattn/vim-lsp-settings]
	SUBLIME_VUE[sublimelsp/LSP-volar]
	ATOM_VUE[kabiaa/atom-ide-volar]
	EMACS_VUE[jadestrong/lsp-volar]
	NOVA_VUE[tommasongr/nova-vue]
	LAPCE_VUE[xiaoxin-sky/lapce-vue]

	click COC_VUE "https://github.com/yaegassy/coc-volar"
	click NEO_VUE "https://github.com/neovim/nvim-lspconfig"
	click VIM_VUE "https://github.com/mattn/vim-lsp-settings"
	click SUBLIME_VUE "https://github.com/sublimelsp/LSP-volar"
	click ATOM_VUE "https://github.com/kabiaa/atom-ide-volar"
	click EMACS_VUE "https://github.com/jadestrong/lsp-volar"
	click NOVA_VUE "https://github.com/tommasongr/nova-vue"
	click LAPCE_VUE "https://github.com/xiaoxin-sky/lapce-vue"

	%% Volar - Extensions
	VSC_VUE[vscode-vue]
	VSC_TSVP[vscode-typescript-vue-plugin]

	click VSC_VUE "https://github.com/vuejs/language-tools/tree/master/extensions/vscode"
	click VSC_TSVP "https://github.com/vuejs/language-tools/tree/master/extensions/vscode-typescript-plugin"

	%% Volar - Packages
	VOLAR_VUE_SERVER["@vue/language-server"]
	VOLAR_VUE_TS["@vue/typescript"]
	VOLAR_VUE_CORE["@vue/language-core"]
	VOLAR_VUE_SERVICE["@vue/language-service"]
	VOLAR_PUG_SERVICE["@volar/pug-language-service"]
	VOLAR_TS_SERVICE["@volar/typescript-language-service"]
	VUE_TSC[vue-tsc]
	VUE_COMPONENT_META[vue-component-meta]
	TS_VUE_PLUGIN[typescript-vue-plugin]

	click VOLAR_VUE_SERVER "https://github.com/vuejs/language-tools/tree/master/packages/language-server"
	click VOLAR_VUE_TS "https://github.com/vuejs/language-tools/tree/master/packages/typescript"
	click VOLAR_VUE_CORE "https://github.com/vuejs/language-tools/tree/master/packages/language-core"
	click VOLAR_VUE_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/language-service"
	click VUE_TSC "https://github.com/vuejs/language-tools/tree/master/packages/tsc"
	click VUE_COMPONENT_META "https://github.com/vuejs/language-tools/tree/master/packages/component-meta"
	click TS_VUE_PLUGIN "https://github.com/vuejs/language-tools/tree/master/packages/typescript-plugin"
	click VOLAR_PUG_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/pug-language-service"
	click VOLAR_TS_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/typescript-language-service"

	%% External Packages
	HTML_SERVICE[vscode-html-languageservice]
	CSS_SERVICE[vscode-css-languageservice]
	JSON_SERVICE[vscode-json-languageservice]
	%% TS[typescript]
	VSC_TS[vscode.typescript-language-features]
	VUE_REPL["@vue/repl"]
	MONACO_VOLAR[Kingwl/monaco-volar]
	%% VITE_PLUGIN_CHECKER[fi3ework/vite-plugin-checker]
	%% COMPILE_VUE_SFC[leonzalion/compile-vue-sfc]

	click HTML_SERVICE "https://github.com/microsoft/vscode-html-languageservice"
	click CSS_SERVICE "https://github.com/microsoft/vscode-css-languageservice"
	click JSON_SERVICE "https://github.com/microsoft/vscode-json-languageservice"
	click TS "https://github.com/microsoft/TypeScript"
	click VSC_TS "https://github.com/microsoft/vscode/tree/main/packages/typescript-language-features"
	click VUE_REPL "https://github.com/vuejs/repl"
	click MONACO_VOLAR "https://github.com/Kingwl/monaco-volar"
	%% click VITE_PLUGIN_CHECKER "https://github.com/fi3ework/vite-plugin-checker"
	%% click COMPILE_VUE_SFC "https://github.com/leonzalion/compile-vue-sfc"

	subgraph VUE_CLIENTS[Language Clients]
	  direction LR
	  VUE_CLIENT_SEMANTIC[Semantic Features]
	  VUE_CLIENT_SYNTACTIC[Syntactic Features]
	end

	click VUE_CLIENT_SEMANTIC "https://github.com/vuejs/language-tools/discussions/393#discussioncomment-1213736"
	click VUE_CLIENT_SYNTACTIC "https://github.com/vuejs/language-tools/discussions/393#discussioncomment-1213736"

	subgraph Embedded Language Services
	  direction LR
	  VOLAR_TS_SERVICE
	  VOLAR_PUG_SERVICE
	  HTML_SERVICE
	  CSS_SERVICE
	  JSON_SERVICE
	end

	VSC --> VSC_VUE
	COC --> COC_VUE
	NEO --> NEO_VUE
	SUBLIME --> SUBLIME_VUE
	ATOM --> ATOM_VUE
	EMACS --> EMACS_VUE
	NOVA --> NOVA_VUE
	VIM --> VIM_VUE
	LAPCE --> LAPCE_VUE

	VSC_VUE --> VUE_CLIENTS
	COC_VUE --> VUE_CLIENTS
	NEO_VUE --> VUE_CLIENTS
	SUBLIME_VUE --> VUE_CLIENTS
	ATOM_VUE --> VUE_CLIENTS
	EMACS_VUE --> VUE_CLIENTS
	NOVA_VUE --> VUE_CLIENTS
	VIM_VUE --> VUE_CLIENTS
	LAPCE_VUE --> VUE_CLIENTS

	VUE_CLIENTS -- Language Server Protocol --> VOLAR_VUE_SERVER

	VSC --> VSC_TS
	VSC_TS --> VSC_TSVP
	VSC_TSVP --> TS_VUE_PLUGIN
	VOLAR_VUE_SERVER --> VOLAR_VUE_SERVICE
	VUE_TSC --> VOLAR_VUE_TS
	%% VITE_PLUGIN_CHECKER --> VUE_TSC
	%% COMPILE_VUE_SFC --> VUE_TSC
	TS_VUE_PLUGIN --> VOLAR_VUE_TS

	VUE_REPL --> MONACO_VOLAR
	MONACO_VOLAR --> VOLAR_VUE_SERVICE

	%% VOLAR_VUE_TS --> TS
	VUE_COMPONENT_META --> VOLAR_VUE_CORE
	VOLAR_VUE_TS --> VOLAR_VUE_CORE

	VOLAR_VUE_SERVICE --> VOLAR_VUE_CORE
	VOLAR_VUE_SERVICE --> VOLAR_TS_SERVICE
	VOLAR_VUE_SERVICE --> VOLAR_PUG_SERVICE
	VOLAR_VUE_SERVICE --> HTML_SERVICE
	VOLAR_VUE_SERVICE --> CSS_SERVICE
	VOLAR_VUE_SERVICE --> JSON_SERVICE

---

Full-time Support by

Boot a fresh environment in milliseconds.

language-tools's Issues

`<script setup>` variables declared with destructure

It seems <script setup> binding analysis is not accounting destructure patterns. This works:

<script setup>
const link = useEditLink()
const url = link.url
const text = link.text
</script>

This doesn't:

<script setup>
const { url, text } = useEditLink()
</script>

Reverse inference event types from `$emit`

I spent a lot of time on this issue, and current TS version seems can't solve it.

Problem

Given a $emit type with unknow overloads length:

type Emit = {
  (event: 'event-1', str: string): void;
  (event: 'event-2', num: number): void;
  (event: 'event-3', bool: boolean): void;
  // more events...
  (event: 'event-n', str: string, num: number, bool: boolean): void;
}

How to get the event function type with specify event name?

type EmitEvent<F, E> = ...;

type Event_1 = EmitEvent<Emit, 'event-1'>; // (str: string) => void
type Event_2 = EmitEvent<Emit, 'event-2'>; // (num: number) => void
type Event_3 = EmitEvent<Emit, 'event-3'>; // (bool: boolean) => void
// more events...
type Event_n = EmitEvent<Emit, 'event-n'>; // (str: string, num: number, bool: boolean) => void

What Now

For limited overloads length (for example 1 ~ 4), it can resolve with:

type EmitEvent<F, E> =
   F extends {
      (event: E, ...payload: infer P): infer R // match 'event n - 3'
      (...args: any): any
      (...args: any): any
      (...args: any): any
   } ? (...payload: P) => R
   : F extends {
      (event: E, ...payload: infer P): infer R // match 'event n - 2'
      (...args: any): any
      (...args: any): any
   } ? (...payload: P) => R
   : F extends {
      (event: E, ...payload: infer P): infer R // match 'event n - 1'
      (...args: any): any
   } ? (...payload: P) => R
   : F extends {
      (event: E, ...payload: infer P): infer R // match 'event n'
   } ? (...payload: P) => R
   : unknow /* or `(...payload: any[]) => any` whatever */; // match 'event n < n - 3'

(Note: Increasing the number of overloads in this way inferred time will increase exponentially, so it is not feasible to detect the number of overloads dynamically generating EmitEvent<F, E>.)

Some libraries have more than 10 events overloads, so this is still a problem to be solved.

References:

• microsoft/TypeScript#26591
• microsoft/TypeScript#37079 (comment)

User snippets for vue in vscode are not working

Add syntax highlight for self closing tags.

Hii, It's me again.
If it's possible can you add syntax highlighting for self-closing tags? I have attached an image for your reference.

Support for script syntactical sugar "setup"

I attempted to use the setup="props" shorthand with TS but it doesn't seem to work - is there a plan to support this while it is experimental?

Heres an example of what i'm attempting:

HelloWorld.vue

<script lang="ts" setup="props">
import { ref } from "vue"

declare const props: {
  msg: string
}

export const count = ref(0);
</script>

<template>
 <div>
    {{ count }}
    <button @click="count++">Add</button>
  </div>
</template>

App.vue
Import the HelloWorld component; the props aren't registered when hovering over the component in the template, prop completion and type checking aren't working, and missing a prop doesn't error highlight the component.

• Create vite app
• Add typescript pkg and vue shim
• Add volar shims
• Update files to use TS (index.html and .vue files' script tag)

BTW this is looking great so far, really good work! Thanks for your time 😄

I use `<script src=". /***.ts" lang="ts"></script>` cannot get the appropriate type hint

There is no problem if I copy the code from ts to the script tag.
But I would like to put the ts into a separate file is there a solution?

Stylus language support

I know this doesn't seem like an easy one, but maybe we could reference Vetur?

Script setup + eslint = unused vars

Is there any way to let eslint check whether the constants in a script tag with 'setup' sugar are being used in the template? I would prefer it to keep using the rule in my projects.

The following code triggers the '@typescript-eslint/no-unused-vars' eslint rule for the props and increment consts.

<template>
    <h1> {{ msg }} </h1>
    <p>
        Clicks {{ count }}
    </p>
    <p>
        <button @click="increment">
            Increment
        </button>
    </p>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';

const props = defineProps({
    msg: {
        type: String,
        required: true,
    }
});

const count = ref(0);

const increment = (): number => count.value++;
</script>

Volar can't see Type which is declared in "script setup"

When I use this volar say's "Couldn't find Tabs"

<script lang="ts" setup>
import { defineProps, PropType } from 'vue';
type Tabs = 'home' | 'album' | 'whatshot';
const props = defineProps({
   name: {
      type: String as () => PropType<Tabs>,
      required: true,
   },
});
</script>

incremental parser support

tree-sitter is a error tolerant and incremental parser, which is blazing fast for editor scenario, i took a glance at our codebase, which has using a lot of Regular Expression and hardcoding parsing, which is inefficient. I am pretty familiar with tree-sitter , and I am willing to integrate it with our project. However i am not familiar with our project , maybe you could write a more detailed infrastructure to me ?

Add support for inline event handling

Hi, first of all thanks for this plugin! It's almost been working flawlessly for my exploration with Vue.

I've encountered one issue; When handling an event in a parent component by using an arrow function, the parameter becomes of type unknown instead of the type that the child passes on to the parent. Any idea's if there is support for this?

In the following example, I would expect the Todo.vue component to be aware that the toDoItem is of type TodoItem.

repository can be found here: https://github.com/LukasCornille/vue-todo

I'm not sure if it's a replacement for Vetur, or..

Or kind of some "big brain" for that..
Please add some explanation and code demonstrations on README..

How can I disable volar to check style block?

I use tailwindcss and postcss and I don't want volar to check the style block. How can I config it ?

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      features: {
        'nesting-rules': true,
      },
    },
    tailwindcss: {},
    autoprefixer: {},
  },
}

Throws "Volar - API" errors on text completion

While editing a Vue file, the following messages are spammed in the console. As far as I can tell, this is only happening with Volar v0.21.7 and the latest version of VSCode v1.53.2.

As far as I'm aware, I didn't get this issue with VSCode v1.53.0. But as I didn't do any extensive testing with the different versions of VSCode, I'm not entirely sure.

The errors being spammed:

Type checking failed on files that contain `[]` in the path

First of all, awesome work on the extension! I am really impressed to see how good it works for <script setup> 👍.

I am trying to use Volar on Vitesse, found a weird bug.

Type checking failed on files that contain [] in the path.

While I renamed it out, everything works great.

[] is used in Vitesse to serve dynamic routes params.

Guess it's related to path convention. Would love to help if you can share some hints about where could it potentially happens.

Thanks.

Syntax highlight breaks when using directives/events without parameters

Examples:

Multiple <script> tags raised an error

<script lang="ts">
/* eslint-disable vue/no-v-html */
</script>
<template>
    <v-container fluid>
        <v-row
            algin="center"
            justify="center"
        >
            <v-col cols="10">
                <div v-highlight v-html="readme" /><!-- Cannot find name 'readme'. -->
            </v-col>
        </v-row>
    </v-container>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import readme from '../../README.md'
export default defineComponent({
    name: 'Readme',
    props: {},
    setup(props, ctx){
        return {
            readme,
        }
    },
})
</script>

Changing the order can solve the problem

<script lang="ts">
/* eslint-disable vue/no-v-html */
import { defineComponent } from '@vue/composition-api'
import readme from '../../README.md'
export default defineComponent({
    name: 'Readme',
    props: {},
    setup(props, ctx){
        return {
            readme,
        }
    },
})
</script>
<template>
    <v-container fluid>
        <v-row
            algin="center"
            justify="center"
        >
            <v-col cols="10">
                <div v-highlight v-html="readme" />
            </v-col>
        </v-row>
    </v-container>
</template>

export from script setup sugar showing error in editor.

Hii @johnsoncodehk ,

So recently while using volar in a project, I got an error saying Modifiers cannot appear here.ts(1184).

This came from the following code. Please have a look.

<script lang="ts" setup="props">
import { User } from '@/utils/models';
import { toRef } from 'vue';

declare const props: {
  list: Array<User>;
};

export const userList = toRef(props, 'list'); // the error is shown right on top of the export keyword
</script>

<template>
  <div class="chat-list">
    <div v-for="u in userList" :key="u.id">
      <span> {{ u.name }} </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat-list {
}
</style>

I'm actually not sure if it's a problem with volar or vue. Also this is not throwing any error in dev server or while rendering. Please have a look!

Incorrect Problem Reported with VeeValidate

Hi, made a test repo, thinking this was an issue with VeeValidate. But the error only appears in VS Code with Volar. Vetur does not indicate this problem, which leads me to think its a Volar issue.

https://github.com/JohnCampionJr/vee-validate-vue3-ts

Volar throws an error in the validation page, with the VeeValidate Form submit handler having more than one property.

Methods not found when using mapGetters

First I would like to say that I like this extension. It's working well!

In my code I'm using mapGetters to well.. map the getters from my Vuex store.
Unfortunately, this is not working with Volar. It says it can't find these methods.

A "solution" would be to not use the mapGetters of course, but to me that's not really an option.
Hope this can be fixed!

Debugging

I wanted to make sure I'm not missing something with Volar. I seem to not be able to add breakpoints or other debugging when Volar is enabled vs Vetur.

Is this expected?

ref type error

:ref="'music'" is ok

and Seems like miss the type file in node_modules while find something to import?

In Vue-class files, private property will report an error
Private keyword doesn't do anything, but a lot of people get used to writing it

It's nice to see that you're still maintaining the project, and it's now much faster than Vetur

Template validation fails with defineProps in JavaScript

So I got a fairly specific case where I get an error: Cannot find name 'X'., that only appear when I have a jsconfig.json in my Project and use defineProps in script setup.

I use the jsconfig for path aliases, these don't work with autocompletion in vetur so "can't" switch to that.

My jsconfig.json looks like this:

{
  "compilerOptions": {
    "checkJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

And a Vue component that throws the stated error looks like this:

<script setup>
  import { defineProps } from 'vue';

  const props = defineProps({});

  const NOOP = () => {};
</script>

<template>
  <button @click="NOOP">click me</button>
</template>

I just checked and it seems that the same error also appears with a tsonfig.json, which I did not use yet, since I currently only use plain JavaScript.

v-else is unexpected token

I just installed this extension, and I must say it's really well done! My only complaint is that v-else is not recognized when using Pug, as in the following image:

The issue is solved when doing v-else="", but that's far from ideal.

try to add some e2e-test

Aiming to make a production ready vue vscode-extension, It's necessary add some test, like vetur

Semantic highlighting not working in *.vue files

Let me first start by thanking you for such an amazing extension! It is amazing that you support semantic scopes in *.vue files. This is something that is really missing in other extensions such as Vetur or VueDX to make coding experience closer to what I get in WebStorm.

However, speaking of the semantic tokens, I have noticed that the semantic highlighting does not work in *.vue files despite semantic scopes clearly being visible when I use the scope inspector and even some additional semantic scopes being defined in the package.json file. I have the editor.semanticHighlighting.enabled property set to true in the VSCode settings.json file and semantic highlighting works without any problems in .ts files. Any idea what could be the issue here?

Please add a CHANGELOG file

Duplicate identifier "class"

First off, i'm blown away by your work. Volar is very fast on a big Typescript project. I always had infuriating performance issues with Vetur.

Volar throws error when using valid vue code and v-bind

<span class="font-semibold" :class="{ 'text-text10': anime.isActivated }">Désactiver</span>

Workaround for now:

<span :class="['font-semibold',{ 'text-text10': anime.isActivated }]">Désactiver</span>

Volar gives type error on objects for style attribute

const style = ref({
   'font-size': '25px',
   transform: 'scale(1.8)',
});

<a
         :style="style"
         :href="href"
         >to link</a
      >

When i try to bind a javascript object to style attribute it works but volar thinks not.

Can this be used side by side with Vetur?

Can this be used side by side with Vetur?

Typing setup props interferes with type inference

I have this simplified component. With version v0.20.8, Volar doesn't know the type of value in my template.

<template>
  <div class="component">
    {{ value }}
  </div>
</template>

<script lang="ts">
export default {
  props: {
    foo: {
      type: String,
      required: true,
    },
  },

  setup(props: { foo: string }) {
    return {
      value: 0,
    };
  },
};
</script>

However, if I remove the type annotation from props and change that line to setup(props) {, Volar suddenly knows that value is a number, and the red error lines in VS Code go away. Removing the props: { ... } definition (by renaming it to _props, for example) also gets rid of the errors. Using destructuring syntax without a type annotation and replacing the setup line to setup({ foo }) { also gives errors.

This is an amazing and tremendously helpful extension! 🎉 Keep up the great work!

ref intellisense enchancement

please check vuejs/vetur#2605 ，I think this is quite useful and worth to integrate in volar, the cost may be much cheeper than vetur... vetur is too big to add a new feature...

Can we do that ?

standalone LSP support?

hey, thanks for volar it's very nice

Is it possible to run volar as a standalone LSP server? (for use with eg. vim/emacs/sublimetext LSP clients)
I image the functionality would be not 100% complete with the VS code plugin but just wondering if it's possible?

thanks!

SASS language support

When declaring a <style lang="sass"> block, the brace-less SASS syntax doesn't seem to be properly recognized:

Couldn't start client Volar - Document

Hii,
This is a great project. Vue 3 is good with Ts but it could be better. I installed this extension but it throws some errors.

• Couldn't start client Volar - Document
• A request has failed. See the output for more information.
• Request initialize failed with message: host.useCaseSensitiveFileNames is not a function

Hope you'll look into these errors. Thank you.

Nuxt and volar

Volar does not work with a generated nuxt project with typescript and composition api support using nuxt modules.

Getting ts(2304) error in the template.

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'

export const count = ref(0)
export const inc = () => count.value++
</script>

Might have something to do with #37 because the project is using yarn.

Does not work well if dependencies are installed with pnpm

Hi, I've tried installing the dependencies on vite-starter-ref-sugar with yarn, and the extension works perfectly. But when the dependencies are installed with pnpm, Volar will think all variables used in the template don't exist.

It happens no matter if setup is used or not. I am using Windows 10.

With setup	Without setup

(So either way, it doesn't work)

pnpm is pretty cool, but it installs packages a bit differently.

It uses a lot of symlinks (junctions on Windows actually) to create a global package storage, so that every package only exists on the disk once. It also creates a non-flat node_modules structure, that prevents your code from requiring a package you don't depend on.

And it is probably one of those things that causes a compatibility issue with Volar.

pnpm is normally 100% compatible with Node.js and package bundlers. Even if it creates a different structure from npm, it is completely compliant. Voltar probably makes an assumption at some point about the structure of the node_modules folder that makes it unable to work with it... Or maybe it dislikes symlinks for some reason.

I've found a workaround: Installing @vue/runtime-dom directly, as suggested for Vue 2, makes Volar work as expected. Although I am on Vue 3 so that wouldn't normally be required

defineProps in pure type syntax not working

Hi, I recently tried out the new <script setup> syntax in Typescript and found out that things start to get a bit wonky when I tried to use defineProps() in pure type syntax. For example, from my system, Volar fails to recognize the following props definition:

<script lang="ts" setup>
const props = defineProps<{
  valid: Ref<boolean>;
  save: () => void;
  reset: () => void;
}>();
</script>

It's kinda hard to describe in words, here is how it looks on my project:

Volar underlined two @click definitions because it couldn't recognize the save() and reset() function in defineProps(). And somehow, after that fails, Volar also fails to recognize the msg() function as well.

bug report

I often get this error, even without writing any code.
It has occasionally appeared in previous and the latest version.

Volar-API
Request textDocument/codeLens failed.
Message: Request textDocument/codeLens failed with message: Invalid count value
Code: -32603

Renaming (F2 Refactor) within the Vue model throws an error

After the 1.20 update, renaming (F2 Rename Symbol) inside a Vue file causes the following error to occur:

This bug is limited specifically to inside the Vue file script tags. Renaming inside the template view works fine. For some reason it only breaks when renaming inside the script tags. Another odd caveat, is if I rename immediately after loading into VSCode, it works just fine, but if I edit anything inside the template or other Vue files, it breaks randomly.

I noticed this is only an issue with the 1.20+ versions.

Format everything with prettier

I'm trying to use Prettier as formatter for every block, how do I do that? I tried workspaceExtensions but didn't work for the <template> block.

Vue 2 autoimport *.vue components doesn't work

Recently in some of previous volar versions this feature used to work

Typo in repo "about"

"Acurrate" should be "accurate"

Add support of PropType checking in Vue 2

Thank you for very useful extension, it helps me a lot.
And it would be more helpful if you add PropType checking like when project uses vue 3.
Currently this feature doesn't support vue 2 projects :(

Support stylelint.

I don't know if I'm doing it the wrong way, but I've disabled css validation in the workspace settings. How should I switch the default css validation to stylelint?

semanticTokenScopes support please

Semantic highlight is necessary

Truncates React elements

Below is a valid React 404.tsx file. Volar complains of unreachable code. After making a trivial change, e.g. add an extra blank line. When saving, VScode running Volar truncates half the return() expression, including the </p> closing tag, turning it into illegal syntax.

import React, { ReactElement } from "react";

export default function FourOhFourPage(): ReactElement {
  return <p>Hey - That page doesn't exist!!</p>;
}

`<PascalCase>` component should get highlighted like JSX/TSX when embedding other tags

vuejs/vetur#2146 (comment)

Pug class literal support

Hello, first of all I'm using this extension for about 3 weeks and feels really nice!

I found this strange behavior when using CSS classes on pug elements, basically in some scenarios the fact of using a CSS class on any element between a variable declaration with v-for makes the variable to no longer be recognized.

The first reference of lang variable throws no error when the first span has no classes.

The first reference of lang variable throws no error when is used in the first element that has classes afer the v-for declaration.

when there is no classes at all it works as expected.

Thanks in advance.

Cannot resolve vue file in ts file when extending tsconfig.json

Reproduce:

• Extend any config in tsconfig.json
• Reload vscode if error doesn't appear

Repo:

https://github.com/pynnl/volar-extend-tsconfig

Use case:

I'd like to use google style in my project.

P/S: Thank you for the great extension.