ESLint Plugin Clean Styled Components

0.0.2 verified Fri May 01 auth: no javascript

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.

Common errors

error ESLint couldn't find the plugin "eslint-plugin-clean-styled-components". ↓

cause Plugin not installed or ESLint cannot find it due to global/local mismatch.

fix

Install plugin locally: npm install eslint-plugin-clean-styled-components --save-dev

error Configuration for rule "clean-styled-components/single-component-per-file" is invalid. ↓

cause Invalid rule severity or rule name typo.

fix

Use numeric severity (0,1,2) or string ('off','warn','error'). Ensure rule name is kebab-case.

Warnings

gotcha The plugin is very early (v0.0.2) and may have limited rules or bugs. Only one rule is documented. ↓

fix Consider other mature styled-components lint plugins like eslint-plugin-styled-components-a11y or custom rules.

gotcha The plugin does not appear to support TypeScript or styled-components macro syntax out of the box. ↓

fix Use a more comprehensive plugin or extend with custom rule parsers.

Install

npm install eslint-plugin-clean-styled-components

yarn add eslint-plugin-clean-styled-components

pnpm add eslint-plugin-clean-styled-components

Imports

plugin

wrong

// Wrong: include full name "eslint-plugin-clean-styled-components" in plugins list is unnecessary

correct

// In .eslintrc: "plugins": ["clean-styled-components"]

ESLint automatically resolves 'eslint-plugin-' prefix.

rules

wrong

// Wrong: using snake_case (clean_styled_components) instead of kebab-case (clean-styled-components)

correct

// In .eslintrc: "rules": { "clean-styled-components/single-component-per-file": 2 }

Rule names are kebab-case and scoped under the plugin.

single-component-per-file

wrong

// Wrong: This rule is not directly imported; it's used via ESLint configuration.

correct

import singleComponentPerFile from 'eslint-plugin-clean-styled-components'?

Rules are not exported as JS modules; they are configured via ESLint config.

Quickstart

Shows how to enable the 'single-component-per-file' rule in ESLint config and an example that violates it.

// .eslintrc.json
{
  "plugins": ["clean-styled-components"],
  "rules": {
    "clean-styled-components/single-component-per-file": 2
  }
}

// styled-components file (styled.js)
// This will fail lint because multiple styled components are in one file
import styled from 'styled-components';

export const Button = styled.button`
  color: red;
`;

export const Input = styled.input`
  border: 1px solid;
`;