Vue3自定义插件provide/inject时VSCode/Volar智能提示失效如何解决

前置说明 #

本项目未使用TypeScript，迁移至TS工程量极大，需无需全项目适配TS的解决办法。项目基于Vite构建。

现有代码情况 #

插件文件 @/plugins/ckie.js #

export default {
  install: (app, options) => {
    const ckie = {
      test: () => { // 测试方法
        console.log('ckie插件运行正常！')
      },
    }

    app.provide('ckie', ckie)
  },
}

入口文件 main.js #

import { createApp } from 'vue'
import App from './App.vue'
import ckie from './plugins/ckie'

createApp(App)
  .use(ckie)
  .mount('#app')

组件内使用代码 #

<script setup>
import { inject } from 'vue'

const ckie = inject('ckie') // VSCode无法识别该注入标识（字符串）
const test = ckie.test // 无test方法的智能提示
</script>

已尝试操作 #

• 重启Vue服务
• 重载VSCode窗口

解决方案（无需全项目转TS） #

方案1：封装带JSDoc的注入工具函数（最简方案） #

在项目中创建工具文件 src/utils/usePlugins.js：

import { inject } from 'vue'

/**
 * 获取ckie插件实例
 * @returns {{ test: () => void }} ckie插件对象，包含test方法
 */
export function useCkie() {
  return inject('ckie')
}

之后在组件中替换直接inject的写法：

<script setup>
import { useCkie } from '@/utils/usePlugins'

const ckie = useCkie() // VSCode会根据JSDoc识别返回类型，提供智能提示
const test = ckie.test
</script>

方案2：给插件和注入添加JSDoc类型注解 #

修改 @/plugins/ckie.js，给插件对象添加类型定义：

/**
 * @typedef {Object} CkiePlugin
 * @property {Function} test - 插件测试方法，无参数，打印日志
 */

/** @type {CkiePlugin} */
const ckie = {
  test: () => {
    console.log('ckie插件运行正常！')
  },
}

export default {
  install: (app, options) => {
    app.provide('ckie', ckie)
  },
}

组件中注入时指定类型：

<script setup>
import { inject } from 'vue'
/** @typedef {import('@/plugins/ckie').CkiePlugin} CkiePlugin */

/** @type {CkiePlugin} */
const ckie = inject('ckie')
const test = ckie.test // 此时会出现test方法的智能提示
</script>

方案3：添加轻量类型声明文件（Vite环境） #

在项目根目录的src文件夹下创建vite-env.d.ts（JS项目中VSCode也会识别该文件）：

/// <reference types="vite/client" />

import type { InjectionKey } from 'vue'

// 定义ckie插件的类型
type CkiePlugin = {
  test: () => void
}

// 定义注入用的Symbol Key
export const ckieKey: InjectionKey<CkiePlugin> = Symbol('ckie')

修改插件文件，使用Symbol作为provide的key：

import { ckieKey } from './vite-env.d.ts'

export default {
  install: (app, options) => {
    const ckie = {
      test: () => {
        console.log('ckie插件运行正常！')
      },
    }

    app.provide(ckieKey, ckie)
  },
}

组件中使用该Symbol进行注入：

<script setup>
import { inject } from 'vue'
import { ckieKey } from '../vite-env.d.ts'

const ckie = inject(ckieKey) // 自动识别类型，智能提示正常
const test = ckie.test
</script>

内容的提问来源于stack exchange，提问作者Seangle