logoESLint React
Rules

filename-extension

Full Name in eslint-plugin-react-naming-convention

react-naming-convention/filename-extension

Full Name in @eslint-react/eslint-plugin

@eslint-react/naming-convention/filename-extension

Features

🔍 ⚙️

What it does

Enforces consistent use of the JSX file extension.

Examples

This rule enforces consistent file extensions for JSX files.

Rule Options

  • allow: When to allow a JSX filename extension. Default is "as-needed". Possible values:
    1. "always": allow all file use JSX file extension.
    2. "as-needed": allow JSX file extension only if the file contains JSX syntax.
  • extensions: List of file extensions that should be treated as JSX files. Default is [".jsx", ".tsx"].
  • ignoreFilesWithoutCode: When set to true, this rule will ignore files that do not contain JSX syntax. Default is true.

Rule Options Examples

eslint.config.js
// ...
export default [
  // ...
  {
    files: ["**/*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename-extension": ["warn", "as-needed"]
  }
];
eslint.config.js
// ...
export default [
  // ...
  {
    files: ["**/*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename-extension": ["warn", { "allow": "always" }]
  }
];
eslint.config.js
// ...
export default [
  // ...
  {
    files: ["**/*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename-extension": ["warn", "always"],
    },
  },
  {
    files: ["src/**/use*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename-extension": [
        "warn",
        "as-needed",
      ],
    },
  },
  {
    files: ["fixtures/**/*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename-extension": "off",
    },
  },
];

Implementation

Previous

filename

Next

use-state

On this page