No language support for vue

v6
1

Hi.
I’ve searched and couldn’t find language support for vue (meaning .vue extended files), not in legacy modes and not in any community package, even though codemirror 5 had a vue mode.

2

I realize this may be missing the whole question part, so I’ll try and focus it:
is there a way to have syntax highlighting and the like for vue code? (my understanding of having language support)
If not, what is the reason? and will it be possible in the future?

thanks,
confused dev trying to migrate existing codebase from CM5 TO CM6 :slight_smile:

1 Like
3

Someone will have to write a Vue language mode for 6 before this works. Though single-language modes from 5.x are rather simple to port to version 6, mixed-language ones like Vue need more attention. If you want to try and tackle this, see the language related examples on the website.

4

The vue sfc (single-file component) playground currently uses CodeMirror 5. I am thinking of porting it to CodeMirror 6. I’ve cut my teeth on the Markdown mode in CodeMirror 6 so it might be a good project for me, though I get the impression the multi-language mode in Markdown is a bit of a special case because the fenced code blocks make it really simple to parse.

1 Like
5

Vue syntax, as far as I am aware, is a lot less messy than Markdown, so I think this shouldn’t be too complicated. The mixed-language example should be pretty close to what you need to do in this case, I expect.

6

I looked at the CodeMirror 5 mode and it isn’t much. :slight_smile: As can be seen by the Vue SFC Playground where the text inside the curly brackets looks just like the text outside of them. It uses CodeMirror 5.

I’m not using Sass so HTML is probably just as good as the Vue 5 CodeMirror mode.

I agree that a vue mode is needed (by people interested in Vue, obviously) and think the attributes and curly bracket expressions are somewhat analogous to format strings in Python (f"hello {name}") so I’m poking around there: python/python.grammar at main · lezer-parser/python · GitHub

Of course, it’s up to the Vue community to provide this, and I think vue templates look pretty good without highlighting of expressions most of the time, which is probably why the vue codemirror 5 is so simple.

1 Like