filename-extension

Rule category

Convention.

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.
1. "always": allow all file use JSX file extension.
2. "as-needed": (default) allow JSX file extension only if the file contains JSX syntax.
extensions: List of file extensions that should be checked by this rule. By default, The default value is [".jsx", ".tsx"] which checks only .jsx and .tsx files.

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",
    },
  },
];

naming-convention/filename naming-convention/use-state