@atlaskit/eslint-plugin-design-system

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

The essential plugin for use with the Atlassian Design System.

原始使用文档
文档目录3 节
  1. Installation
  2. Configuration
  3. Rules

Design System ESLint Plugin

This plugin contains rules that should be used when working with the Atlassian Design System.

Installation

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

Configuration

Use the recommended config to get reasonable defaults recommended by the Atlassian Design System:

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

We don't recommended maintaining your own configuration. If you do not use our config you will need to specify individual rules and configuration. Add the plugin to your eslint.config.cjs file.

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

Enable the rules that you would like to use.

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

Rules

RuleDescriptionRecommendedFixableSuggestions
consistent-css-prop-usageEnsures consistency with css and xcss prop usagesYesYes
enforce-inline-styles-in-selectDisallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only
ensure-avatar-tag-avatar-propsEnsures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally.Yes
ensure-design-token-usageEnforces usage of design tokens rather than hard-coded values.YesYesYes
ensure-design-token-usage/previewEnforces usage of pre-release design tokens rather than hard-coded values.YesYes
ensure-icon-colorEnforces that upcoming icon components have a color prop set, to enable a migration of the default value.
ensure-proper-xcss-usageEnforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys.
expand-motion-shorthandExpands transition and animation CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.Yes
icon-labelEnforces accessible usage of icon labels when composed with Atlassian Design System components.YesYes
lozenge-badge-tag-labelling-system-migrationMigrates legacy Lozenge and Badge appearance values and guides SimpleTag/RemovableTag migrations to the supported Tag APIs.Yes
no-banned-importsDisallow importing banned modules.Yes
no-css-map-scopedDisallows usage of the experimental cssMapScoped API from @compiled/react. This API is internal and is not part of the public Compiled CSS-in-JS interface.Yes
no-css-tagged-template-expressionDisallows any css tagged template expressions that originate from Emotion, Styled Components or CompiledYes
no-dark-theme-vr-testsDisallow using dark colorScheme in VR tests.Yes
no-deprecated-apisDisallow using deprecated APIs.Yes
no-deprecated-design-token-usageDisallow using deprecated design tokens.YesYes
no-deprecated-importsDisallow importing deprecated modules.YesYesYes
no-direct-use-of-web-platform-drag-and-dropDisallow using direct use of native drag and drop (please use Pragmatic drag and drop)Yes
no-emotion-primitivesEnsures usage of Compiled Primitives import instead of Emotion entrypoint.Yes
no-empty-icon-button-labelEnsures icon-only Atlassian Design System buttons do not have an empty accessible name.Yes
no-empty-styled-expressionForbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).
no-exported-cssForbid exporting css function calls. Exporting css function calls can result in unexpected behaviour at runtime, and is not statically analysable.
no-exported-keyframesForbid exporting keyframes function calls. Exporting css function calls can result in unexpected behaviour at runtime, and is not statically analysable.
no-global-z-indexDisallow z-index values above 10. Global layer ordering is handled by the browser top layer.
no-html-anchorDiscourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.YesYes
no-html-buttonDiscourage direct usage of HTML button elements in favor of Atlassian Design System button components.Yes
no-html-checkboxDiscourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component.YesYes
no-html-codeDiscourage direct usage of HTML code elements in favor of the Atlassian Design System code component.YesYes
no-html-headingDiscourage direct usage of HTML heading elements in favor of Atlassian Design System heading components.YesYes
no-html-imageDiscourage direct usage of HTML image elements in favor of the Atlassian Design System image component.YesYes
no-html-radioDiscourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component.YesYes
no-html-rangeDiscourage direct usage of HTML range elements in favor of the Atlassian Design System range component.YesYes
no-html-selectDiscourage direct usage of HTML select elements in favor of the Atlassian Design System select component.YesYes
no-html-text-inputDiscourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component.YesYes
no-html-textareaDiscourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component.YesYes
no-icon-spacing-propDisallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead.YesYes
no-invalid-css-mapChecks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.Yes
no-keyframes-tagged-template-expressionDisallows any keyframe tagged template expressions that originate from Emotion, Styled Components or CompiledYes
no-marginDisallow using the margin CSS property.
no-modal-labelDisallows usage of the label prop on Atlassian Design System modal dialog and modal entry-point triggers.Yes
no-native-popover-or-dialogDisallow native popover and <dialog> elements. Use a Design System component, or @atlaskit/top-layer if no Design System component fits.
no-nested-stylesDisallows use of nested styles in css functions.Yes
no-physical-propertiesDisallow physical properties and values in css and cssMap function calls.Yes
no-placeholderPlaceholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead.Yes
no-readonly-or-disabled-inputsInputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by a more user-friendly design pattern.Yes
no-separator-with-list-elementsWarn when the separator prop is used with as="li", as="ol", or as="dl" in the Inline component.Yes
no-styled-tagged-template-expressionDisallows any styled tagged template expressions that originate from Emotion, Styled Components or CompiledYes
no-third-party-focus-trapsDisallow third-party focus trap libraries, such as react-focus-lock and focus-trap. Design System layering components manage focus.
no-third-party-layeringDisallow third-party layering libraries, such as Popper.js and Floating UI. Use a Design System layering component or @atlaskit/top-layer.
no-to-match-snapshotDisallow using toMatchSnapshot() and toMatchInlineSnapshot() in unit tests. Snapshot assertions should be replaced with explicit assertions.
no-unsafe-design-token-usageEnforces design token usage is statically and locally analyzable.YesYes
no-unsafe-inline-snapshotEnforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.
no-unsafe-style-overridesDiscourage usage of unsafe style overrides used against the Atlassian Design System.Yes
no-unsupported-drag-and-drop-librariesDisallow importing unsupported drag and drop modules.Yes
no-unused-css-mapDetects unused styles in cssMap objects to help keep code clean.Yes
prefer-primitivesIncrease awareness of primitive components via code hints. Strictly used for education purposes and discoverability.
use-button-group-labelEnsures button groups are described to assistive technology by a direct label or by another element.YesYes
use-character-counter-fieldSuggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.Yes
use-correct-fieldEnsure makers use appropriate field component for their respective form elements.YesYesYes
use-cx-function-in-xcssEnforces cx function use to combine styles in xcss.YesYesYes
use-datetime-picker-calendar-buttonEncourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components.YesYesYes
use-drawer-labelEncourages to provide accessible name for Atlassian Design System Drawer component.YesYes
use-field-message-wrapperEncourage use of message wrapper component when using form message components.YesYes
use-headingEncourage the usage of heading components.YesYesYes
use-heading-level-in-section-messageThe SectionMessage component in @atlaskit/section-message needs to be the correct level within the document flow. This is not something that can be automated and requires contextual knowledge of what is present in the experience.YesYes
use-heading-level-in-spotlight-cardInform developers of eventual requirement of headingLevel prop in SpotlightCard component. The heading level should be the appropriate level according to the surrounding context.YesYes
use-href-in-link-itemInform developers of eventual requirement of href prop in LinkItem component. Elements with a link role require an href attribute for users to properly navigate, particularly those using assistive technologies. If no valid href is required for your use case, consider using a ButtonItem instead.YesYesYes
use-latest-xcss-syntaxEnforces usage of space design tokens rather than hard-coded values in xcss.YesYes
use-latest-xcss-syntax-typographyProhibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead.YesYes
use-menu-section-titleEncourages makers to provide accessible title for Atlassian Design System Menu Section component.YesYes
use-modal-dialog-close-buttonEncourages makers to use close button in Atlassian Design System's modal dialog component.YesYesYes
use-modal-titleEncourages makers to include ModalTitle within ModalHeader when using Atlassian Design System modal dialog.Yes
use-onboarding-spotlight-labelEnsures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element.YesYes
use-popup-labelEncourages to provide accessible name for Atlassian Design System Popup component.YesYes
use-pressable-motionSuggests semantic motion tokens when Pressable or native buttons change interactive colours through local static styles.Yes
use-primitives-textEncourage the usage of text components.YesYesYes
use-should-render-to-parentEncourages makers to use the shouldRenderToParent where possible in Atlassian Design System Popup and DropdownMenu components.YesYes
use-simple-fieldEncourage use of simple field for better developer experience and accessibility.YesYes
use-simple-formEncourage use of simple form for better developer experience and accessibility.YesYes
use-spotlight-packageDiscourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.YesYes
use-tag-group-labelEnsures tag groups are described to assistive technology by a direct label or by another element.YesYes
use-textfield-autocompleteEnforce that Textfield components with type="email", "tel", or "url" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).YesYes
use-tokens-motionEnforces usage of motion design tokens rather than hard-coded duration and easing values.Yes
use-tokens-shapeEnforces usage of shape design tokens rather than hard-coded values.YesYes
use-tokens-spaceEnforces usage of space design tokens rather than hard-coded values.YesYes
use-tokens-typographyEnforces usage of design tokens for typography properties rather than hard-coded values.YesYesYes
use-visually-hiddenEnforce usage of the visually hidden component.YesYes

版本与发布记录

@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 是什么?

The essential plugin for use with the Atlassian Design System.

如何安装 @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 和提交记录判断。