@atlaskit/eslint-plugin-design-system

中文文档
16.16.0发布于 2026/11/04Apache-2.0TypeScriptESM + CJS近 30 天下载 2.7万

与Atlassian设计系统一起使用的必要插件.

中文使用文档
文档目录3 节
  1. 安装
  2. 配置
  3. 规则

设计系统ESLint插件

此插件包含规则, 用于工作时 阿特拉斯设计系统。 。 。 .

安装

yarn add @atlaskit/eslint-plugin-design-system -D

配置

使用推荐的配置来获得Atlassian设计系统推荐的合理默认:

module.exports = {
  extends: [
+    'plugin:@atlaskit/design-system/recommended',
  ],
};

我们不建议维持你的配置 如果你不使用我们的配置,你将需要 指定单个规则和配置。 将插件添加到您的 eslint.config.cjs 文档.

module.exports = {
  plugins: [
+    '@atlaskit/design-system',
  ],
};

启用您想要使用的规则 .

module.exports = {
  rules: [
+    '@atlaskit/design-system/no-deprecated-apis': 'error',
  ],
};

规则

规则说明建议可修复建议
连续丙烯丙烯基确保与 css 财务报告和审定财务报表 xcss 道具用途对对
执行内置样式选择取消对 @atlaskit/ select 的 CSS 不支持的 CSS 选择器的样式
保证- avatar- tag- avatar- 道具确保AvatarTag avatar道具不包括内部管理的受控道具(大小,边框Color,外观).对
保证- 设计- 托肯- 使用强制使用设计符而不是硬码值.对对对
保证-设计-托肯-使用/审查强制使用出行前设计符而非硬码值.对对
保证- 相色执行即将到来的图标组件有彩色道具集,以便实现默认值的迁移.
保证合适的 xcs-usage执行正则 xcs 使用: 从 xcs () 迁移到 cssMap () , 并使用 有特定密钥的 csMap 对象 .
扩展- 移动- 短手扩展 transition 财务报告和审定财务报表 animation CSS的短手属性进入了它们的单个子属性,因此单个值可以被运动符所取代.对
图标标签在使用Atlassian设计系统组件时,强制使用图标标签.对对
洛桑格-巴德-塔格-标签-系统-移民Migrates 遗留了 Lozenge 和徽章外观值, 并引导 SimpleTag/RemobileTag 迁移到支持的 Tag API .对
无被禁进口品拒绝导入被禁模块 .对
无 css-映射镜实验用途的减少 cssMapScoped API 来自 @compiled/react。这个API是内部的,不是公共编译的CSS-in-JS接口的一部分.对
无 cs- 标记- 模板- 表达式拒绝任何 css 源自情感、样式组件或编译的被标记的模板表达式对
无黑暗主题测试在 VR 测试中使用暗色Scheme 解析.对
无减值- apis使用被贬损的API来否定.对
无拆解设计指针使用被贬损的设计标志牌作废.对对
无折旧进口不允许导入已贬值的模块 .对对对
不直接使用网络平台直接使用本地拖放( 请使用实用拖放)对
无情感原生物确保使用已编译的先导导入,而不是情感入门.对
无空- icon- 按钮标签确保只使用图标的Atlassian设计系统按钮没有空的可访问名称.对
无空类的表达式禁止任何在将空参数传递到样式.div () (或其他JSX元素)时使用的样式表达式 .
无出口cs禁止出口 css 函数调用。 导出 css 函数调用在运行时可能导致出乎意料的行为,并且不能静态分析.
无出口密钥框架禁止出口 keyframes 函数调用。 导出 css 函数调用在运行时可能导致出乎意料的行为,并且不能静态分析.
无全局索引否定 z-index 数值大于10。 全局层命令由浏览器顶层处理.
无-html-锁定鼓励直接使用HTML锚定元件,有利于Atlassian设计系统链接元件.对对
无 html 按钮鼓励直接使用 HTML 按钮元素,以有利于 Atlassian 设计系统按钮组件.对
无 html 检查框鼓励直接使用HTML复选框元素,以有利于Atlassian设计系统复选框组件.对对
无 html 码鼓励直接使用HTML代码元素,以有利于Atlassian设计系统代码组件.对对
无 html 标题鼓励直接使用HTML标题元素,而倾向于Atlassian设计系统标题组件.对对
无 html- 图像鼓励直接使用HTML图像元素,以有利于Atlassian设计系统图像组件.对对
无收音机劝阻直接使用HTML无线电元件取而代之的是Atlassian设计系统无线电元件.对对
无 html 范围鼓励直接使用HTML范围元素,以有利于Atlassian设计系统范围组件.对对
无 html 选择劝阻直接使用 HTML 选择的元素支持 Atlassian 设计系统选择的组件.对对
无 html 文本输入鼓励直接使用 HTML 文本输入元素,支持 Atlassian Design System textfield 组件.对对
无-html-文本区域鼓励直接使用 HTML 文本区域元素,支持 Atlassian 设计系统文本区域组件.对对
无虹相距道具取消在新图标上使用已贬值的间隔道具。 使用带csMap的Flex进行间隔.对对
无效 css- map检查通过 assMap 创建的 CSS 映射的有效性。 此功能意在与 TypeScript 的类型检查同时使用 .对
无键框- 标记- 模板- 表达式拒绝任何 keyframe 源自情感、样式组件或编译的被标记的模板表达式对
无边距使用边距 CSS 属性来否定 .
无模式标签放弃使用 label 在Atlassian设计系统模式对话框和模式入站触发器上的道具.对
无本地流行或对话拒绝本地 popover 财务报告和审定财务报表 <dialog> 要素。 使用设计系统组件,或 @atlaskit/top-layer 如果设计系统组件不合适.
无记名样式拒绝使用嵌入式 css 函数.对
无物理财产损坏物理属性和值 css 财务报告和审定财务报表 cssMap 函数调用.对
无占位符不应使用占位符。 如果应当向用户提供关于某一数值的适当类型或格式的信息,则应当使用与输入相关的帮助信息.对
无只读或残疾输入投入应几乎始终是互动的。 已禁用和只读输入通常可以被更方便用户的设计模式所取代.对
无列表元素分隔符警告时 separator 道具用于 as="li", (中文(简体) ), as="ol",或 as="dl" 内置组件.对
无样式标记的模板表达式拒绝任何 styled 源自情感、样式组件或编译的被标记的模板表达式对
无第三方焦点陷阱损坏第三方焦点陷阱库, 例如 react-focus-lock 财务报告和审定财务报表 focus-trap. 设计系统分层组件管理焦点.
无第三方破坏第三方分层库,如Popper.js和Floating UI等. 使用设计系统分层组件或 @atlaskit/top-layer。 。 。 .
无对齐弹出在单位测试中使用 MatchSnapshot( ) 和 toMatchInlineSnapshot( ) 。 应用明确的说法取而代之.
无安全设计指针执行设计符号的使用是静态的,也可以在当地分析.对对
无不安全的内线快照强制安装到 MatchInlineSnapshot 使用的守护栏:快照不得超过100行,并且不得包含类名或样式属性等内部执行细节.
不安全的风格覆盖对Atlassian设计系统采用的不安全风格的破坏使用.对
无不支持的 drag- and- drop- library 图书馆拒绝导入不支持的拖放模块 .对
无未使用的 css- map检测 cssMap 对象中未使用的样式,以帮助保持代码清洁 .对
首选项通过代码提示来提高对原始组件的认识. 严格用于教育目的和可发现性.
使用按钮组标签确保按键组通过直接标签或其他元素来描述辅助技术.对对
使用-特征-对接字段当 Textfield 或 Textrea 组件有 maxLength 或 minLength 道具时, 使用 CharlieCounter 字段或 CharlieCounter 的建议 .对
使用校正字段确保决策者使用适当的外地构成部分来进行各自的形式要素.对对对
使用-cx-函数值xcs执行 cx 函数在 xcs 中用于组合样式.对对对
使用时间 - 取号 - 日历 - 按钮鼓励制造商在Atlassian设计系统的取日期器和取日期器组件中使用日历按钮.对对对
使用绘图标签鼓励提供Atlassian设计系统绘图器组件的无障碍名称.对对
用户字段-消息-包装器鼓励在使用窗体消息组件时使用消息包组件.对对
使用标题鼓励使用标题组件.对对对
部门内的信息这个 SectionMessage 构成部分 @atlaskit/section-message 需要为文档流中的正确级别。 这并不是可以自动化的东西,需要从背景上了解经验.对对
使用头级点光卡告知开发者最终要求 headingLevel 道具输入 SpotlightCard 组件。 根据周围情况,标题级别应当是适当的级别.对对
链接中的项目告知开发者最终要求 href 道具输入 LinkItem 组件。 要点a link 作用要求 href 用户正确导航的属性,特别是那些使用辅助技术的用户。 如果无效 href 您需要使用此选项, 请考虑使用 ButtonItem 换句话说.对对对
最新语法在xcs中强制使用空间设计符而不是硬编码值.对对
使用最晚的xcs-语法-打字法禁止在 xcs 中使用不安全的样式属性 。 请使用文本/ 标题原始 .对对
使用菜单部分标题鼓励制造商为Atlassian设计系统菜单部分提供无障碍标题.对对
使用模式-对话框-关闭按钮鼓励制造商在Atlassian设计系统模式对话框组件中使用关闭按钮.对对对
使用方式标题4. 鼓励决策者将 ModalTitle 在内部 ModalHeader 当使用Atlassian设计系统模式对话框时.对
用-登机-点光-标签确保登入聚光灯对话框通过直接标签或其他元素描述辅助技术.对对
使用流行标签鼓励为Atlassian设计系统弹出组件提供无障碍名称.对对
使用可压缩运动当可按键或本地按钮通过本地静态样式改变交互颜色时,建议语义运动符号.对
使用原始文本鼓励使用文本组件.对对对
使用 - 应服从 - 对父母鼓励制造商利用 shouldRenderToParent 在可能的情况下在Atlassian设计系统中 Popup 财务报告和审定财务报表 DropdownMenu 组件.对对
简单字段鼓励利用简单的领域,改善开发者的经验和无障碍环境.对对
简单形式鼓励采用简单形式,使开发者获得更好的经验和便利.对对
使用点光包请各位注意.对对
使用标签组标签确保标签组通过直接标签或其他元素来描述辅助技术.对对
使用文本字段- 自动完成强制执行类型="电子邮件","tel",或"url"的Textfield组件对WCAG 2.2 SC 1.3.5 兼容性(识别输入目的)具有适当的自动完成值.对对
用户强制使用运动设计符号而不是硬码持续时间并放宽值.对
键形强制使用形状设计符号而不是硬码值.对对
用户按键空间强制使用空间设计符号而不是硬码值.对对
用户名强制使用用于打字属性而不是硬码值的设计符.对对对
隐藏的强制使用隐形组件.对对

版本与发布记录

@atlaskit/eslint-plugin-design-system 共发布 431 个版本,首次发布于 2021/07/02;过去 12 个月发布了 109 个版本。

版本发布日期距今
16.16.0latest2026/11/043 天前
16.15.02026/11/025 天前
16.14.42026/10/308 天前
16.14.32026/10/299 天前
16.14.22026/10/299 天前
16.14.12026/10/299 天前

其他发布通道:next → 11.0.0。

关于 @atlaskit/eslint-plugin-design-system 的常见问题

@atlaskit/eslint-plugin-design-system 是什么?

与Atlassian设计系统一起使用的必要插件.

如何安装 @atlaskit/eslint-plugin-design-system?

在项目目录运行 npm install @atlaskit/eslint-plugin-design-system,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:react(^18.2.0 || ^19.0.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@atlaskit/eslint-plugin-design-system 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@atlaskit/eslint-plugin-design-system 支持 ESM 还是 CommonJS?

同时提供 ES Module 与 CommonJS 入口,import 和 require() 都可以使用,打包工具会自动选择合适的版本。

@atlaskit/eslint-plugin-design-system 可以商用吗?

@atlaskit/eslint-plugin-design-system 使用 Apache-2.0 许可。宽松许可:允许商业使用、修改和再分发,并附带明确的专利授权;分发时需保留许可与 NOTICE 文件,修改过的文件要注明改动。以上为概括,不构成法律意见,请以许可原文为准。

@atlaskit/eslint-plugin-design-system 的下载量有多少?

根据 npm 官方下载统计,@atlaskit/eslint-plugin-design-system 在 2026/10/07 – 2026/11/05 这 30 天内被下载 27,100 次,日均约 903 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@atlaskit/eslint-plugin-design-system 还在维护吗?

最新版本 16.16.0 发布于 2026/11/04(3 天前);至今共发布 431 个版本,其中过去 12 个月发布了 109 个;首次发布于 2021/07/02。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。