全局唯一值老是重复？别再全局搜索了，Vite自定义插件全解决在项目中，我们经常遇到某些属性(settingKey)要项目

全局唯一值老是重复？别再全局搜索了，Vite自定义插件全解决

背景

在项目中，我们经常遇到某些属性(settingKey)要项目内全局唯一，老是有同事搞到重复的，手动检查又很麻烦

为此，搞一个Vite自定义插件来自动检查是个不错的选择。

插件实现

/**
 * Vite插件：检查Vue组件中的settingKey属性是否唯一
 */
export default function checkSettingKeyPlugin() {
  const allSettingKeys = new Set<string>();

  return {
    name: "check-setting-key",
    transform(code: string, id: string) {
      if (!id.endsWith(".vue")) return null;

      const regex = /(?:v-bind:)?settingKey=["']([^"']+)["']/g;
      const errors: string[] = [];
      let match: RegExpExecArray | null;

      while ((match = regex.exec(code)) !== null) {
        const key = match[1];
        if (allSettingKeys.has(key)) {
          errors.push(`重复的 settingKey: ${key}`);
        } else {
          allSettingKeys.add(key);
        }
      }

      if (errors.length > 0) {
        const errorMsg = `[${id}] settingKey 必须唯一:\n${errors.join("\n")}`;
        this.error(errorMsg);
        return { code, map: null, errors: [errorMsg] };
      }

      return { code, map: null };
    },
  } as any;
}

使用方式

在vite.config.ts中引入插件：

import checkSettingKeyPlugin from './plugins/checkSettingKey';

export default defineConfig({
  plugins: [
    vue(),
    checkSettingKeyPlugin()
  ]
})

效果

当检测到问题时，控制台会显示详细的错误信息，并终止打包：

[src/components/Example.vue] settingKey 必须唯一:
重复的 settingKey: user_name

总结

通过这个Vite插件，我们实现了：

自动化检查settingKey规范
早期发现问题，避免运行时错误

这种插件开发模式可以扩展到其他类似的代码规范检查场景，是提升项目质量的有效手段。