Implement web-types (JetBrains) for the i18n-t component

[santiagoarizti]

Clear and concise description of the problem

I use phpstorm as my IDE, and it helps detect missing html tags and/or vue components in vue SFCs.

Problem is, phpstorm (or webstorm) doesn't recognize the tag <i18n-t keypath="...">....

See discussion here that I started to find a solution to this problem:
#872

See jetbrains official documentation:
https://github.com/JetBrains/web-types

Suggested solution

In order to have autocomplete, we need to implement this simple feature in the package.json of the npm package

...
"web-types": "./web-types.json",
...

and in the web-types.json file this is a sample content that will take care of the <i18n-t> tag:

{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  "framework": "vue",
  "name": "vue-i18n",
  "version": "9.1.9",
  "contributions": {
    "html": {
      "types-syntax": "typescript",
      "description-markup": "markdown",
      "tags": [
        {
          "name": "I18nT",
          "description": "built-in component from vue-i18n",
          "doc-url": "https://vue-i18n.intlify.dev/",
          "attributes": [
            {
              "name": "plural",
              "description": "Determines if use count 0, 1 or many",
              "default": "'0'",
              "value": {
                "kind": "expression",
                "type": "string"
              }
            },
            {
              "name": "keypath",
              "description": "The ident of the lang to be used",
              "default": "'santi'",
              "value": {
                "kind": "expression",
                "type": "string"
              }
            }
          ],
          "slots": [
            {
              "name": "default",
              "description": "interpolated string"
            }
          ]
        }
      ]
    }
  }
}

Obviously this schema is fine for my own project, I would clean the descriptions and perhaps add more features as described in the official documentation.

But this does the job fine and is a very straightforward solution.

Alternative

An alternative would be to allow to import the <i18n-t> component from 'vue-i18n'; which in theory would allow the IDE to find the definition of the component as well. This would work for more IDEs, but would require more lines of code.

See example

<script>
// the second import here is the component
import {useI18n, I18nT} from 'vue-i18n';

export default {
  components: {
    'i18n-t': I18nT, // note that in <script setup> this line is not necessary
  },
}
</script>
<template>
  <i18n-t keypath="hello">
    <strong>world</strong>
  </i18n-t>
</template>

Additional context

This is the working solution in my local development environment

I recommend to add this to the npm package so that everyone can get good linting in phpstorm or any other jetbrains IDE

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[kazupon]

@santiagoarizti
Thank you for your proposal!
That sounds good to me!

I think your suggestion is great because it can support for JetBrains to handle it without having to modify vue-i18n-next.

PR will be welcome 😃

[6XGate]

This is a more complete definition for the i18n-t component. The others should be added.

{
    "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
    "framework": "vue",
    "name": "vue-i18n",
    "version": "9.1.9",
    "contributions": {
        "html": {
            "types-syntax": "typescript",
            "description-markup": "markdown",
            "tags": [
                {
                    "name": "I18nT",
                    "description": "built-in component from vue-i18n",
                    "doc-url": "https://vue-i18n.intlify.dev/",
                    "attributes": [
                        {
                            "name": "plural",
                            "description": "Determines if use count 0, 1 or many",
                            "default": "0",
                            "value": {
                                "kind": "expression",
                                "type": ["string", "number"]
                            }
                        },
                        {
                            "name": "keypath",
                            "description": "The ident of the lang to be used",
                            "default": "'santi'",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            }
                        },
                        {
                            "name": "tag",
                            "description": "The tag into which to render the result",
                            "default": "span",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            }
                        },
                        {
                            "name": "locale",
                            "description": "The locale to use",
                            "default": "en",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            }
                        },
                        {
                            "name": "scope",
                            "description": "The component scope",
                            "default": "parent",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            }
                        },
                        {
                            "name": "i18n",
                            "description": "The i18n instance",
                            "default": "null",
                            "value": {
                                "kind": "expression",
                                "type": "string"
                            }
                        }
                    ],
                    "slots": [
                        {
                            "name": "<name>",
                            "pattern": {
                                "items": "argument",
                                "template": [
                                    "#item:argument"
                                ]
                            },
                            "argument": {
                                "name": "Argument",
                                "pattern": {
                                    "regex": ".+"
                                },
                                "doc-hide-pattern": true
                            },
                            "description": "Slot to provide a named value",
                            "doc-url": "https://vue-i18n.intlify.dev/guide/advanced/component.html#slots-syntax-usage"
                        }
                    ]
                }
            ]
        }
    }
}