eslint-plugin-react-snob

An ESLint plugin for React best practices and opinionated code style enforcement. This plugin enforces consistent and clean React code patterns to maintain high code quality standards.

Installation

npm install eslint-plugin-react-snob --save-dev

Usage

This plugin supports both ESLint legacy config (.eslintrc.*) and flat config (eslint.config.js) formats.

ESLint 8.x (Legacy Config)

Add react-snob to the plugins section of your .eslintrc configuration file:

{
  "plugins": ["react-snob"],
  "rules": {
    "react-snob/no-inline-styles": "error",
    "react-snob/require-jsx-string-braces": "error"
  }
}

Predefined Configurations

Recommended:

{
  "extends": ["plugin:react-snob/recommended"]
}

Strict:

{
  "extends": ["plugin:react-snob/strict"]
}

ESLint 9.x+ (Flat Config)

For ESLint 9.x+ flat config format, use eslint.config.js:

import reactSnob from 'eslint-plugin-react-snob/configs/flat';

export default [
  // Apply to JSX/TSX files
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    ...reactSnob.configs.recommended,
  },
];

Or configure rules manually:

import reactSnob from 'eslint-plugin-react-snob/configs/flat';

export default [
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: {
      'react-snob': reactSnob.plugin,
    },
    rules: {
      'react-snob/no-inline-styles': 'error',
      'react-snob/require-jsx-string-braces': 'error',
    },
  },
];

Supported Rules

✅ react-snob/no-inline-styles

Disallow inline styles in JSX elements to promote better separation of concerns and maintainability.

❌ Incorrect:

<div style={{ color: 'red', fontSize: '16px' }}>Content</div>

✅ Correct:

<div className="red-text large-font">Content</div>

📖 Full documentation

✅ react-snob/require-jsx-string-braces

Require curly braces around string literals in JSX attributes for consistency.

❌ Incorrect:

<div className="text-center" aria-label="hello">Content</div>
<CustomComponent stringProp="value" />

✅ Correct:

<div className={"text-center"} aria-label={"hello"}>Content</div>
<CustomComponent stringProp={"value"} />

📖 Full documentation

Development

Install dependencies:

npm install

Build the project:

npm run build

Run tests:

npm test

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

MIT © Jason Paff