Registry / testing / eslint-plugin-emotion

eslint-plugin-emotion

library11.0.0jsnpmunverified

An ESLint plugin providing linting rules specific to Emotion, a popular CSS-in-JS library. Version 11.0.0 targets Emotion v11 and includes rules like 'no-vanilla', 'import-from-emotion', 'styled-import', 'syntax-preference', and 'no-invalid-styled-component'. This plugin helps enforce best practices and catch common mistakes in Emotion code. It has a stable release cadence, though updates align with Emotion major versions. Key differentiators: it is the official linting tool for Emotion, replacing generic CSS-in-JS linting with Emotion-specific rules. Requires ESLint and Emotion as peer dependencies.

testing

npm install eslint-plugin-emotion

package ↗homepage ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-EMOT

eslint-plugin-emotion

testingjavascriptv11.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

✓ const emotion = require('eslint-plugin-emotion');

✗ import emotion from 'eslint-plugin-emotion';

ESLint plugins are invoked as CommonJS objects; ESM import may not work with ESLint's require-based loading.

configs

✓ const { configs } = require('eslint-plugin-emotion');

✗ import { configs } from 'eslint-plugin-emotion';

Recommended config 'recommended' available via configs.recommended for ESLint's extends.

rules

✓ const { rules } = require('eslint-plugin-emotion');

✗ import { rules } from 'eslint-plugin-emotion';

All rules are under 'emotion' namespace; accessible via rules['no-vanilla'] etc.

Configures ESLint to lint Emotion code using the plugin and recommended rules.

// Install: npm install eslint-plugin-emotion --save-dev // .eslintrc.js module.exports = { plugins: ['emotion'], rules: { 'emotion/no-vanilla': 'error', 'emotion/import-from-emotion': 'error', 'emotion/styled-import': 'error', 'emotion/syntax-preference': ['warn', 'object'], }, }; // Or use the recommended config: module.exports = { extends: ['plugin:emotion/recommended'], };

Debug

Known issues

breakingVersion 11.0.0 drops support for Emotion v10; requires Emotion v11 (@emotion/react).

fix

Upgrade to Emotion v11 or use eslint-plugin-emotion@10 for Emotion v10.

affects: 11.0.0

deprecatedRule 'no-vanilla' is deprecated in v11 in favor of '@emotion/pkg-renaming' rules.

fix

Remove 'no-vanilla' and use '@emotion/no-vanilla' or update to Emotion v11 naming conventions.

affects: >=11.0.0

gotchaPlugin must be loaded after ESLint is configured; it won't work if placed in .eslintrc wrong order.

fix

Ensure 'emotion' is listed in the plugins array and not just in rules.

affects: *

gotchaIf using TypeScript, ensure @typescript-eslint parser is configured and the emotion plugin is compatible.

fix

Add 'parser: @typescript-eslint/parser' and check rule compatibility.

affects: *

Errors

Common errors & fixes

Error: Failed to load plugin 'emotion' declared in '.eslintrc.*': Cannot find module 'eslint-plugin-emotion'

Plugin not installed or not in node_modules.

fix

Run `npm install eslint-plugin-emotion --save-dev`.

Definition for rule 'emotion/no-vanilla' was not found

Using an older version of the plugin that doesn't have that rule, or removed rule.

fix

Check plugin version; for v11, use '@emotion/no-vanilla' or update rules.

ESLint: Unexpected top-level property 'emotion'

Misconfigured .eslintrc trying to set emotion config directly.

fix

Remove 'emotion' property and use 'plugins: ["emotion"]' and rules under 'emotion/rule-name'.

Upgrade

Version history

11.0.0latest on npm

Audit

Dependencies

eslintrequiredPeer dependency required to run the plugin

@emotion/coreoptionalPeer dependency for Emotion v10; if using Emotion v11, use @emotion/react

Agent activity

2 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/eslint-plugin-emotion ↗

homepagehttps://emotion.sh/docs/eslint-plugin-emotion ↗