vue.jsvisual-studio-code

VScode cannot use command+click to jump to Vue3's custom component in MacOS


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"]
  }
}

Solution

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