Step-by-step: add a custom ESLint plugin to enforce naming conventions

Just tried this to enforce our team's React component naming. Wanted everything to be `PascalCase` and hooks to start with `use`. The default rules weren't cutting it.

First, created a custom plugin file `eslint-plugin-custom-naming.js`. You export a rules object. The key part is creating the rule meta and the create function that checks identifiers. Used a simple regex test for `PascalCase` and another for `use` prefix. Then, in your ESLint config, you import the plugin and apply the rule like `"custom-naming/react-component-naming": "error"`.

Had to wire it up using `eslint-plugin-local-rules` in the end because our setup is a monorepo. Works perfectly now, fails the build if anyone tries to name a component `myButton`. Much cleaner.