Vue/Typescript库的代码完成在IntelliJ上不工作

Question

我正在构建一个Vue.js / Vuetify / Typescript库，以便在多个项目之间共享和重用组件。

库是用Vite / npm构建的，它工作得很好，但我没有在IntelliJ上完成任何代码，当用作npm依赖时，无论是组件名称还是道具。

代码完成与IntelliJ上的Vuetify组件完美地工作，所以我想IntelliJ应该能够为我的自定义库做同样的事情。

以下是我的package.json文件的示例:

"files": [
"dist/",
"src/",
"README.md"
],
"types": "./dist/types/index.d.ts",
"main": "./dist/ui-components-lib.umd.cjs",
"module": "./dist/uicomponents-lib.js",
"exports": {
".": {
"import": "./dist/ui-components-lib.js",
"require": "./dist/ui-components-lib.umd.cjs"
},
"./dist/style.css": "./dist/style.css"
}

和vite.config.ts:

build: {
target: 'esnext',
lib: {
entry: path.resolve(__dirname, 'src/index.ts'),
name: 'UiComponents',
fileName: `ui-components-lib`,
formats: ['es']
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},

tarball(用npm pack生成的)内部看起来一切都很好:所有d.ts类型的文件都在disttypes下。

但是仍然没有代码完成。我还缺什么吗?

Answer 1

使用静态代码分析来解析第三方库中定义的组件并不总是可行的。改进不同Vue.js的代码完成组件库中，我们发明了一种特殊的元数据格式，称为web-types。web类型描述了库的组件和它们的指令。

如果你在维护自己的Vue.js组件库中，可以将web-types格式的组件描述添加到模块中。为了帮助IDE定位这个文件，应该在package.json的"web-types"字段中添加一个指向它的链接。

在http://github.com/JetBrains/web-types你可以找到JSON模式，以所需格式生成元数据的说明，以及最流行的Vue.js组件库的最新版本的描述