{"id":21308,"library":"eslint-plugin-styled-components-varname","title":"ESLint Plugin: Styled Components Variable Name","description":"An ESLint plugin that enforces consistent naming conventions for styled-components variables. Version 1.0.1 is the current stable release. The plugin provides a single rule 'varname' that allows developers to define prefix, suffix, or regex patterns for styled-component variable names, differentiating between tag styles (e.g., styled.div) and extended styles (e.g., styled(FooComponent)). This helps reduce verbose naming and standardizes codebase patterns. Unlike generic naming rules, this plugin understands the context of styled-components, making it easier to enforce conventions specifically for styled components. No significant updates since initial release; project appears to be stable but may not be actively maintained.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/macinjoke/eslint-plugin-styled-components-varname","tags":["javascript","eslint","eslintplugin","eslint-plugin"],"install":[{"cmd":"npm install eslint-plugin-styled-components-varname","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-styled-components-varname","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-styled-components-varname","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESLint plugin loads via plugin name; no specific symbol import needed. Use the string 'styled-components-varname' in ESLint config.","wrong":"","symbol":"eslint-plugin-styled-components-varname","correct":"export default { plugins: ['styled-components-varname'], rules: { 'styled-components-varname/varname': 'error' } }"},{"note":"The rule object is exported as 'varname' under 'rules'. For custom rule configuration, you can import the rule directly if needed.","wrong":"","symbol":"varname","correct":"import { rules } from 'eslint-plugin-styled-components-varname'"},{"note":"No presets/configs are exported by this plugin; configs object may be empty.","wrong":"","symbol":"configs","correct":"import { configs } from 'eslint-plugin-styled-components-varname'"}],"quickstart":{"code":"// .eslintrc.json\n{\n  \"plugins\": [\"styled-components-varname\"],\n  \"rules\": {\n    \"styled-components-varname/varname\": [\"error\", {\n      \"tagStyle\": { \"prefix\": \"_\" },\n      \"extendedStyle\": { \"prefix\": \"$\" }\n    }]\n  }\n}\n\n// Valid code\nconst _Div = styled.div`\n  color: red;\n`\nconst $Component = styled(Component)`\n  color: blue;\n`\n\n// Invalid code\nconst StyledDiv = styled.div`\n  color: red;\n`\n","lang":"javascript","description":"Configures ESLint to enforce prefix-based naming for styled-components: '_' for tag styles and '$' for extended styles."},"warnings":[{"fix":"Manually ensure naming consistency for complex styled-component usages.","message":"The rule only applies to variables declared with `styled.*` or `styled(...)`; it does not check other styled-components patterns like `styled(SomeComponent).attrs(...)`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set a custom prefix or pattern that does not trigger other rules.","message":"Default options use prefix '_' for tag styles and '$' for extended styles, which may conflict with other linting rules (e.g., no-underscore-dangle).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure all styled-components assignments are plain variable declarations.","message":"The rule does not support dynamic style creation or component variables passed through functions.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install eslint-plugin-styled-components-varname --save-dev` and ensure plugins array contains 'styled-components-varname'.","cause":"ESLint cannot locate the plugin; likely missing installation or incorrect plugin name.","error":"Definition for rule 'styled-components-varname/varname' was not found"},{"fix":"Install the plugin: npm install eslint-plugin-styled-components-varname --save-dev","cause":"ESLint plugin not installed in the project.","error":"Cannot find module 'eslint-plugin-styled-components-varname'"},{"fix":"Ensure the option object only contains 'prefix', 'suffix', or 'pattern'. Example: { tagStyle: { prefix: '_' } }","cause":"Invalid configuration option for tagStyle or extendedStyle.","error":"Expected property name 'prefix' to match one or more of the following: 'pattern', 'prefix', 'suffix'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}