# @db-ux/core-eslint-plugin 中文文档
规范地址：https://npmcn.com/package/%40db-ux/core-eslint-plugin/
版本：6\.3\.2
npm 元数据更新时间：2026-11-11T12:58:20.268Z
中文译文更新时间：2026-11-11T20:50:55.855Z
软件包许可：Apache-2\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40db-ux/core-eslint-plugin
原文对照：https://npmcn.com/package/%40db-ux/core-eslint-plugin/?lang=original
源码仓库：https://github.com/db-ux-design-system/core-web
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：260 kB，65 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：eslint \>=9\.0\.0
- 首次发布：2026-02-11T07:51:39.549Z
- 最新版本发布：2026-11-11T12:58:19.894Z
- 近 30 天下载量：3398（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：98（近 12 个月 98 个）
## 中文简介
DB UX 设计系统组件的 ESLint 插件
## 安装
```sh
npm install @db-ux/core-eslint-plugin
```
也可以使用：`pnpm add @db-ux/core-eslint-plugin`、`yarn add @db-ux/core-eslint-plugin`、`bun add @db-ux/core-eslint-plugin`
## README
# @db-ux/core-slint-插件
ESLint插件用于验证跨越React,Vue,和Angular对DB UX设计系统组件的正确使用.
## 安装
```shell
npm install eslint @db-ux/core-eslint-plugin --save-dev
```
**Vue项目**,同时安装 `vue-eslint-parser`数字 :
```shell
npm install vue-eslint-parser --save-dev
```
**角化项目**,同时安装 `@angular-eslint/template-parser`数字 :
```shell
npm install @angular-eslint/template-parser --save-dev
```
**反应/ TypeScript 项目**,同时安装 `@typescript-eslint/parser`数字 :
```shell
npm install @typescript-eslint/parser --save-dev
```
## 使用量
在您的 ESLint 配置中添加 :
**ESLint 9+(平面配置) :**
```js
// eslint.config.js
import dbUx from "@db-ux/core-eslint-plugin";
export default [
{
plugins: {
"db-ux": dbUx
},
rules: dbUx.configs.recommended.rules
}
];
```
**Vue项目**,配置 Vue 解析器 :
```js
import dbUx from "@db-ux/core-eslint-plugin";
import vueParser from "vue-eslint-parser";
import tsParser from "@typescript-eslint/parser";
export default [
{
files: ["**/*.vue"],
languageOptions: {
parser: vueParser,
parserOptions: {
parser: tsParser,
ecmaVersion: "latest",
sourceType: "module"
}
},
plugins: {
"db-ux": dbUx
},
rules: dbUx.configs.recommended.rules
}
];
```
**角化项目**,配置角模板解析器 :
```js
import dbUx from "@db-ux/core-eslint-plugin";
import angularTemplateParser from "@angular-eslint/template-parser";
export default [
{
files: ["**/*.html"],
languageOptions: {
parser: angularTemplateParser
},
plugins: {
"db-ux": dbUx
},
rules: dbUx.configs.recommended.rules
}
];
```
**或使规则能够单独:**
```js
import dbUx from "@db-ux/core-eslint-plugin";
export default [
{
plugins: {
"db-ux": dbUx
},
rules: {
"db-ux/button-no-text-requires-tooltip": "error"
}
}
];
```
**反应/ TypeScript 项目**,配置 TypeScript 解析器 :
```js
import dbUx from "@db-ux/core-eslint-plugin";
import tsParser from "@typescript-eslint/parser";
export default [
{
files: ["**/*.ts", "**/*.tsx"],
languageOptions: {
parser: tsParser,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: { jsx: true }
}
},
plugins: {
"db-ux": dbUx
},
rules: dbUx.configs.recommended.rules
}
];
```
## 规则
### `button-no-text-requires-tooltip`
确保按钮带有 `noText` 道具两个都有 `icon` (或 `iconLeading`编号 :`iconTrailing`)和a 数据 `DBTooltip` 孩子们.
**无效 :**
```jsx
// React
Save
Save
// Angular
ABC
ABC
// Vue
ABC
ABC
```
**有效时间 :**
```jsx
// React
Save
Save document
// Angular
ABC
ABC
// Vue
ABC
ABC
```
## 支持的框架
- 反应(JSX/TSX)
- Vue (SFC) (英语)
- 角 (平板)
插件会自动检测基于文件扩展和解析的框架.
### `button-type-required`
确保 DBButton 有明确的 `type` 属性(提交、按钮或重置).
**无效 :**
```jsx
Save
Save
```
**有效时间 :**
```jsx
Save
Submit
Reset
```
### `form-label-required`
确保格式组件(DBInput、DBTextrea、DBSelect、DBCustomSelect、DBCheckbox、DBradio、DBSwitch)具有 `label` 属性.
**无效 :**
```jsx
// React
// Angular
// Vue
```
**有效时间 :**
```jsx
// React
// Angular
// Vue
```
### `prefer-icon-attribute`
优先使用 `icon` 属性 `` 支持图标属性的组件的子组件.
**无效 :**
```jsx
// React
// Angular
// Vue
```
**有效时间 :**
```jsx
// React
Save
// Angular
Save
// Vue
Link
```
### `text-or-children-required`
确保组件(DBAccordion项目、DBBadge项目、DBButton项目、DBLink项目、DBInfotext项目、DBControlPanelNavigation项目、DBNavigation项目、DB通知、DBDialogheader项目、DBDrawerheader项目)要么具有 `text` 财产或儿童含量。 对于 DBDialog 标题和 DBDrawer 标题, 守护对话框的可访问名称: 标题内容成为 `aria-labelledby` 目标,所以空标题会让对话框未命名 .
DBIcon被故意排除: 它总是用 `aria-hidden="true"`,所以一个 `text` 无论是屏幕阅读器还是视觉用户, 装饰性的图标不需要任何内容,而信息化的图标则需要被命名为"包装"来包围.
**无效 :**
```jsx
// React
// Angular
// Vue
```
**有效时间 :**
```jsx
// React
Save
Click here
// Angular
Save
// Vue
New
// DBIcon is decorative and is never reported
```
### `no-interactive-tooltip-content`
防止DBTooltip内部的互动元素(按钮,链接,输入). 交互内容使用 DBPopover .
**无效 :**
```jsx
// React
Action
Link
// Angular
Action
// Vue
Link
```
**有效时间 :**
```jsx
// React
Simple text
Text with span
Paragraph
// For interactive content, use DBPopover:
Action
```
### `tooltip-requires-interactive-parent`
保证DBTooltip是一个具有交互元素的可访问性的孩子(用户必须能够将焦点集中在父母身上).
**无效 :**
```jsx
// React
Show moreXXX
TextInfo
BadgeInfo
// Angular
Show moreXXX
// Vue
TextInfo
```
**有效时间 :**
```jsx
// React
SaveSave document
LinkMore info
// Angular
SaveSave document
// Vue
LinkMore info
```
### `no-nested-accordion`
防止将 DBAccordion 组件嵌入内部,因为它会混淆用户.
**无效 :**
```jsx
// React
Nested
Deep
// Angular
Nested
// Vue
Nested
```
**有效时间 :**
```jsx
// React
Item
First
FirstSecond
```
### `badge-corner-placement-rules`
确保 DBBadge 带有角位置的字符最大为3个,并具有可访问性标签属性.
**无效 :**
```jsx
// React
9999
99
// Angular
9999
// Vue
Long text
```
**有效时间 :**
```jsx
// React
Long text is fine
Long text
99+
// Auto-fix converts:
9999
// to:
999
```
### `badge-no-inline-in-interactive`
防止DBBadge在交互元素(DBButton,DBLink)内置内置. 换作转角位置.
**无效 :**
```jsx
// React
BadgeButton
BadgeLink
// Angular
BadgeButton
// Vue
BadgeButton
```
**有效时间 :**
```jsx
// React
Badge
5Button
3Link
// Auto-fix converts:
BadgeButton
// to:
BadgeButton
```
### `button-single-icon-attribute`
确保DBButton只使用一个图标属性(icon,图标领跑,或图标Trailing).
**无效 :**
```jsx
// React
Save
Save
Save
// Angular
Save
// Vue
Save
```
**有效时间 :**
```jsx
// React
Save
Save
Next
// Angular
Save
Save
// Vue
Next
```
### `link-external-security`
确保外部链接具有适当的安全属性(目标=" blank"和指针政策).
**无效 :**
```jsx
// React
External
External
External
// Angular
External
// Vue
External
```
**有效时间 :**
```jsx
// React
Internal link
External
// Angular
External
// Vue
External
```
### `select-requires-options`
确保 DBSelect 有选项属性或选项孩子.
选项在通过 `