Vue Component Name Hints

一个为 Vue 项目提供智能组件名称提示和自动导入的 VS Code 插件。支持 Vue2、Vue3 和 UniApp。

功能特性

🎯 智能组件补全

在 .vue 文件的 <template> 标签中输入字符时，插件会自动：

🔍 全局搜索项目中所有 .vue 组件文件
🎨 提供模糊匹配的组件名称补全建议
📝 支持多种命名格式匹配（kebab-case、PascalCase、首字母缩写等）
🚫 智能排除常见 HTML 标签和 Vue 指令
📂 支持配置忽略目录（默认忽略：node_modules、uni_modules、unpackage、dist）

🚀 自动导入组件

当选择补全项时，插件会智能地：

✅ 检测组件是否已导入
📦 自动计算相对路径并添加 import 语句
🎛️ 自动注册组件（Vue2 Options API）
🔧 支持 Vue3 Composition API（script setup）
🆕 自动创建 script 标签（如果文件中不存在）

🔄 实时文件监听

📂 自动监听 .vue 文件的创建、删除和重命名
🔄 实时更新组件列表
⚙️ 支持配置变更时自动重新扫描

安装

在 VS Code 扩展市场中搜索 "Vue Component Name Hints" 并安装。

使用方法

在 .vue 文件的 <template> 标签中输入 < 开始输入组件名
输入任意字符，插件会显示匹配的组件列表
选择想要的组件，按回车或点击
组件会自动导入并在模板中补全

示例

假设项目中有一个组件 src/components/MyButton.vue：

在 template 中输入：

<template>
  <div>
    <MyB
  </div>
</template>

按回车后自动变成：

Vue3 (script setup):

<template>
  <div>
    <MyButton>
    </MyButton>
  </div>
</template>

<script setup lang="ts">
import MyButton from './components/MyButton';
</script>

Vue2 (Options API):

<template>
  <div>
    <MyButton>
    </MyButton>
  </div>
</template>

<script>
import MyButton from './components/MyButton'

export default {
  components: {
    MyButton
  }
}
</script>

支持的匹配方式

完全匹配: 输入 MyButton 匹配 MyButton
前缀匹配: 输入 My 匹配 MyButton
包含匹配: 输入 Button 匹配 MyButton
首字母缩写: 输入 MB 匹配 MyButton
kebab-case: 输入 my-button 匹配 MyButton

配置选项

ignoreDirectories

指定扫描组件时要忽略的目录列表。

默认值: ["node_modules", "uni_modules", "unpackage", "dist"]

设置方式:

打开 VS Code 设置
搜索 "Vue Component Name Hints"
在 "Ignore Directories" 中添加或修改要忽略的目录

命令

Vue: Rescan Components - 手动重新扫描项目中的所有 Vue 组件

触发方式

插件在以下情况下会触发补全：

输入 < 后跟组件名（例如：<MyB）
在空白处直接输入组件名（例如：MyB）

要求

VS Code 1.60.0 或更高版本
Vue 项目（Vue2、Vue3 或 UniApp）
推荐安装：Volar (Vue 3) 或 Vetur (Vue 2) 扩展以获得完整的 Vue 语言支持

已知问题

目前仅支持标准的 import 语句格式
不支持动态导入
自动导入功能可能不适用于复杂的组件导入场景

版本历史

0.0.1

初始版本发布

实现基本的组件扫描和补全功能
支持自动导入
支持 Vue2 和 Vue3
支持多种命名格式匹配
支持实时文件监听

开发

如果您想参与开发或了解插件的工作原理，可以查看源代码：

src/extension.ts - 插件入口点
src/componentScanner.ts - 组件扫描器
src/completionProvider.ts - 补全提供程序
src/vueFileHelper.ts - Vue 文件辅助工具

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

Enjoy!

vue-component-name-hints

lcn