var vetur = vscode + vue;

// @octref <Pine Wu>

 Pine Wu
@octref

Intern / SDE @ VSCode

Vetur?
Vue tooling for VSCode.

- 190k download (100% )

- 600+ on GitHub
- @MSBuild with Microsoft / TypeScript-Vue-Starter
- Recommended by VSCode and TypeScript team
Why?
- Mostly only Syntax Highlight
- Sparse support on Atom / Sublime
- Multiple extensions
- Varying quality
- HTML mode not enough
We want an extension that...
- Works with as many languages as possible
- Packs everything
- Syntax Highlight / Linting / Error Checking / Formatting
- Emmet / Snippet
But also more...
Vetur
Vetur
- Syntax-highlighting
- Snippet
- Emmet
- Linting / Error Checking
- Formatting
- Auto Completion
- Hover Info
Vetur For
- Syntax-highlighting - html / pug
- Snippet - css / scss / less
- Emmet - sass / stylus / postcss
- Linting / Error Checking - js / ts / coffee
- Formatting
- Auto Completion
- Hover Info
Vetur For
- Syntax-highlighting - html / pug
- Snippet - css / scss / less
- Emmet - sass / stylus / postcss
- Linting / Error Checking - js / ts / coffee
- Formatting
- Auto Completion
- Hover Info
Syntax Highlight
- Reworked vuejs / vue-syntax-highlight
- Fixed many subtle bugs
- Divide vue file into regions
Snippet / Emmet
- Snippet
- For each language
- Emmet
- Any <template> / <style>
Snippet / Emmet
- Snippet
- For each language
- Emmet
- Any <template> / <style>
- Emmet 2.0
Emmet 2.0
Emmet 2.0

Available in VSCode July release

Linting / Error Checking
ESLint
Autofix
// @ts-check
// @ts-check
Formatting
- js-beautify for <template> / <style>
- TypeScript formatter for <script>
Formatting
- js-beautify for <template> / <style>
- TypeScript formatter for <script>

- prettier soon
Auto Completion
- For html / css / scss / less / js / ts
- Let's take a look!
Auto Completion
Auto Completion
Auto Completion

Auto Completion
DEMO
How?
1. Embedded Language Server Architecture
2. Language Server Protocol
3. TypeScript
3.1. Language Server
3.2. Vue Types / Contextual Typing
1. Embedded Language Service

Language Server Language Region

vue-html html

css css / scss / less

TypeScript js / ts
An Everyday Conversation
VSCode Here is a Vue file.

OK, it has 3 regions. Vetur

html / js / css Language Servers, take care of them.
According to ESLint, the user is writing sloppy code. js LS
Hey VSCode, warn user on line 8, column 10. Vetur

VSCode Sure. I'll display a red squiggle there.

An Everyday Conversation
VSCode The user wants to format the Vue file.

html / js / css Language Servers, do a format! Vetur

I did my part. html LS
So did I. css LS
Done. js LS
[Putting regions together] Here is the formatted file . Vetur

VSCode I'll replace the current vue file with it.

2. Language Server Protocol
- A protocol like HTTP
- Provides a way for a "Language Server" to control IDE features
How did this work?
A Technical Conversation
VSCode textDocument/didOpen: textDocument
textDocument/didChange: textDocument

textDocument/publishDiagnostics Vetur
{ uri: "~/project/Test.vue",
position: { row: 8, column: 10} }
3.1 TypeScript Language Server
- Auto completion / error checking / hover info...
- Works with JS too!
3.2 Vue Types / Contextual Typing
- Typing `this` based on context
3.2 Vue Types / Contextual Typing
3.2 Vue Types / Contextual Typing
Future?
Embedded Language Server + Language Server Protocol
Future?
Embedded Language Server + Language Server Protocol

Easily extensible
For adding support for new language / feature
 eslint-plugin-vue
- Check against <template>
- Error / Style / Best-Practice
- In Vetur / LSP term, `doValidation`
 eslint-plugin-vue
Anyone could have made such mistakes
Future
 Vetur
Future
0.8
The Real Future
- Vue Language Server for any editor
The Real Future
- Vue Language Server for any editor
The Real Future
- <template>
- auto completion based on Vue object
- props type check
- prettier
- postcss + stylelint
The Real Future
- Extend Language Server Capabilities
- Jump to definition
- Find all references (vuex actions?)
Why?
Status quo
Proun
- Seamless transition
- All the features you've seen
Proun
Proun

LET PEOPLE USE JQUERY

Proun

LET PEOPLE USE JQUERY

Or d3 / three / lodash...anything people want
Proun

LET PEOPLE USE JQUERY

Or d3 / three / lodash...anything people want
With types / auto completion
With directives / lifecycles
Proun
Debuggable
Thanks!