eslint-plugin-react-filenames

0.0.2 verified Sat Apr 25 auth: no javascript deprecated

Enforces naming conventions for React component files using ESLint. Currently at version 0.0.2, this plugin provides a single rule, react-filenames/filename-matches-component, which verifies that a file's name matches the default export component's name. It is a lightweight, opinionated linter plugin designed for React projects using ESLint 2.x or 3.x. Unlike broader plugins like eslint-plugin-react that cover many rules, this plugin focuses specifically on file naming consistency. The release cadence is low, with no updates since its initial release. It requires ESLint 2.x or 3.x and the react plugin as peer dependencies.

Common errors

error ESLintError: Configuration for rule "react-filenames/filename-matches-component" is invalid ↓

cause Rule configuration expects an array but got a string, or ESLint version mismatch.

fix

Ensure rule value is a string severity (e.g., 'error') or array with options. Check ESLint peer dependency compatibility.

error Error: Cannot find module 'eslint-plugin-react-filenames' ↓

cause Plugin not installed in the project's node_modules.

fix

Run 'npm install eslint-plugin-react-filenames --save-dev' and ensure you are in the correct directory.

Warnings

deprecated Package is no longer maintained and uses outdated ESLint API (1.x–3.x). May not work with ESLint 4+. ↓

fix Switch to eslint-plugin-react's 'jsx-filename-rule' or similar alternative.

gotcha The rule 'filename-matches-component' requires a default export, but not all React components use default exports. ↓

fix Ensure components are default-exported, or consider using a different rule.

gotcha ESLint 2.x/3.x peer dependency: plugin does not support ESLint 4+. ↓

fix Use legacy ESLint version or migrate to a supported plugin.

gotcha The plugin does not automatically detect component names; it requires the eslint-plugin-react settings for pragma and createClass. ↓

fix Add 'settings.react' block to your ESLint config.

Install

npm install eslint-plugin-react-filenames

yarn add eslint-plugin-react-filenames

pnpm add eslint-plugin-react-filenames

Imports

rules
wrong
```
const plugin = require('eslint-plugin-react-filenames')
```
correct
```
import { rules } from 'eslint-plugin-react-filenames'
```
The main export is a plugin object. Use the plugin directly in ESLint config as 'react-filenames'.

Quickstart

ESLint configuration to enforce that React component filenames match their default export name.

{
  "plugins": ["react-filenames"],
  "rules": {
    "react-filenames/filename-matches-component": "error"
  }
}