{"id":19736,"library":"eslint-plugin-emotion","title":"ESLint Plugin for Emotion","description":"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.","status":"active","version":"11.0.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","eslint","eslintplugin","eslint-plugin","emotion"],"install":[{"cmd":"npm install eslint-plugin-emotion","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-emotion","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-emotion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to run the plugin","package":"eslint","optional":false},{"reason":"Peer dependency for Emotion v10; if using Emotion v11, use @emotion/react","package":"@emotion/core","optional":true}],"imports":[{"note":"ESLint plugins are invoked as CommonJS objects; ESM import may not work with ESLint's require-based loading.","wrong":"import emotion from 'eslint-plugin-emotion';","symbol":"plugin","correct":"const emotion = require('eslint-plugin-emotion');"},{"note":"Recommended config 'recommended' available via configs.recommended for ESLint's extends.","wrong":"import { configs } from 'eslint-plugin-emotion';","symbol":"configs","correct":"const { configs } = require('eslint-plugin-emotion');"},{"note":"All rules are under 'emotion' namespace; accessible via rules['no-vanilla'] etc.","wrong":"import { rules } from 'eslint-plugin-emotion';","symbol":"rules","correct":"const { rules } = require('eslint-plugin-emotion');"}],"quickstart":{"code":"// Install: npm install eslint-plugin-emotion --save-dev\n// .eslintrc.js\nmodule.exports = {\n  plugins: ['emotion'],\n  rules: {\n    'emotion/no-vanilla': 'error',\n    'emotion/import-from-emotion': 'error',\n    'emotion/styled-import': 'error',\n    'emotion/syntax-preference': ['warn', 'object'],\n  },\n};\n\n// Or use the recommended config:\nmodule.exports = {\n  extends: ['plugin:emotion/recommended'],\n};","lang":"javascript","description":"Configures ESLint to lint Emotion code using the plugin and recommended rules."},"warnings":[{"fix":"Upgrade to Emotion v11 or use eslint-plugin-emotion@10 for Emotion v10.","message":"Version 11.0.0 drops support for Emotion v10; requires Emotion v11 (@emotion/react).","severity":"breaking","affected_versions":"11.0.0"},{"fix":"Remove 'no-vanilla' and use '@emotion/no-vanilla' or update to Emotion v11 naming conventions.","message":"Rule 'no-vanilla' is deprecated in v11 in favor of '@emotion/pkg-renaming' rules.","severity":"deprecated","affected_versions":">=11.0.0"},{"fix":"Ensure 'emotion' is listed in the plugins array and not just in rules.","message":"Plugin must be loaded after ESLint is configured; it won't work if placed in .eslintrc wrong order.","severity":"gotcha","affected_versions":"*"},{"fix":"Add 'parser: @typescript-eslint/parser' and check rule compatibility.","message":"If using TypeScript, ensure @typescript-eslint parser is configured and the emotion plugin is compatible.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install eslint-plugin-emotion --save-dev`.","cause":"Plugin not installed or not in node_modules.","error":"Error: Failed to load plugin 'emotion' declared in '.eslintrc.*': Cannot find module 'eslint-plugin-emotion'"},{"fix":"Check plugin version; for v11, use '@emotion/no-vanilla' or update rules.","cause":"Using an older version of the plugin that doesn't have that rule, or removed rule.","error":"Definition for rule 'emotion/no-vanilla' was not found"},{"fix":"Remove 'emotion' property and use 'plugins: [\"emotion\"]' and rules under 'emotion/rule-name'.","cause":"Misconfigured .eslintrc trying to set emotion config directly.","error":"ESLint: Unexpected top-level property 'emotion'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}