eslint-plugin-no-tsx-without-jsx

An ESLint plugin that enforces JSX presence in .tsx files to maintain clear file type distinctions in TypeScript projects.

Why?

Using .tsx extensions for files without JSX can cause confusion and inconsistency. This plugin ensures that .tsx files contain JSX elements

Installation

npm install eslint-plugin-no-tsx-without-jsx --save-dev

Usage

1. Add to your ESLint configuration:

{
  "plugins": ["no-tsx-without-jsx"],
  "rules": {
    "no-tsx-without-jsx/no-tsx-without-jsx": "error"
  }
}

2. Example valid/invalid usage:

✅ Valid (contains JSX):

// myComponent.tsx
const MyComponent = () => <div>Hello</div>;

❌ Invalid (no JSX):

// utility.tsx
export function utility() {
  return 42;
} // Should be utility.ts

Inspiration

This plugin was inspired by the discussion in jsx-eslint/eslint-plugin-react#3843

Related

• ESLint - Pluggable JavaScript linter
• TypeScript ESLint - TypeScript support for ESLint