{"id":25502,"library":"eslint-plugin-clean-styled-components","title":"ESLint Plugin Clean Styled Components","description":"An ESLint plugin that enforces clean code practices in styled-components usage. Version 0.0.2 is the latest, with no known release cadence. It provides rules such as 'single-component-per-file' to enforce one styled component per file. Unlike other styled-components lint plugins, this focuses on structural cleanliness rather than syntax or style. No major changes or updates have been made since initial release.","status":"active","version":"0.0.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","eslint","eslintplugin","eslint-plugin"],"install":[{"cmd":"npm install eslint-plugin-clean-styled-components","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-clean-styled-components","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-clean-styled-components","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires ESLint to function.","package":"eslint","optional":true}],"imports":[{"note":"ESLint automatically resolves 'eslint-plugin-' prefix.","wrong":"// Wrong: include full name \"eslint-plugin-clean-styled-components\" in plugins list is unnecessary","symbol":"plugin","correct":"// In .eslintrc: \"plugins\": [\"clean-styled-components\"]"},{"note":"Rule names are kebab-case and scoped under the plugin.","wrong":"// Wrong: using snake_case (clean_styled_components) instead of kebab-case (clean-styled-components)","symbol":"rules","correct":"// In .eslintrc: \"rules\": { \"clean-styled-components/single-component-per-file\": 2 }"},{"note":"Rules are not exported as JS modules; they are configured via ESLint config.","wrong":"// Wrong: This rule is not directly imported; it's used via ESLint configuration.","symbol":"single-component-per-file","correct":"import singleComponentPerFile from 'eslint-plugin-clean-styled-components'?"}],"quickstart":{"code":"// .eslintrc.json\n{\n  \"plugins\": [\"clean-styled-components\"],\n  \"rules\": {\n    \"clean-styled-components/single-component-per-file\": 2\n  }\n}\n\n// styled-components file (styled.js)\n// This will fail lint because multiple styled components are in one file\nimport styled from 'styled-components';\n\nexport const Button = styled.button`\n  color: red;\n`;\n\nexport const Input = styled.input`\n  border: 1px solid;\n`;","lang":"javascript","description":"Shows how to enable the 'single-component-per-file' rule in ESLint config and an example that violates it."},"warnings":[{"fix":"Consider other mature styled-components lint plugins like eslint-plugin-styled-components-a11y or custom rules.","message":"The plugin is very early (v0.0.2) and may have limited rules or bugs. Only one rule is documented.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use a more comprehensive plugin or extend with custom rule parsers.","message":"The plugin does not appear to support TypeScript or styled-components macro syntax out of the box.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Install plugin locally: npm install eslint-plugin-clean-styled-components --save-dev","cause":"Plugin not installed or ESLint cannot find it due to global/local mismatch.","error":"ESLint couldn't find the plugin \"eslint-plugin-clean-styled-components\"."},{"fix":"Use numeric severity (0,1,2) or string ('off','warn','error'). Ensure rule name is kebab-case.","cause":"Invalid rule severity or rule name typo.","error":"Configuration for rule \"clean-styled-components/single-component-per-file\" is invalid."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}