@aphrody/eslint-plugin-m3 (英语)
Lint 规则,用于使用材料网络的代码(@aphrody/m3-react Md* 包装器, md-* 页:1 bun lint (单位:千美元)jsPlugins)或ESLint兼容主机.
bun add -d @aphrody/eslint-plugin-m3
{
"jsPlugins": ["./node_modules/@aphrody/eslint-plugin-m3/index.js"],
"rules": {
"m3/valid-icon-name": "error",
"m3/valid-color-role": "error",
"m3/no-sx-prop": "error",
"m3/no-mui-prop-on-md": "error",
"m3/no-mui-import": "warn",
"m3/prefer-icon-token": "warn",
"m3/require-icon-button-label": "warn",
"m3/no-hardcoded-color": "warn"
}
}
这是 .oxlintrc.json 页:1 bun lint; 数据 jsPlugins 路径相对于该文件。 普通的无害环境管理,不转录.
许可证: Apache-2.0(LICENSE) (中文(简体) ). 安装指南 : 文件/材料/立方米/INSTALL.md。 。 。 .
它与对 @aphrody/m3-codemods: 编码器留下的 MIGRATION-TODO这些规则继续捕捉.
第(8)条
| 规则 | 职等 | 修补 | 接头 |
|---|---|---|---|
m3/valid-icon-name | 错误 | 自动 | <md-icon> 编号 : <MdIcon> 文本不是材料符号; 修正 MUI PascalCase 所剩的文本( 对照 4253 格Delete) (中文(简体) ). |
m3/valid-color-role | 错误 | - 说吧 | var(--md-sys-color-<role>) 带有角色素材-web不出(typos,MUI或Tailwind名);建议最接近的角色. |
m3/no-sx-prop | 错误 | - 说吧 | sx 一个 md-* 元素,在无效果的情况下 className 财务报告和审定财务报表 --md-sys-* 标志. |
m3/no-mui-prop-on-md | 错误 | 自动 | 包装上留下的MUI道具名称(checked 改为 selected, (中文(简体) ), title 改为 text, (中文(简体) ), open 改为 opened, (中文(简体) ), value 改为 activeTabIndex) (中文(简体) ). |
m3/no-mui-import | 警告( e) | - 说吧 | 剩余 @mui/material, (中文(简体) ), @mui/icons-material 或者说 @mui/x-* 进口. |
m3/prefer-icon-token | 警告( e) | - 说吧 | 内入 fontVariationSettings 图标上; 使用 --md-icon-fill, (中文(简体) ), --md-icon-wght, (中文(简体) ), --md-icon-grad, (中文(简体) ), --md-icon-opsz。 。 。 . |
m3/require-icon-button-label | 警告( e) | - 说吧 | 无可访问名称的图标按钮( E)aria-label, (中文(简体) ), aria-labelledby, (中文(简体) ), title; WCAG 4.1.2. (中文(简体) ). |
m3/no-hardcoded-color | 警告( e) | - 说吧 | 硬码 #hex 编号 : rgb() 内 style 或者说 sx 一、导 言 md-* 元素; 使用 a var(--md-sys-color-*) 角色。 。 . |
bun lint --fix 应用两个自定义(valid-icon-name, (中文(简体) ), no-mui-prop-on-md) (中文(简体) ).
预设( ESLint平面配置)
import m3 from "@aphrody/eslint-plugin-m3";
export default [m3.configs.recommended]; // or m3.configs.strict: every rule as an error
发展
bun test/run.ts # bun lint over the fixtures (every rule fires on bad, none on good)
bun scripts/sync-symbol-names.ts # regenerate data/material-symbols-names.js
格莱克列表( :data/material-symbols-names.js)产生自 ../m3-codemods/data/material-symbols-names.json
(官方代码: google/material-design-icons, Apache-2.0; (中文(简体) ); prepack 运行同步 .