Feature request: highlight <i18n> blocks with JSON syntax

[HermannBjorgvin]

Hello. I have a simple (hopefully) feature request for us that are using vue-i18n-loader.

The vue-i18n-loader adds blocks for single file components. This is very handy and allows you to have locally scoped translations.

I hope my request is simple to implement, not many people are using this loader but the vue-i18n is very widely used and having highlighting inside these blocks would be helpful.

Here is an example of what a block looks like inside a component. The syntax is always JSON.

<i18n>
{
  "en": {
    "homePage": "Home",
    "profilePage": "Profile"
  },
  "is": {
    "homePage": "Heim",
    "profilePage": "Mínar síður"
  }
}
</i18n>

I'd be all up for helping with this issue if someone could point me in the right direction :)

EDIT: @adriangoransson has pointed out that the syntax can also be YAML

[skyronic]

Hello @HermannBjorgvin

It should be easy enough to add this. The issue I see is that this isn't part of the vue component spec, which we strongly adhere to. Nor is it an official plugin.

But it seems to be a rather popular plugin (24k downloads a week) and the author seems to be a long-time friend of vue.

@yyx990803 can you take a call on whether we can add a custom syntax for popular extensions who leverage single file components?

[adriangoransson]

Just stumbled upon this and thought I might help.

The syntax isn't always JSON. It can be YAML (or whatever you have a loader for I think?) too.

I suppose you aren't using something like vetur already. I'd recommend giving it a try though. It's officially supported and has syntax highlight for custom blocks.

[HermannBjorgvin]

Thanks @adriangoransson for the correction.

Given this I think it might be best to have a default setting you can change in the settings file (if there is one?)

I don't know as much as you @skyronic or @yyx990803 about sublime text syntax highlighting but I can give it a try in my free time if this get's approved as a change.