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

查看 41|回复 1
作者: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'}), 或者
如果文件名不是 AuthLogin 就会在终端报错,显示写错的文件名和正确的文件名,并且可以 ctrl 或 cmd + 点击直接跳转到出错的那行代码方便修正文件名

文件, Vue, script, 组件

feifeichen   
既然这样不如直接强制文件名和组件名一致,还免得手动改了
您需要登录后才可以回帖 登录 | 立即注册

返回顶部