@andoshin11/vue-ts-plugin

A TypeScript native plugin to run type-check on Vue SFC(Single File Component).

This libary takes a fundamentally different approach from vetur. Please refer to the Architecture section to see the detail.

:warning: Disclaimer

This is an experimental project and has very limited number of features. Before you try it on any production level products, be sure to know what it does since it's highly likely to cause performance issues.

I strongly reccomend not to use it on production unless you have deep knowledge of TypeScript Server.

Technical Limitations Due to the API compatibilities, this plugin is only expected to work with certain versions of depending libraries. Make sure to have thses versions set up to have full functionality of itself.

• [email protected]
• [email protected]

Whas it TypeScript Plugin?

Read this page.

Basically, it is a feature that developers can use to bring TypeScript's DX to other ecosystem & languages. Here's the quote from TS official wiki.

TypeScript Language Service Plugins ("plugins") are for changing the editing experience only. The core TypeScript language remains the same. Plugins can't add new language features such as new syntax or different typechecking behavior, and plugins aren't loaded during normal commandline typechecking or emitting.

:rocket: Getting Started

• Set up a Vue project. Vue CLI is recommended for this process.
• $ yarn add -D @andoshin11/vue-ts-plugin
• Open VSCode and change the configurations
  • Disable vetur
  • Set typescript.tsserver.pluginPaths as ["./node_modules"]
  • Set files.associations as { "*.vue": "typescript" }
• Add Plugin info to tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    ...
    "plugins": [
      {
        "name":  "@andoshin11/vue-ts-plugin"
      }
    ]
  }
}

• Reload VSCode
• Open a .vue file to see the result

Architecture

This plugin is heavily relying on vue-type-audit, which is a side-project of mine.

All the heavy lifting, like file compilation, virtual file management, sourcemap recovery, and diagnostics formatting are done by vue-type-audit. This libary mainly focus on TS Server bridging so that the core functionality of type analyzation for Vue files could remain portable and maintainable.