Vue.js: Vuetify Loader - Code completion for custom components?
I'm using vuetify-loader to automatically resolve custom components for my PWA. This saves me from having to write import statements for each component I'm using. They resolve fine in the application itself. Unfortunately WebStorm/IntelliJ can't figure out what I mean when I type `<CstFormField>` and marks it as an issue. Since vuetify itself also uses the loader and code completion works fine for it, I assume there's a way to tell WebStorm about my custom components. I can't find any suggestions as to how though, so I'm hoping someone here has an idea.
Here's how I load the custom components:
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = new VuetifyLoaderPlugin({
match(originalTag, { kebabTag, camelTag, path, component }) {
if (camelTag.startsWith('Cst')) {
return [camelTag, `import ${camelTag} from '@components/${camelTag}'`];
}
},
});
Thank you for any hints!
请先登录再写评论。
No way; the IDE expects your components being imported/used explicitly, it doesn't analyze your configs for dynamic imports. So defining components in 'a-la-carte' way requires adding special support. Please feel free to file a feature request for it to youtrack, https://youtrack.jetbrains.com/issues/WEB
Just an idea: to improve code completion for different Vue.js component libraries, we have invented a special format of metadata, called
web-types. We are using it to support global components from popular libraries, like vuetify. web-types describe the library's components and their directives.You can try adding description of your components in the
web-typesformat to your app. To help the IDE to locate this file, a link to it should be added to the"web-types"field in project'spackage.json.On http://github.com/JetBrains/web-types you can find the JSON schema, scripts that you can use to generate the metadata in the required format, as well as the latest versions of descriptions for the most popular Vue.js component libraries