vetur 1.0
octref opened this issue · comments
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 #610 -
symbolProvider
forCmd+Shift+O
to show symbols #218
-
- Debug Vue apps with sourcemap. #201
- Selectable linter / formatter for each region. User should be able to select prettier, stylelint, stylefmt, tslint, etc. #170 and #190.
- vls: vetur should make the Language Server easily consumable by other Language Client. #168
Important Features
- Better html/css experience. #130
- Extract js/ts info to enhance html IntelliSense. #145.
- Support for JSX. #49.
- Full support for TS. #103, #159, #170.
This is a live document that would be constantly updated.
Leave feedback on what you'd like to see on 1.0.
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.
@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.
looking forward to Support for Stylus intelliSense
@frankdugan3 yeah, prettier would be a nice addition.
@Baoyx007 stylus support is added with #227 thanks to @HerringtonDarkholme!
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
It's already an issue lobosan. #380
Oh excellent @johnleider and sorry I didn't mean to duplicate an issue hehe..
I am sure everyone whom it may concern and their grandmother already knows, but:
Prettier supports JSX now.
@transtone I don't fix js-beautify bugs.
@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?
@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.
@HerringtonDarkholme I'll have a try.
=============
Thanks for fixed it in vetur-0.11.3.
but comment in <style>
still have the reindent bug.
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.
Hey, guys, is there jump to definition working?
stylelint will be great.
when this version planed to release?
Jump to definition for class/id doesn't seem to be working in SFCs. Is it just me ?
Being able to edit scaffolds would be amazing
@octref Can you please update us about the important new features?
when is this plugin able to reformat HTML inside .vue file?
@serak , it can already do that. Also took me weeks before figuring that out by scavenging github issues. Here you go : by Nemesarial
@MrSunshyne Or you can find it easily in the documentation...https://vuejs.github.io/vetur/formatting.html
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
@ZSkycat you never know you can do this?
<script lang="ts" src="./foo.ts"></script>
<style src="./foo.css"></style>
@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 支持中提及使用这种方法来提升开发体验?
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.
@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
@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.