写了个 vite 插件，提醒起 vue 组件名小助手

[shakukansp]

https://github.com/MinatoHikari/vite-plugin-vue-component-name-checker

给公司新项目搭完 vue3 架子后扔给同事开发，用 vite-plugin-pages 的时候，keep-alive 的 includes 需要塞组件名进去，同事总忘记复制粘贴以后总忘记改组件名，要么就是忘记写，提醒一万遍，忍无可忍，遂写此插件。

默认的行为是把定义的 dir 参数当作根目录，只要开发或者打包的时候读取了 .vue 的 module,就会检索文件内代码是否写在 defineOptions 里写了正确组件名（默认按照路由层级+文件名来对比是否正确，配合vite-plugin-pages 生成的 routes 可以很简单地进行 keep-alive 的设定） 目前只检测 script setup

支持配置需要忽略的文件路径字符串，支持自定义比较规则

比如设置 dir 为 path.join(__dirname, 'src', 'pages') 那么假如文件路径为 src/pages/auth/login/index.vue 或者 src/pages/auth/login.vue

在进去这个页面的时候插件就会检查 vue 文件内的代码，是不是定义了 defineOptions({name:'AuthLogin'}), 或者 <script setup name="AuthLogin"></script>

如果文件名不是 AuthLogin 就会在终端报错，显示写错的文件名和正确的文件名，并且可以 ctrl 或 cmd + 点击直接跳转到出错的那行代码方便修正文件名

[feifeichen]

既然这样不如直接强制文件名和组件名一致，还免得手动改了

[shakukansp]

@feifeichen 那你没法包装唯一性，按目录层级起名组件名必然是唯一的

[shakukansp]

@feifeichen 另外，vite-plugin-pages 是根据目录层级生成 route, 多标签页缓存可以很简单地用 route.path 当作 key ，组只要简单处理就可以转换成组件名加到 keep-alive 的 includes 里面。
而且我们项目是可以通过组件名直接 decamelcase 来在浏览器里显示的导航菜单中精确搜索页面的，避免 ide 或者编辑器中的文件目录层级和导航菜单中的层级中英文对不上而找不到目录到底对应的是菜单中哪个页面的问题

[Kurisuzz]

点赞，本人也经常忘了写组件名😂

[toesbieya]

又是经典的动态路由，吐了

[SleepyRaven]

vue3 现在有没有定义组件 name 的 api 啊？之前有个提案一直没被 merge

[shakukansp]

@SleepyRaven 3.3.4 defineOptions 已经成为正式 api

[Yukiteru]

我给 vscode 写了个模板，生成 vue 文件的时候自动根据文件名填写组件名，算是比较方便的做法

[shakukansp]

@toesbieya vite-plugin-pages 是根据你的目录层级生成路由，filesystem 路由，是不怎么需要去关心路由文件的

[shakukansp]

@Yukiteru 写过脚本递归根据目录层级+文件名命名组件

后续考虑加类似的东西可以在终端里点一下就改正组件名

[lsdsjy]

感觉应该是 linter 而不是 vite 该干的事

[shakukansp]

@lsdsjy 好像也可以，没有这么灵活

[NICE20991231]

有趣，我是检测到 setup 直接生成自动组件名（追加一个普通的 script ），注册路由时也直接获取组件的 name
只针对 pages 目录...