eslint-plugin-pet-peeves

Opinionated ESLint rules for JavaScript and JSX readability. Some rules might split opinions.

These are not best practices or correctness checks.

They are purely opinionated readability preferences that concern me. If you or your teammates disagree, that's expected. Don't enable the rule.

Pick the peeves you actually have.

[!WARNING] This plugin is still in development and the rules are not yet considered stable.

Breaking changes may occur in minor and patch releases, so use with caution.

Feedback is welcome; please report any issues or suggestions.

Install

Requires ESLint 9 or 10 (flat config), or Oxlint with JS plugins.

npm install --save-dev eslint-plugin-pet-peeves

Usage

ESLint

import petPeeves from "eslint-plugin-pet-peeves";

export default [
  {
    plugins: {
      "pet-peeves": petPeeves,
    },
    rules: {
      "pet-peeves/max-operands": ["error", { max: 8 }],
      "pet-peeves/max-same-operator-operands": ["error", { max: 4 }],
      "pet-peeves/no-internal-re-exports": "error",
      "pet-peeves/no-interpolated-tailwind-class": "error",
      "pet-peeves/no-orphan-tailwind-group-peer": [
        "error",
        { kinds: ["group", "peer"] },
      ],
      "pet-peeves/no-unnamed-tailwind-group-peer": [
        "error",
        { kinds: ["group", "peer"] },
      ],
      "pet-peeves/padding-between-large-jsx-elements": [
        "error",
        { minLines: 8 },
      ],
    },
  },
];

Oxlint

Oxlint can load this package as a JS plugin (alpha). Add the package to jsPlugins and enable the rules you want.

.oxlintrc.json:

{
  "jsPlugins": ["eslint-plugin-pet-peeves"],
  "rules": {
    "pet-peeves/max-operands": ["error", { "max": 8 }],
    "pet-peeves/max-same-operator-operands": ["error", { "max": 4 }],
    "pet-peeves/no-internal-re-exports": "error",
    "pet-peeves/no-interpolated-tailwind-class": "error",
    "pet-peeves/no-orphan-tailwind-group-peer": [
      "error",
      { "kinds": ["group", "peer"] }
    ],
    "pet-peeves/no-unnamed-tailwind-group-peer": [
      "error",
      { "kinds": ["group", "peer"] }
    ],
    "pet-peeves/padding-between-large-jsx-elements": [
      "error",
      { "minLines": 8 }
    ]
  }
}

oxlint.config.ts:

import { defineConfig } from "oxlint";

export default defineConfig({
  jsPlugins: ["eslint-plugin-pet-peeves"],
  rules: {
    "pet-peeves/max-operands": ["error", { max: 8 }],
    "pet-peeves/max-same-operator-operands": ["error", { max: 4 }],
    "pet-peeves/no-internal-re-exports": "error",
    "pet-peeves/no-interpolated-tailwind-class": "error",
    "pet-peeves/no-orphan-tailwind-group-peer": [
      "error",
      { kinds: ["group", "peer"] },
    ],
    "pet-peeves/no-unnamed-tailwind-group-peer": [
      "error",
      { kinds: ["group", "peer"] },
    ],
    "pet-peeves/padding-between-large-jsx-elements": ["error", { minLines: 8 }],
  },
});

Rules

• max-operands — too many operands in one connected logical expression
• max-same-operator-operands — too many operands in a single same-operator logical chain
• no-internal-re-exports — re-exporting from internal modules instead of importing from the defining file
• no-interpolated-tailwind-class — interpolated template strings in Tailwind class names
• no-orphan-tailwind-group-peer — Tailwind group-* / peer-* variants without a matching marker in the JSX tree
• no-unnamed-tailwind-group-peer — require named Tailwind group / peer markers and variants
• padding-between-large-jsx-elements — adjacent large JSX elements with no blank line (autofix)

Options, examples, and when not to use a rule live in each doc.

License

MIT

Contributing

Local setup and versioning: Development.