eslint-plugin-nice-styled-rules

An ESLint plugin that lets you control the usage rules for styled components in your project. This rule allows you to add flexible restrictions on the number of style imports and enforce a specific naming convention.

Installation

Install the plugin as a dev dependency: bash npm install --save-dev eslint-plugin-nice-styled-rules or bash yarn add --dev eslint-plugin-nice-styled-rules

Additional required dependencies

To ensure correct resolution of TypeScript imports (including styled component files), make sure you have also installed the following packages: bash npm install --save-dev eslint-plugin-import eslint-import-resolver-typescript And in your ESLint configuration (e.g., .eslintrc.js), you need to add the following settings:

js
module.exports = {
  // ...
  settings: {
    'import/resolver': {
      typescript: {
        project: 'tsconfig.json', // Make sure this path is correct for your project
      },
      node: {
        extensions: ['.js', '.ts', '.tsx', '.d.ts'],
      },
    },
  },
  // ...
};

This ensures that ESLint (and the eslint-plugin-import) can properly resolve .ts/.tsx files and any paths you’ve set in your tsconfig.json.

Configuration

1. Add the "nice-styled-rules" plugin to the “plugins” section of your ESLint configuration file (usually .eslintrc.js or .eslintrc):

js
module.exports = {
  // ...
  plugins: [
    'nice-styled-rules'
  ],
  // ...
};

2. Add the actual rule to the “rules” section:

js
module.exports = {
  // ...
  rules: {
    'nice-styled-rules/no-multiple-styled-imports': 'warn',
    // or 'error' if you want ESLint to throw an error instead of a warning
  },
};

Rule Description

no-multiple-styled-imports

This rule prohibits using more than one import of styled components in a component file. In addition, the imported file must include the full name of the current component with the substring “Styled”. Also, the imported styles file must be located in the same directory as the component that uses the styles. • For example, if your component is named “ButtonHello,” the correct style file name to import would be “ButtonHelloStyled” (or “ButtonHelloStyled.ts,” “ButtonHelloStyled.js,” etc.).• If the component file contains other imports ending with “Styled” that do not match the component name, the rule will issue a warning (“warn”) or an error (“error”), depending on your configuration. This rule simplifies project navigation and helps maintain a uniform structure for importing styled components.