For the same project, I can use ctrl+click to jump to the corresponding .vue
file through the custom component name in Windows 10. However, I cannot use command+click to jump in MacOS. I have tried reinstalling VScode and Open other projects and the problem still exists.I use unplugin-vue-components
to automatically import components.components.d.ts is generated.The project can run normally.
The display type is displayed when running under the windows version. However, the type of the custom component in mac displays any .ts
or .js
function methods and native tags such as div
can be jumped, but custom components cannot be jumped, such as el-button
.I also raised the same issue on github https://github.com/unplugin/unplugin-vue-components/issues/710 because I don’t have enough reputation to upload pictures.
Use command + click on MacOS to jump to the .vue
file of the corresponding custom component.
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["src/types/*.d.ts", "src/**/*.ts", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite';
import Icons from 'unplugin-icons/vite';
import {
ElementPlusResolver,
VueUseComponentsResolver
} from 'unplugin-vue-components/resolvers';
export default defineConfig(({ command, mode }) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const isBuild = command === 'build';
// 读取env配置文件
const env = loadEnv(mode, process.cwd());
return {
plugins: [
vue(),
// api按需导入
AutoImport({
// 定义element-plus api按需加载
resolvers: [ElementPlusResolver()],
// 导入vue以及其他 api按需加载
imports: ['vue', 'vue-router', 'pinia'],
// 目录文件按需加载
dirs: ['src/enums/**/*', 'src/stores/**/*'],
vueTemplate: true,
// 类型文件输出目录
dts: 'src/types/auto-imports.d.ts'
}),
// 自动导入组件
Components({
resolvers: [
// Element plus组件自动导入
ElementPlusResolver(),
// Vue组件自动导入
VueUseComponentsResolver(),
// 图标自动导入
IconsResolver({
prefix: false,
enabledCollections: ['icon-park-outline'],
alias: {
park: 'icon-park-outline'
}
})
],
extensions: ['vue', 'ts'],
dirs: ['src/components', 'src/layouts'],
// 类型文件输出目录
dts: 'src/types/components.d.ts'
}),
Icons({
autoInstall: true,
compiler: 'vue3'
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/assets/styles/var.scss";'
}
}
},
server: {
proxy: {
'/api': {
target: env.VITE_API_URL,
changeOrigin: true
},
'/public': {
target: env.VITE_API_URL,
changeOrigin: true
}
}
}
};
});
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
],
"compilerOptions": {
// 指定全局组件类型
"types": ["element-plus/global"]
}
}
The problem is solved. It is a problem with the Vue Language Features (Volar)
plugin version. Version 1.8.22
has a BUG and cannot display the type of custom components. Just reduce the version to 1.8.11
.