ESLint Plugin for Emotion

11.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause Plugin not installed or not in node_modules.

fix

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

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

cause 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.

error ESLint: Unexpected top-level property 'emotion' ↓

cause Misconfigured .eslintrc trying to set emotion config directly.

fix

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

Warnings

breaking Version 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.

deprecated Rule '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.

gotcha Plugin 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.

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

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

Install

npm install eslint-plugin-emotion

yarn add eslint-plugin-emotion

pnpm add eslint-plugin-emotion

Imports

plugin
wrong
```
import emotion from 'eslint-plugin-emotion';
```
correct
```
const emotion = require('eslint-plugin-emotion');
```
ESLint plugins are invoked as CommonJS objects; ESM import may not work with ESLint's require-based loading.

configs

wrong

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

correct

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

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

rules

wrong

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

correct

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

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

Quickstart

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'],
};