设计系统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 兼容性(识别输入目的)具有适当的自动完成值. | 对 | 对 | |
| 用户 | 强制使用运动设计符号而不是硬码持续时间并放宽值. | 对 | ||
| 键形 | 强制使用形状设计符号而不是硬码值. | 对 | 对 | |
| 用户按键空间 | 强制使用空间设计符号而不是硬码值. | 对 | 对 | |
| 用户名 | 强制使用用于打字属性而不是硬码值的设计符. | 对 | 对 | 对 |
| 隐藏的 | 强制使用隐形组件. | 对 | 对 |