@duro-app/slint-plugin (英语)
执行杜罗设计系统常规的ESLint规则—— cLAUDE. MD只能建议这些规则门.
需要 ESLint 9(平面配置) 。 该插件具有零运行时间依赖性.
使用量
// eslint.config.js
import duro from '@duro-app/eslint-plugin'
import tseslint from 'typescript-eslint'
export default [
...tseslint.configs.recommended,
duro.configs.recommended,
{
rules: {
// Example: a data grid the design system doesn't cover yet.
'duro/no-raw-html-element': ['error', {allow: ['table', 'thead', 'tbody', 'tr', 'th', 'td']}],
},
},
]
这个 recommended 预设在 duro 命名空间,所以
你不必亲自登记 也不要手动登记
另一把钥匙——你会得到两个活的名字空间和混淆的配置.
规则
| 规则 | 预设 | 修补 |
|---|---|---|
duro/no-raw-html-element | 错误 | 建议 |
duro/no-tokens-barrel-import | 错误 | 自动修正 |
duro/no-deprecated-table-parts | 错误 | 自动固定/ 建议 |
duro/no-raw-design-values | 错误 | 建议 |
duro/no-raw-layer-values | 警告( e) | 建议 |
duro/no-raw-breakpoint-query | 错误 | 自动修正 |
无浏览- html- 元素
原小写 JSX 内在<div>, (中文(简体) ), <span>,.)必须反应限制度
html.* 要素。 SVG子树被豁免(RSD没有SVG原始种).
元素 RSD 不导出(<table>, (中文(简体) ), <canvas>(.) 报告为非便携式;
允许通过 allow重写是一个建议,
不是自动修补,因为 html.* 道具比原始的DOM道具更为严格——a
机械 --fix 可以将错误换成类型错误.
选项 : {allow?: string[], reportUnsupported?: boolean, htmlModule?: string}
无托肯-管-进口
import {colors} from '@duro-app/tokens' 打破 StyleX bail 插件。 这个
自动固定将枪管导入分割为右深导入
(单位:千美元)@duro-app/tokens/tokens/colors.css,...),保留别名并内含
type 示众. 输入任何未标记的无固定标记的报告 .
选项 : {packages?: string[]}
无折旧表部分
旗帜 <Table.Container> (Root拥有现在的容器查询;只报告) -
解围是无法自动化的布局 - 不安全) 和 无操作 isActions 打开道具
<Table.HeaderCell> (文字值自动修正
值是一个表达式)。 以标识符名称匹配( N)Table, (中文(简体) ), TableCore 以
默认)——通过 tableIdentifiers。 。 。 .
无绘图设计值
内部 css.create() 对象,原始设计值就是发现——任何东西
与物证等价物, 和任何在有证物的财产上
缩放 :
-
颜色 - 十六进制/
rgb()编号 :hsl()随处出字. 调色板值 建议colors.*符号; 一个不固定的平板报告 . -
间距和半径 数字或
'Npx'粘贴/边距/差距 家庭状况spacing.*在边境线上radii.*。在 缩放表示符号; 从缩放缩放缩放marginTop: 23它报告—— "不是象征"才是重点. -
断点 内出血
'@media …'编号 :'@container …'条件 键。 在比例上它建议计算出的密钥[`@media (min-width: ${breakpoints.md})`]和导入. -
字体大小 (数目,
px或者说rem页:1typography.fontSize*或,用于 步骤打字缺乏,typeScale.fontSizeN· ; 字体重量 400-700 — (单位:千美元)typography.fontWeight*· ;boxShadow→shadows.*确切的匹配, 报告;transitionDuration编号 :animationDuration'Nms'→duration.*· ; 时间函数 →easing.*。 。 。 . -
大小和边框宽度 (自5.0起,ADR-0027)——一个数字,
'Npx'或者说 负数width编号 :height及其分数/分数,flexBasis,块/内置 大小; 打开border*Width, (中文(简体) ),outlineWidth, (中文(简体) ),outlineOffset; 宽度 内置 aborder*或者说outline缩写字符串。 每个财产都来自 其候选人:人数sizes.*; 边宽borders.hairline / strong / accent; 大纲宽度 *borders.focusRing页:1borders.focusOffset / focusOffsetSm5.2 候选人人数 属性轴: a…W编号 :…MinW编号 :…MaxW符号只提供于 a 宽度属性, a…H编号 :…MinH编号 :…MaxH只在一高一高处 二者的无后缀符号(flexBasis(用两个) 有一场比赛建议 (负为calc(-1 * …))),数个分别给出一个建议. 无时 匹配,信件名称为 最近的动作: 每根同轴符号 ±10%范围内的最近值(width: 232→sizes.gridColSm, (中文(简体) ),sizes.sidebarW, (中文(简体) ),sizes.popoverWSm(240)),两个价值相等时 两者都列出,先缩小。 只有在没有那么接近的时候 上面写着要加个符号 A 类calc()或模板文字,其静态文本 持有px的报告. -
boxShadow在模板文字中 (自5.2起)——其px长度为: 静态文本( e)`inset 0 0 0 1px ${colors.border}`)是生阴影;使用 (单位:千美元)shadows.*符号 . -
微间距 - 离标间隔为1/2/3/5/6px
microSpacing.pxN。 。 。 .
允许 : 0相对单位(%, (中文(简体) ), vh, (中文(简体) ), fr, (中文(简体) ), em, (中文(简体) ), rem, (中文(简体) ), ch...),关键词
(单位:千美元)auto, (中文(简体) ), max-content),标识符和成员表达式(tokens),a
calc() 以示纪念。 故意跳过: 间隔属性的负数,
'opacity 150ms'- 类型过渡和职位top, (中文(简体) ), left和
lineHeight自3.0起,它作为 error: 一个原始值是漂移
设计系统存在以停止.
简称 (自5.7起) (中文(简体) ). 间隔或半径字符串, 有多个单词
(单位:千美元)padding: '4px 8px', (中文(简体) ), gap: '8px 16px')在白空间和每个空间上分割
检查非零 px 单值为: '4px 8px' 给两个
报告, '6px 14px' 给 rawMicroSpacing 财务报告和审定财务报表 offScaleSpacing。 。 。 . 0, (中文(简体) ),
auto, (中文(简体) ), %, (中文(简体) ), rem, (中文(简体) ), em, (中文(简体) ), var(...) 财务报告和审定财务报表 calc(...) 语出相传. 简称
报告载 无建议因为交换一个字会改写
整个字符串; 信件为每个单词命名符号 .
内嵌样式 (自5.7起) (中文(简体) ). A 类 style={{ ... }} 任何 JSX 上的对象字元
元素读取为 css.create 样式,所以是原始颜色,字体大小,重量,
以简写方式报告计量或px。 这些报告载有: 没有
建议,因为纯反应代码没有 .css.ts 符号导入
信件仍然为符号命名 . style={styles.x}、数组、标识符和
扩展被忽略,自定义属性密钥也被忽略('--wb-vw': '12px'和
计算键。 设定 inlineStyle: false 把它关掉.
选项 : {factories?: string[], spacingProperties?: string[], radiiProperties?: string[], exemptFiles?: string[], inlineStyle?: boolean}
(财产列表取代了默认,它们不合并). inlineStyle
默认为 true。 。 。 . exemptFiles 带
阴影( g)**, (中文(简体) ), *, (中文(简体) ), ?, (中文(简体) ), {a,b},与路径相对比对
工作目录和绝对路径; 未检查匹配文件 。 名称
只有一个文件,其字面意思是技术,而不是设计值——杜罗名
它的隐形模块.
无线层值
从 5.3. 内部 css.create() 对象 :
zIndex数字或数字字符串0和负数。 A 类 层值表示它的符号(zIndex: 1000→layers.overlay, (中文(简体) ),1050→layers.popup; 任何其他值名称它所坐落的地层,没有 固定( e)zIndex: 16* 之间layers.raised(1)和layers.floating联合国. 自5.4起,从2最多localMax(默认)9未报告 : 它命令儿童在一个组成部分内,这个组成部分不是一层(1实值layers.raised并保留其建议).backdropFilter编号 :filtera 包括:blur(...)字义.blur(2px)建议effects.overlayBlur, (中文(简体) ),blur(6px)第5.4条effects.surfaceBlur· ; 又一个模糊的报告,没有固定.
它的船作为 warn 用于5.x行所以,没有消费者的花 变成红色在一
并成为 error 下一个主要项目这是它自己的规则
从 no-raw-design-values,因为ESLint设定了每个规则的严厉性.
不报告本地堆放是规则的范围,而不是豁免
ADR-0027:z指数不是衡量标准之一
design-system.every-measure-is-a-token 制作一个符号(相距、半径、大小,
边框宽度). localMax 上限为 49,以下数字 layers.floating (50个),所以
跳跃从未达到一层; {localMax: 0} 报告每一个积极价值.
选项 : {factories?: string[], exemptFiles?: string[], localMax?: number}
无断点平滑
在文件的任何地方,一个媒体-克赖克字符串—— useMediaQuery('(min-width: 768px)'), (中文(简体) ), matchMedia(...),一个常数——带有一个原始断点
no-raw-design-values 永不见(只读作: css.create) (中文(简体) ). 在规模上
自动修正字元重写为 `(min-width: ${breakpoints.md})` 财务报告和审定财务报表
添加导入(a) css.defineConsts 字符串,所以它插到
'768px'),其报告的规模外. 跳过 css.create 键,然后跳过
当一个本地 breakpoints 绑定会阴影导入 .
存储数据
规则数据(深路径图、间隔/辐射/断点px值、字体)
尺寸和重量、阴影、持续时间、放松、彩色调色板)为镜像
从 @duro-app/tokens 作为文字, 所出版的插件将保留
无依赖性. test/token-drift.test.ts 从真实中重建每个表格
符号包和漂移时的 CI 失败 .
仅 test/ 进口 @duro-app/tokens· ; src/ 从来没有。 词根 prepare
脚本依赖于此: 它以并行方式构建此插件和令牌包
(单位:千美元)pnpm --no-sort) (中文(简体) ). 若为 src/ 曾进口 @duro-app/tokens减少 --no-sort
,或者一个新安装可以在读取符号之前构建插件 .