eslint-plugin-prefer-dbui

推荐使用 dbUI 组件库替代其他 UI 组件的 ESLint 插件，帮助保持项目中组件的一致性和更好的用户体验。

📚 文档

• 快速开始 - 详细的安装和配置指南
• 贡献指南 - 如何参与项目开发
• 更新日志 - 版本变更记录

安装

npm install eslint-plugin-prefer-dbui --save-dev

使用

在你的 .eslintrc 配置文件中添加 prefer-dbui 到插件列表：

{
  "plugins": ["prefer-dbui"]
}

然后配置你想要启用的规则：

{
  "rules": {
    "prefer-dbui/prefer-db-confirm": "warn",
    "prefer-dbui/prefer-db-components": "warn",
    "prefer-dbui/prefer-use-route-query": "warn",
    "prefer-dbui/prefer-use-reset-reactive": "warn"
  }
}

预设配置

推荐配置

{
  "extends": ["plugin:prefer-dbui/recommended"]
}

严格模式

{
  "extends": ["plugin:prefer-dbui/strict"]
}

支持的规则

| 规则名 | 描述 | 推荐 | | -------------------------------------------------------------------- | ------------------------------------------------------ | ---- | | prefer-db-confirm | 推荐使用 db-confirm 替代 el-dialog | ✅ | | prefer-db-components | 推荐使用 dbUI 组件替代其他 UI 组件 | ✅ | | prefer-use-route-query | 推荐使用 useRouteQuery hook 替代手动路由查询参数处理 | ✅ | | prefer-use-reset-reactive | 推荐使用 useResetReactive hook 替代手动 reset 方法 | ✅ |

规则详情

prefer-db-confirm

检测 Vue 模板中的 el-dialog 使用，建议替换为 db-confirm 组件。

// ❌ 错误
<el-dialog :visible.sync="visible" title="确认">
  <p>确定要删除吗？</p>
</el-dialog>

// ✅ 正确
<db-confirm :visible="visible" title="确认">
  <p>确定要删除吗？</p>
</db-confirm>

prefer-db-components

检测 Vue 模板中的各种 UI 组件使用，建议替换为对应的 dbUI 组件。

// ❌ 错误
<el-notification title="成功" message="操作成功" />
<el-alert title="警告" type="warning" />

// ✅ 正确
<db-notification title="成功" message="操作成功" />
<db-alert title="警告" type="warning" />

prefer-use-route-query

检测 Vue 组件中手动管理路由查询参数的代码模式，建议使用 useRouteQuery hook 替换。

// ❌ 错误
export default {
  setup(props) {
    const state = reactive({
      currentView: props.selectedView,
      loading: false
    })
    return { ...toRefs(state) }
  },
  watch: {
    currentView(newValue) {
      this.$router.push({
        query: { selectedView: newValue }
      })
    }
  }
}

// ✅ 正确
import { useRouteQuery } from '@jdcloud/dbUI'

export default {
  setup(props) {
    const currentView = useRouteQuery('selectedView', props.selectedView)

    const state = reactive({
      loading: false
    })

    return { currentView, ...toRefs(state) }
  }
}

prefer-use-reset-reactive

检测 Vue 组件中使用 reactive 创建状态并手动编写 reset 函数的模式，建议使用 useResetReactive hook 替换。

// ❌ 错误
import { reactive } from 'vue-demi'

export default {
  setup() {
    const state = reactive({
      name: '',
      age: 0,
      email: ''
    })

    const reset = () => {
      state.name = ''
      state.age = 0
      state.email = ''
    }

    return { state, reset }
  }
}

// ✅ 正确
import { useResetReactive } from '@jdcloud/dbUI'

export default {
  setup() {
    const { state, reset } = useResetReactive({
      name: '',
      age: 0,
      email: ''
    })

    return { state, reset }
  }
}

配置选项

例外情况

你可以为某些特殊情况配置例外：

{
  "rules": {
    "prefer-dbui/prefer-db-confirm": [
      "warn",
      {
        "exceptions": ["el-dialog-vertical-center", "errDiag"]
      }
    ]
  }
}

自定义组件映射

你可以自定义组件映射关系：

{
  "rules": {
    "prefer-dbui/prefer-db-components": [
      "warn",
      {
        "componentMappings": {
          "el-dialog": "db-confirm",
          "el-message-box": "db-confirm",
          "el-notification": "db-notification",
          "el-alert": "db-alert"
        },
        "exceptions": ["errDiag", "legacy-component"]
      }
    ]
  }
}

禁用特定规则

如果你需要在特定文件中禁用某些规则，可以使用 ESLint 注释：

/* eslint-disable prefer-dbui/prefer-db-confirm */
<el-dialog :visible.sync="visible" title="特殊用途">
  <!-- 这里不会触发警告 -->
</el-dialog>
/* eslint-enable prefer-dbui/prefer-db-confirm */

开发

运行测试

npm test

监听测试

npm run test:watch

测试覆盖率

npm run test:coverage

代码检查

npm run lint

修复代码风格

npm run lint:fix

贡献

欢迎提交 Issue 和 Pull Request！请阅读我们的 贡献指南 了解详细信息。

许可证

MIT

相关链接

• dbUI 组件库文档
• ESLint 官方文档
• Vue.js 官方文档