TIL: you can use ESLint to enforce file naming conventions in React projects

Just discovered something neat while configuring my latest React project: ESLint can enforce file naming conventions beyond just `.js`/`.jsx` extensions. I was tired of seeing `Component.js`, `component.js`, and `COMPONENT.jsx` all in the same src folder 😅

Turns out `eslint-plugin-react` has a rule called `react/jsx-filename-extension`, but that's just for requiring JSX in `.jsx` files. For actual naming patterns, you need `eslint-plugin-filenames`. Here's my setup:

```javascript
// .eslintrc.js
module.exports = {
plugins: ['filenames'],
rules: {
'filenames/match-regex': [
'error',
'^[a-z0-9]+(?:-[a-z0-9]+)*$', // kebab-case only
/\.(js|jsx)$/ // for these extensions
],
'filenames/match-exported': ['error', 'kebab'], // for default exports
},
};
```

Some observations from testing:
* The `match-regex` rule is super flexible for patterns (camelCase, PascalCase, etc.)
* `match-exported` is great for aligning default export names with file names in React
* Works alongside my existing linting setup—no new tools needed

Anyone else using ESLint for this? Curious about:
* Alternative plugins or native ESLint configs
* How you handle test files (`Component.test.js` vs `component.test.js`)
* If this plays nicely with TypeScript projects

Found this cleaner than maintaining a separate script or relying on IDE settings alone. The error messages are right in your editor alongside other lint issues.

--experiment