volar v0.0.2

Volar

Faster and more acurrate TypeScript support of Vue 3

https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

Status: Preview

It is still in the stage of rapid prototype implementation, source code will be uploaded after reconstruction.

Why not Vetur?

My motivation for building this tool is that Vetur's Type-Checking is too slow (it has been improved now). I hope to get an experience similar to coding native ts when coding vue. It is more realistic to abandon the technical debt of Vue2 and rewrite it than to participate in the reconstruction of Vetur.

Thanks to Vue3's ref and computed (Yes, I use Composition API to write Vue Language Service!), the current development experience is quite close to coding native ts. And I added All the TypeScript features I need.

This tool will not replace Vetur. This tool only focuses on Vue3+TypeScript and only supports major languages (no sass, vue2...etc), so if Vetur is good for you now, just continue to use Vetur .

Features other than Vetur (until v0.26)

• Multi root support
• Template interpolation formatting
• Template component element LS support
• Template component props LS support (v0.5 added)
• HTML + Pug interpolation LS support
• Css module class LS support
• Asset url link jump
• Pug convert tool

LS support mean all this features has been support:

• Find References
• Find Definition
• Rename Symbol
• Formatting
• Type-Checking & Diagnostics
• Autocompletion
• Hover information

Template component element LS support

Local and Built-in component Type-Checking is default active.

For Global component, you need to definition __VLS_GlobalComponents interface, for example:

import { RouterLink, RouterView } from 'vue-router';

declare module 'vue' {
  interface __VLS_GlobalComponents {
      'RouterLink': typeof RouterLink;
      'RouterView': typeof RouterView;
  }
}

Note

To avoid performance impact, you need to disable Vetur when enabling this tool.

Syntax highlighting is power by vue-syntax-highlight

If rename location include both .ts and .vue files. Please perform the rename operation in the .vue file, otherwise the rename location in the .vue cannot be found correctly.

Click <template> tag to use pug convert tool. This tool will move to a single extension. So will can work with Vetur.

Currently support languages:

• template: html, pug
• script: ts, tsx
• style: css, scss

TODO

• Open source
• HTML code comment
• Css color preview
• Unused component properties hint
• Css module class support of import assets
• JS lang support