vetur 1.0

[octref]

It's time to look at 1.0 for vetur.
Planning to ship mid June before VueConf.
I don't think all these features can be implemented before VueConf, and I'm giving higher prioritization to fix existing issues, especially with Vue language server's crash which can be annoying.
1.0 is probably gonna happen sometime later during summer.

Grand Picture

• Stable. vetur should be a stable daily driver for most people, having most features working as expected in various setup.
• Doc. vetur should have good doc for setting up & enabling features.
• Extend Language Server Capabilities. Current plan is to have:
  • completionProvider for IntelliSense
  • documentRangeFormattingProvider for formatting
  • hoverProvider for showing type info, API info, etc
  • definitionProvider for F12 jump to definition
  • referenceProvider for Shift+F12 show all references
  • renameProvider for F2 to global rename Feature: Add rename symbol support #610
  • symbolProvider for Cmd+Shift+O to show symbols Show quick outline in vue component file #218
• Debug Vue apps with sourcemap. Debug Vue apps with sourcemap #201
• Selectable linter / formatter for each region. User should be able to select prettier, stylelint, stylefmt, tslint, etc. Linting support for typescript #170 and Bring in stylelint and stylefmt for style #190.
• vls: vetur should make the Language Server easily consumable by other Language Client. [Suggestion]: separate vetur server to a standalone package #168

Important Features

• Better html/css experience. Complete ids / class names in HTML/CSS/Less/SCSS #130
• Extract js/ts info to enhance html IntelliSense. Extract props / data / methods info from Component to power template IntelliSense #145.
• Support for JSX. Add template literal (jsx) support #49.
• Full support for TS. Support vuejs/vue-class-component #103, TypeScript global declarations handled inconsistently with actual build #159, Linting support for typescript #170.

---

This is a live document that would be constantly updated.

Leave feedback on what you'd like to see on 1.0.

[frankdugan3]

I don't know if this should be 1.0 or in subsequent, but one feature I would really like to see is prettier as the JS formatter.

Perhaps what would make sense to keep configuration simple is that rather than exposing options for the formatting, the user would specify which formatter (js-beautify, xo, prettier, etc.), and Vetur would simply use the existing settings (user/workspace) for that formatter. I would think in most use cases, the user would want the same JS rules for .vue files as with their .js files.

[octref]

@frankdugan3
First, current JS formatting is handled by TypeScript, not js-beautify.
That being said I've been thinking about integrating prettier, but one concern is Vue supports JSX now and I'm not sure if it would work well with prettier (it should since React also uses JSX).

The first step is making linter / formatter for <style> selectable, as in #190.

[Baoyx007]

looking forward to Support for Stylus intelliSense

[chanlito]

@frankdugan3 yeah, prettier would be a nice addition.

[octref]

@Baoyx007 stylus support is added with #227 thanks to @HerringtonDarkholme!

[lobosan]

Hi, thanks for this wonderful extension. Could you please consider adding IntelliSense for Vuetify?

I think this framework is pretty awesome and has such a great community. I'm sure that if you get in touch with @johnleider and @nekosaur they will be more than happy to collaborate with you.

All the best

[johnleider]

It's already an issue lobosan. #380

[lobosan]

Oh excellent @johnleider and sorry I didn't mean to duplicate an issue hehe..

[qm3ster]

I am sure everyone whom it may concern and their grandmother already knows, but:
Prettier supports JSX now.

[transtone]

#488
please get this bug done.

=================
fixed in vetur-0.11.3

[octref]

@transtone I don't fix js-beautify bugs.

[transtone]

@octref It's not a js-beautify bug, It's vetur's bug.
vscode's html(use js-beautify too) do not have this bug.
are you guys never use multi line comment in template?

[HerringtonDarkholme]

@transtone Vetur has quite a lot template preprocessing. I don't think the bug can be easily fixed, or it might be inherently caused by incompatibility between js-beautify and vetur.

If you want get feature done, please send us a pull request.

[transtone]

@HerringtonDarkholme I'll have a try.

=============
Thanks for fixed it in vetur-0.11.3.
but comment in <style> still have the reindent bug.

[kuechlerm]

Love this extension so far (0.11.5), but #355 seems to be a critical blocker. Any changes in the imports are not automatically reflected in .vue files.

[satanworker]

Hey, guys, is there jump to definition working?

[Airkro]

stylelint will be great.

[M6stafa]

when this version planed to release?

[MrSunshyne]

Jump to definition for class/id doesn't seem to be working in SFCs. Is it just me ?

[mobilehobo]

Being able to edit scaffolds would be amazing

[eladcandroid]

@octref Can you please update us about the important new features?

[serak]

when is this plugin able to reformat HTML inside .vue file?

[MrSunshyne]

@serak , it can already do that. Also took me weeks before figuring that out by scavenging github issues. Here you go : by Nemesarial

[octref]

@MrSunshyne Or you can find it easily in the documentation...https://vuejs.github.io/vetur/formatting.html

[ZSkycat]

I think vetur should make the enhanced html development experience a top priority.
For example, extracting typescript language service type information is used in html attributes.

Style can use an external file, or use @import to implement scoped style
Script can use a separate .ts or .js file and then use import

Especially for ts, using a separate .ts for a better development experience and the ability to follow the officially available features of typescript

• rename
• updateImportsOnFileMove
• #region collapse code

I have now decided to change the script code in all .vue files to a separate file.
advantage:

• Get complete refactoring
• The .vue file does not have too many lines of code

After splitting the vue single file, we can get a lot of features support for editors and extensions.

I hope that vue officials can seriously consider this issue.

---

example:

great extension but not support Vue:
https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

---

我认为 vetur 应该把增强 html 开发体验作为首要任务。
比如提取 typescript 语言服务类型信息用在 html 属性上等。

style 可以使用外部文件，或者使用 @import 实现 scoped style
script 可以使用独立的 .ts 或 .js 文件，再通过 import 使用

特别是对于 ts 来说，使用独立的 .ts 可以获得更好的开发体验，并且可以及时跟随 typescript 官方提供的功能

• 重命名
• 自动修正 import 路径
• #region 折叠代码

目前我已经决定将所有 .vue 文件中的 script 代码改成单独文件
优点：

• 获得完善的重构功能
• .vue 文件的代码行数不会太多

将 vue 单文件拆分后，我们可以获得编辑器和扩展的许多功能支持

希望 vue 官方人员可以认真考虑一下这个问题。
@yyx990803

[chanlito]

@ZSkycat I think, you're describing Angular. I use Vue because of the SFC.

[ZSkycat]

@chanlito vue.js is the progressive framework. Not the SFC framework

[yyx990803]

@ZSkycat you never know you can do this?

<script lang="ts" src="./foo.ts"></script>
<style src="./foo.css"></style>

[ZSkycat]

@yyx990803 Sorry, I really don't know. Thanks for telling me.

I just found these
https://cn.vuejs.org/v2/guide/single-file-components.html#%E6%80%8E%E4%B9%88%E7%9C%8B%E5%BE%85%E5%85%B3%E6%B3%A8%E7%82%B9%E5%88%86%E7%A6%BB%EF%BC%9F
https://vue-loader.vuejs.org/spec.html#intro

---

尤大，我想大多数使用者也并不知道 .vue 可以这么使用的，而认为是 SFC.
目前的情况是，在 .vue 中编写 ts 和在 .ts 中编写 ts，开发体验的差距已经很大了
是否应该在 vue 官方文档 中的 typescript 支持中提及使用这种方法来提升开发体验？

[octref]

Especially for ts, using a separate .ts for a better development experience and the ability to follow the officially available features of typescript
rename
updateImportsOnFileMove
#region collapse code

The last two features come relatively new to LSP and I have not adopted it yet.
For F2 to rename — I'll look into it.

[octref]

New roadmap at #873.

[gitpushdev]

@yyx990803 I do it the other way around as in <template src="">
and keep script and style in the .vue file. Is it wrong?
I only do that for the support I get from VS Code for my HTML code when having it in a separate file

[octref]

@gitpushdev Please don't ping Evan for every question you have. There is a Discord channel for these questions.
What you are doing is not wrong.