[vue] Introduce proper support for Vue Single File Components (SFC)#3563
[vue] Introduce proper support for Vue Single File Components (SFC)#3563vjeux merged 1 commit intoprettier:masterfrom
Conversation
|
Don’t forget the README and the website :) |
|
Cc @octref who did a lot of work on Vetur, the vs code plugin which already uses prettier for css and js: https://github.com/vuejs/vetur |
| </template> | ||
| <template > | ||
| <h1 >{{greeting}} world</h1 > | ||
| <script>kikoo ( ) </script> |
There was a problem hiding this comment.
Why not format non-toplevel scripts? What's the concern?
There was a problem hiding this comment.
I don’t want to add a lot of heuristics to figure out the correct indentation level
There's a lot of demand for vue sfc (prettier#2097). This introduces partial support for them: all the html is printed as is, except for the script and style tags which are printed using prettier. I believe that this should cover a lot of the use cases while being simple to support and if we want we can extend to more in the future. I copy pasted the html parser used by vue (it's just a single 400 lines file) so that we don't run the chancesof conflicts. I'm also very conservative: I only print the style and script at the top level and for the lang attributes we support. I expect this to be landable as is and provide value, review welcome :)
|
Oops, looks like I broke the build! Sorry about that. It’ll be a day before I can fix it. Feel free to revert in the meantime. |
| :class="{ 'issue-realtime-pre-pulse': preAnimation, | ||
| 'issue-realtime-trigger-pulse': pulseAnimation}" | ||
| v-html="titleHtml" | ||
| > |
There was a problem hiding this comment.
I wouldn't say this is the preferred way to write Vue interpolations.
There was a problem hiding this comment.
We started working on a full html pretty printer and added this vue file as an example. But it’s far from being usable so instead this PR just prints the html part as is and only reformats the js and css pieces.
|
@vjeux Thanks a lot for your hard work. It would be great to see prettier officially supporting Vue! Meanwhile, I think cases such as <template lang="jade">
div
h1 Hello
</template>I think you might want to output some error message for Vue that has non-supported sections. Same for stylus, sass, coffee. |
|
What I went for is to just reprint as is things that prettier doesn’t support. So you don’t have the nice formatting but at least it doesn’t throw on you. This way you can just run prettier all the time and it will work when it can and do nothing when it can’t. The downside is that it makes troubleshooting harder but should help with adoption. Thanks for looking at it! |
|
@vjeux Any date for the 1.10 milestone release? Excited for this :) Update: Got the date here -> #3603 (comment). Its expected for 10th January! |
lock
bot
added
the
locked-due-to-inactivity
8 participants
There's a lot of demand for vue sfc (#2097). This introduces partial support for them: all the html is printed as is, except for the script and style tags which are printed using prettier. I believe that this should cover a lot of the use cases while being simple to support and if we want we can extend to more in the future.
I copy pasted the html parser used by vue (it's just a single 400 lines file) so that we don't run the chancesof conflicts. I'm also very conservative: I only print the style and script at the top level and for the lang attributes we support.
I expect this to be landable as is and provide value, review welcome :)