Description
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.