@compiled/eslint-plugin

中文文档
0.20.2发布于 2026/09/16Apache-2.0TypeScriptESM + CJS近 30 天下载 1981

A familiar and performant compile time CSS-in-JS library for React.

原始使用文档
文档目录5 节
  1. Installation
  2. Usage
  3. Flat Config
  4. Legacy Config ( .eslintrc )
  5. Supported rules

@compiled/eslint-plugin

This plugin contains rules that should be used when working with @compiled/react.

Installation

npm install @compiled/eslint-plugin --save-dev

Usage

Flat Config

Import the @compiled/eslint-plugin and add it to your plugins like so, then configure the rules you want to use under the "Supported rules" section.

import compiled from '@compiled/eslint-plugin';

export default [
  {
    plugins: {
      '@compiled': compiled,
    },
    rules: {
      '@compiled/no-js-xcss': 'error',
    },
  },
];

You can also enable the recommended rules for compiled by extending the flat/recommended config like so:

import compiled from '@compiled/eslint-plugin';

export default [compiled.configs['flat/recommended']];

Legacy Config (.eslintrc)

Add @compiled to the plugins section of your .eslintrc configuration file, then configure the rules you want to use under the rules section.

{
  "plugins": ["@compiled"],
  "rules": {
    "@compiled/no-js-xcss": "error"
  }
}

You can also enable the recommended rules for compiled by adding plugin:@compiled/recommended in extends:

{
+  "extends": ["plugin:@compiled/recommended"],
-  "plugins": ["@compiled"]
}

Supported rules

✅ Included in the recommended configuration.
🔧 Automatically fixable by the --fix CLI option.\

NameDescriptionRecommendedFixable
@compiled/jsx-pragmaEnforces a jsx pragma when using the css prop🔧
@compiled/local-cx-xcssEnsures the cx() function is only used within the xcss prop✅
@compiled/no-css-prop-without-css-functionDisallows css prop usages where it is either not wrapped in the css import from @compiled/react or where @compiled cannot determine whether the css import is included at build time.✅🔧
@compiled/no-css-tagged-template-expressionDisallows the css tagged template expression✅🔧
@compiled/no-emotion-cssDisallows @emotion usages🔧
@compiled/no-empty-styled-expressionDisallows any styled expression to be used when passing empty arguments in @compiled/react✅
@compiled/no-exported-cssDisallows css usages from being exported✅
@compiled/no-exported-keyframesDisallows keyframes usages from being exported✅
@compiled/no-invalid-css-mapChecks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.✅
@compiled/no-js-xcssThe xcss prop is predicated on adhering to the type contract. Using it without TypeScript breaks this contract and thus is not allowed.✅
@compiled/no-keyframes-tagged-template-expressionDisallows the keyframes tagged template expression✅🔧
@compiled/no-styled-tagged-template-expressionDisallows the styled tagged template expression✅🔧
@compiled/no-suppress-xcssThe xcss prop is predicated on adhering to the type contract. Supressing it breaks this contract and thus is not allowed.✅
@compiled/shorthand-property-sortingPrevent unwanted side-effects by ensuring shorthand properties are always defined before their corresponding longhand properties.✅

版本与发布记录

@compiled/eslint-plugin 共发布 52 个版本,首次发布于 2021/11/04;过去 12 个月发布了 4 个版本。

版本发布日期距今
0.20.2latest2026/09/161 个月前
0.20.12026/07/283 个月前
0.20.02026/06/184 个月前
0.19.22026/03/307 个月前
0.19.12025/01/081.8 年前
0.19.02024/12/191.9 年前

关于 @compiled/eslint-plugin 的常见问题

@compiled/eslint-plugin 是什么?

A familiar and performant compile time CSS-in-JS library for React.

如何安装 @compiled/eslint-plugin?

在项目目录运行 npm install @compiled/eslint-plugin,或使用 pnpm add / yarn add / bun add。

@compiled/eslint-plugin 支持 TypeScript 吗?

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

@compiled/eslint-plugin 支持 ESM 还是 CommonJS?

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

@compiled/eslint-plugin 需要什么版本的 Node.js?

package.json 的 engines 字段要求 Node.js ^16.0.0 || >=18.0.0。版本不符时 npm 默认只给出警告,开启 engine-strict 后会拒绝安装。

@compiled/eslint-plugin 可以商用吗?

@compiled/eslint-plugin 使用 Apache-2.0 许可。宽松许可:允许商业使用、修改和再分发,并附带明确的专利授权;分发时需保留许可与 NOTICE 文件,修改过的文件要注明改动。以上为概括,不构成法律意见,请以许可原文为准。

@compiled/eslint-plugin 的下载量有多少?

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

@compiled/eslint-plugin 还在维护吗?

最新版本 0.20.2 发布于 2026/09/16(1 个月前);至今共发布 52 个版本,其中过去 12 个月发布了 4 个;首次发布于 2021/11/04。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。