ESLint Plugin: Styled Components Variable Name

1.0.1 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Definition for rule 'styled-components-varname/varname' was not found ↓

cause ESLint cannot locate the plugin; likely missing installation or incorrect plugin name.

fix

Run npm install eslint-plugin-styled-components-varname --save-dev and ensure plugins array contains 'styled-components-varname'.

error Cannot find module 'eslint-plugin-styled-components-varname' ↓

cause ESLint plugin not installed in the project.

fix

Install the plugin: npm install eslint-plugin-styled-components-varname --save-dev

error Expected property name 'prefix' to match one or more of the following: 'pattern', 'prefix', 'suffix' ↓

cause Invalid configuration option for tagStyle or extendedStyle.

fix

Ensure the option object only contains 'prefix', 'suffix', or 'pattern'. Example: { tagStyle: { prefix: '_' } }

Warnings

gotcha The rule only applies to variables declared with `styled.*` or `styled(...)`; it does not check other styled-components patterns like `styled(SomeComponent).attrs(...)`. ↓

fix Manually ensure naming consistency for complex styled-component usages.

gotcha Default options use prefix '_' for tag styles and '$' for extended styles, which may conflict with other linting rules (e.g., no-underscore-dangle). ↓

fix Set a custom prefix or pattern that does not trigger other rules.

gotcha The rule does not support dynamic style creation or component variables passed through functions. ↓

fix Ensure all styled-components assignments are plain variable declarations.

Install

npm install eslint-plugin-styled-components-varname

yarn add eslint-plugin-styled-components-varname

pnpm add eslint-plugin-styled-components-varname

Imports

eslint-plugin-styled-components-varname
```
export default { plugins: ['styled-components-varname'], rules: { 'styled-components-varname/varname': 'error' } }
```
ESLint plugin loads via plugin name; no specific symbol import needed. Use the string 'styled-components-varname' in ESLint config.
varname
```
import { rules } from 'eslint-plugin-styled-components-varname'
```
The rule object is exported as 'varname' under 'rules'. For custom rule configuration, you can import the rule directly if needed.
configs
```
import { configs } from 'eslint-plugin-styled-components-varname'
```
No presets/configs are exported by this plugin; configs object may be empty.

Quickstart

Configures ESLint to enforce prefix-based naming for styled-components: '_' for tag styles and '$' for extended styles.

// .eslintrc.json
{
  "plugins": ["styled-components-varname"],
  "rules": {
    "styled-components-varname/varname": ["error", {
      "tagStyle": { "prefix": "_" },
      "extendedStyle": { "prefix": "$" }
    }]
  }
}

// Valid code
const _Div = styled.div`
  color: red;
`
const $Component = styled(Component)`
  color: blue;
`

// Invalid code
const StyledDiv = styled.div`
  color: red;
`