Vetur 1.0 Roadmap #873
Description
Synopsis
A lot of work lies ahead to get Vetur to 1.0. This roadmap exists to:
- Give a big picture as to what's left.
- Inform the complexity of the remaining issues.
- Inform the prioritization of features/bug-fixes.
- Guide you to the correct issues to follow up.
This issue is a live document updated frequently.
This issue supersedes #188.
Signage
- 🌟 Current focus.
- 🏃♂️ In progress.
- 🚨 Upstream issue or support needed.
- ☑️: Features implemented.
Discussion in This Issue
Please make the discussion stay high-level.
Good Discussion: 👍
- I think this feature area is missing, and it's important because...
- If you have xxx, it would make it much easier for people to contribute...
Bad Discussion: 👎
- When can you support pug formatting? (Complain in individual issues).
- How do I configure Vetur to do xxx? (Open new issues for questions).
Features
Here is how Vetur looks like from each feature area. In each section, I describe:
- Current state
- What's missing
- Complexity of the features
This section provides a high-level overview and omits smaller bugs.
Vote for areas that you want more support:
🌟 Smart Editing in Template Interpolations
In Vue file's <template> region, you can use interpolations. For example, in this snippet:
<div v-if="this.foo">{{ this.bar }}</div>both this.foo and this.bar are template interpolations. Currently, Vetur has no smart editing support for them, including:
- 🌟 🏃♂️ Diagnostics / Type-Checking. Type checking for template expressions #681 and Type checking for template expressions #209.
- 🌟 Autocompletion
- Hover information
- Jump to definition
- Find References
- Rename Symbol
Full support for interpolations requires a new dedicated Language Service. Some ground-work (#802, #800, #786) was done to make this Language Service testable, maintainable and able to serve as the basis for implementing all language features.
Complexity lies in
- Vue's interpolation could include filter which is not standard JavaScript.
- Properties on
thisare bound to global scope. For example, instead of<div v-if="this.foo">, you can do<div v-if="foo">.
Multi-root and Sub-folder support
Currently, Vetur provides no multi-root support. Also, if your Vue project is not on the top-level, Vetur will not activate. The current plan is to make Vetur activate on each folder of a multi-root setup, if a folder contains a package.json. Instead of supporting sub-folders such as /client/, we'll advise people to open both / and /client so Vetur could work on the subfolder.
JSX Support
We have no support for JSX yet. This should be implemented as a TypeScript plugin, same as lit-html.
Issues:
- 🚨 Syntax Highlighting for JSX. Add template literal (jsx) support #49. Blocked by When A grammar injects to B, grammars embedding B should get A's injection microsoft/vscode#44056.
- Emmet in JSX. Emmet in .vue files using jsx? [enhancement] #693.
TypeScript Plugin Support
TS Plugin allows us to take control of editing experience for JS/TS files. This is required for rename support, so that you can run renaming on a JS file and see all <script> regions in Vue files getting updated.
Vetur would need to setup a TS Plugin and bi-directional communication between Vue-Language-Server and it. There's a lot of uncertainty and complexity involved.
This could also lift the limitation that you need to add .vue suffix when importing Vue files from JS/TS.
Upstream TypeScript features
A lot of new TS smart-editing features have come to VS Code. Some of them benefit Vetur directly, others would need manual integration:
- Auto-import in
<script>region. Auto-import component in <script> when using component in template/javascript #684. - Organize import. Automatic Import Organisation not working #843.
- Refactor support. Refactor support for Vetur #871.
- Update import path when moving file. Feature Request: Update import paths when a file is moved/renamed #820
In addition to bringing these features to Vetur's support for <script> region, we can also think about what more we can do in the context of .vue files. For example, refactor support for <template> that would extract a sub-tree into a new component.
Integration with other tools
Vetur already has integration with emmet | prettier | prettier-eslint | eslint-plugin-vue, and framework integration with many Vue-based frameworks. Issues for those are tracked in integration:<tool> labels.
What's missing are:
- TSLint integration. Linting support for typescript #170.
- Use locally installed dependencies for
prettier. Opt to use locally installed version of Prettier if available #523. - Prettier as template formatter. Prettier as an option for template formatting #950.
Hopefully, we can also reach a spec for describing Vue components (similar to dts files) that would make it easy to:
- Generate definition files from .vue source files.
- Read from those definition files in Vetur for various smart-editing features.
Related: vuejs/vue#7186
Stability / Performance
Vetur has been stable and performant enough for most people to use daily. However, there are a few perf-related issues we need to fix:
- Vetur Intellisense slow and incomplete if project has jsconfig. Vetur Intellisense slow and incomplete if project has jsconfig #547.
Missing Tooling Libraries
Vetur brings in many tooling libraries and try to make them working harmoniously in .vue files, such as vscode-css-languageservice, prettier and language-stylus. However, we don't have the following tooling libraries:
- A good HTML formatter: prettyhtml by @StarpTech ~~~(Prettier is working on it ([WIP] feat: html support prettier/prettier#4753), but I guess it wouldn't directly apply to .vue files, especially for interpolations).~~~ Related: prettier for Vue #491, New html formatter #561.
- Pug Language Service.
- Sass Language Service.
- PostCSS Language Service (mostly covered by
vscode-css-languageservice, but newer features in CSS aren't covered).
I wouldn't have time to work on any of these as of now, so features in this areas are blocked.
Contribution
This is a daunting todo list. I would very much love contributions!
There are many ways you could contribute. Two major ways:
- Contribute to building one of the "Missing Tooling Libraries" above. For example, New html formatter #561.
- Contribute to Vetur itself. This would be complicated if you've never done any Language Server development now. I plan to make that easier by:
If you do want to take major features, please open issue to discuss about it early. Otherwise, you might do a lot of unnecessary work by going to the wrong direction.