Add support for <i18n> blocks of SFC.

[ota-meshi]

This PR adds support for the <i18n> block.

close #11

I have made the following changes to support <i18n>.

• Change @intlify/vue-i18n/no-html-messages rule to also verify the json in the <i18n> block.
• Change @intlify/vue-i18n/no-missing-keys rule to not report if the message used by SFC is inside <i18n> block.
• Change @intlify/vue-i18n/no-unused-keys rule to report even if the message in the <i18n> block is not used by that SFC.

In addition, If you don't validate the .json and using <i18n>, the rule no longer reports an error even if you don't have settings.

Parsing the <i18n> block understands the following attributes:

• src ... The @intlify/vue-i18n/no-missing-keys rule also looks for keys in the file specified by src.
• locale ... If this is specified, it is determined that JSON does not include locale, similar to vue-i18n-loader.

[kazupon]

Thank you for your PR!
Awesome !

I'll try to review, please wait! 🙏

[kazupon]

Great works!

I've put a comment.
Could you check it please?

[kazupon]

You can use shorthand prop name sytanx.

vueESLintParser.AST.traverseNodes(node, {
    visitorKeys

[ota-meshi]

I fixed this. I also enabled the "object-shorthand" rule in .eslintrc.

[sosukesuzuki]

(Disclaimer: I'm not a maintainer.)

Current vue-eslint-parser parses the below code incorrect:

 <i18n>
  {
    "hello_incorrect": "</",
    "hello_correct": "hello"
  }
 </i18n>

The above code is parsed to like the below AST:

 {
  　type: 'VElement',
    range: [ 5, 91 ],
    loc: { start: { line: 2, column: 4 }, end: { line: 8, column: 4 } },
    name: 'i18n',
    rawName: 'i18n',
    namespace: 'http://www.w3.org/1999/xhtml',
    startTag: {
      type: 'VStartTag',
      range: [ 5, 11 ],
      loc: { start: [Object], end: [Object] },
      parent: [Circular *1],
      selfClosing: false,
      attributes: []
    },
    children: [
      {
        type: 'VText',
        range: [Array],
        loc: [Object],
        parent: [Circular *1],
        value: '\n  {\n    "hello_incorrect": "'
      },
      {
        type: 'VText',
        range: [Array],
        loc: [Object],
        parent: [Circular *1],
        value: '\n    '
      }
    ],
    endTag: null,
    variables: []
}

Informations for under "hello_incorrect" is removed from AST. So some rules for SFC custom blocks probably will be broken.
The best way is to fix this problem on parser side. But if you can't fix it we should create new issue about it.

[kazupon]

@sosukesuzuki
Thanks for your information!

Do mysticatea know about that issue?
I've just checked it out vue-eslint-parser github issues, but I couldn't find it. 😞
You might want to register that issue in the github issues. :)

[sosukesuzuki]

@kazupon

Do mysticatea know about that issue?

Probably, no. vue-eslint-parser doesn't support custom blocks in now. So I'll create new issue as feature request:+1:

[ota-meshi]

I didn't know that vue-template-compiler could parse a custom block without HTML escaping😅
But when I check it with astexplorer.net, @vue/compiler-core seems to need escaping.
Hmm... I don't know which is right.

demo

[ota-meshi]

@kazupon Thank you for reviewing!
I changed this PR. So please check again it.

[wolfgangwalther]

Does this also work with <i18n lang="yaml" ...> blocks?

[ota-meshi]

yaml is not yet supported.

[tmcdos]

I didn't know that vue-template-compiler could parse a custom block without HTML escaping
But when I check it with astexplorer.net, @vue/compiler-core seems to need escaping.
Hmm... I don't know which is right.

Is it possible to use the ability of Vue-Loader for custom blocks ? https://vue-loader.vuejs.org/guide/custom-blocks.html