# @atlaskit/eslint-plugin-ui-styling-standard 中文文档

规范地址：https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/

版本：3\.0\.4
npm 元数据更新时间：2026-11-02T05:44:50.811Z
中文译文更新时间：2026-11-07T03:19:42.117Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40atlaskit/eslint-plugin-ui-styling-standard
原文对照：https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/?lang=original
项目主页：https://atlassian.design/components/eslint-plugin-ui-styling-standard
源码仓库：https://bitbucket.org/atlassian/atlassian-frontend-mirror

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：639 kB，217 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：12 个
- 首次发布：2024-01-10T07:03:13.049Z
- 最新版本发布：2026-11-02T05:44:50.633Z
- 近 30 天下载量：3576（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：101（近 12 个月 29 个）

## 中文简介

用于执行和教育Atlassian UI Styling 标准的 Eslint 插件

## 安装

```sh
npm install @atlaskit/eslint-plugin-ui-styling-standard
```

也可以使用：`pnpm add @atlaskit/eslint-plugin-ui-styling-standard`、`yarn add @atlaskit/eslint-plugin-ui-styling-standard`、`bun add @atlaskit/eslint-plugin-ui-styling-standard`

## README

# UI Styling 标准 ESLint 插件

UI Styling标准是一套原则,用于指导图集前端的UI代码 代码库和生态系统.

这些是目前的ESLint规则,它们执行并帮助遵守今天的UI Styling标准, 但计划更多时间支持标准.

## 安装

您必须使用推荐的配置来遵循Atlassian的造型标准,这将确保 与设计系统的兼容性和性能.

```diff
module.exports = {
  extends: [
+    'plugin:@atlaskit/ui-styling-standard/recommended',
  ],
};
```

我们不建议维持你的配置 如果你不使用我们的配置,你将需要 指定单个规则和配置。 将插件添加到您的 `eslint.config.cjs` 文档和 允许个人规则,因为你准备采纳.

```diff
module.exports = {
  plugins: [
+    '@atlaskit/ui-styling-standard',
  ],
  rules: [
+    '@atlaskit/ui-styling-standard/convert-props-syntax': 'warn',
+    '@atlaskit/design-system/local-cx-xcss': 'error',
  ],
};
```

## 规则

| 规则 | 说明 | 建议 | 可修复 | 建议 |
| --- | --- | --- | --- | --- |
| [阿特拉斯基特主题](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/atlaskit-theme/README.md) | 禁止使用 `@atlaskit/theme` 那个 `@compiled/react` 无法理解 |  |  |  |
| [转换正则语法](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/convert-props-syntax/README.md) | 将样式- 组件- QQ4 或 @ emotion/ styled 所支持的道具语法转换为道具语法 。 结合 `no-styled-tagged-template-expression`,因为后者的产出可能使用这些库不支持的道具语法. | 对 | 对 |  |
| [执行风格道具](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/enforce-style-prop/README.md) | 停止使用静态样式 `style` 组件中的属性 | 对 |  |  |
| [本地密码](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/local-cx-xcss/README.md) | 确保作为 XCSS API 的一部分的 cx () 函数只在 xcs 道具内使用 。 这种辅助跟踪对jsx元素应用的样式. | 对 |  |  |
| [无阵列参数](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-array-arguments/README.md) | 防止使用数组参数来样式化声明函数 | 对 | 对 |  |
| [无阿特拉斯基特主题](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-atlaskit-theme/README.md) | 取消从 `@atlaskit/theme` | 对 |  |  |
| [无类名道具](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-classname-prop/README.md) | 放弃使用 `className` jSX中的道具 | 对 |  |  |
| [无容器](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-container-queries/README.md) | 防止使用 Css 样式中的@ container 查询 | 对 |  |  |
| [无动力风格](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-dynamic-styles/README.md) | CSS- in- JS 调用中使用动态样式 | 对 |  |  |
| [无出口型](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-exported-styles/README.md) | 取消 Cs 、 密钥框、 样式和 xcs 的导出 | 对 |  |  |
| [无全球风格](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-global-styles/README.md) | 通过 CSS- in- JS 或 CSS 模块导入来防止全局样式 | 对 |  |  |
| [无重要风格](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-important-styles/README.md) | 否定重要的风格声明 | 对 |  |  |
| [无输入型值](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-imported-style-values/README.md) | 取消样式值的导入 | 对 |  |  |
| [无记名选择者](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-nested-selectors/README.md) | 防止在 Css 样式内使用嵌入式选择器 | 对 |  |  |
| [无类型](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-styled/README.md) | 放弃使用 `styled` 进口 | 对 |  |  |
| [无安全选择者](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-unsafe-selectors/README.md) | 拒绝使用嵌入式 `css` 函数. | 对 | 对 | 对 |
| [无安全值](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-unsafe-values/README.md) | 对静态安非他明来说难以/不可能的去盐风格. | 对 |  |  |
| [无未用csmap-财产](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/no-unused-cssmap-properties/README.md) | 检测不导出 cssMap 样式对象中未使用的属性。 通过识别定义但从未使用的样式变体,帮助维护清洁代码. | 对 |  |  |
| [使用编译](https://npmcn.com/package/%40atlaskit/eslint-plugin-ui-styling-standard/packages/design-system/eslint-plugin-ui-styling-standard/src/rules/use-compiled/README.md) | 确保使用 `@compiled/react` 或者说 `@atlaskit/css` 而不是其他 CSS- in- JS 图书馆 | 对 | 对 |  |
| [@atlaskit/design-system/ consistent-cs-prop-usage (英语)](https://atlassian.design/components/eslint-plugin-ui-styling-standard/consistent-css-prop-usage/usage) | 确保与 `css` 财务报告和审定财务报表 `xcss` 道具用途 | 对 | 对 |  |
| [@atlaskit/design-system/ no-cs-tign-template-expression (英语)](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-css-tagged-template-expression/usage) | 拒绝任何 `css` 源自情感、样式组件或编译的被标记的模板表达式 | 对 | 对 |  |
| [@atlaskit/design-system/ no-keyframes-tagn-template-expression (没有键框标记-模板-表达式)](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-keyframes-tagged-template-expression/usage) | 拒绝任何 `keyframe` 源自情感、样式组件或编译的被标记的模板表达式 | 对 | 对 |  |
| [@atlaskit/design-system/无标签-tigg-template-expression 页面存档备份,存于互联网档案馆](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-styled-tagged-template-expression/usage) | 拒绝任何 `styled` 源自情感、样式组件或编译的被标记的模板表达式 | 对 | 对 |  |
| [@atlaskit/design-system/没有空格式的表达](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-empty-styled-expression/usage) | 禁止任何在将空参数传递到样式.div () (或其他JSX元素)时使用的样式表达式 . | 对 |  |  |
| [@atlaskit/design-system/ no-invalid-cs-map (英语)](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-invalid-css-map/usage) | 检查通过 assMap 创建的 CSS 映射的有效性。 此功能意在与 TypeScript 的类型检查同时使用 . | 对 |  |  |
| [@atlaskit/design-system/no-css-map-scoped (英语)](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-css-map-scoped/usage) | 实验用途的减少 `cssMapScoped` API 来自 `@compiled/react`。这个API是内部的,不是公共编译的CSS-in-JS接口的一部分. | 对 |  |  |

## 常见问题

### @atlaskit/eslint-plugin-ui-styling-standard 是什么？

用于执行和教育Atlassian UI Styling 标准的 Eslint 插件

### 如何安装 @atlaskit/eslint-plugin-ui-styling-standard？

在项目目录运行 npm install @atlaskit/eslint-plugin-ui-styling-standard，或使用 pnpm add / yarn add / bun add。

### @atlaskit/eslint-plugin-ui-styling-standard 支持 TypeScript 吗？

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

### @atlaskit/eslint-plugin-ui-styling-standard 支持 ESM 还是 CommonJS？

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

### @atlaskit/eslint-plugin-ui-styling-standard 可以商用吗？

@atlaskit/eslint-plugin-ui-styling-standard 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @atlaskit/eslint-plugin-ui-styling-standard 的下载量有多少？

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

### @atlaskit/eslint-plugin-ui-styling-standard 还在维护吗？

最新版本 3\.0\.4 发布于 2026/11/02（5 天前）；至今共发布 101 个版本，其中过去 12 个月发布了 29 个；首次发布于 2024/01/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。