@hesamse/eslint-plugin-recommended

An ESLint plugin with custom rules for TypeScript projects, including a rule to enforce the presence of JSX elements in .tsx files. Ideal for projects using React with TypeScript.

Features

• no-tsx-without-jsx: Enforces that .tsx files contain JSX elements. If a .tsx file does not include any JSX, this rule will report an error, encouraging you to use the correct file extensions (.ts instead of .tsx when JSX is not used).

Installation

First, install the plugin using npm:

1npm install --save-dev @hesamse/eslint-plugin-recommended

Or with yarn:

1yarn add --dev @hesamse/eslint-plugin-recommended

Usage

To use this plugin, include it in your ESLint configuration:

eslint.config.js

If you are using eslint.config.js:

1import hesamseRecommended from '@hesamse/eslint-plugin-recommended';
2
3export default {
4  parser: '@typescript-eslint/parser',
5  plugins: {
6    '@hesamse/recommended': hesamseRecommended,
7  },
8  rules: {
9    '@hesamse/recommended/no-tsx-without-jsx': 'error',
10  },
11  overrides: [
12    {
13      files: ['**/*.tsx'],
14      rules: {
15        '@hesamse/recommended/no-tsx-without-jsx': 'error',
16      },
17    },
18  ],
19};

.eslintrc.json (if you still prefer JSON configuration)

1{
2  "parser": "@typescript-eslint/parser",
3  "plugins": ["@hesamse/recommended"],
4  "rules": {
5    "@hesamse/recommended/no-tsx-without-jsx": "error"
6  },
7  "overrides": [
8    {
9      "files": ["**/*.tsx"],
10      "rules": {
11        "@hesamse/recommended/no-tsx-without-jsx": "error"
12      }
13    }
14  ]
15}

Rule: no-tsx-without-jsx

What does it do?

The no-tsx-without-jsx rule ensures that files with a .tsx extension contain at least one JSX element. This helps maintain consistency in your project by enforcing the use of .tsx files only when necessary. If no JSX is present, consider renaming the file to .ts.

Example

✅ Valid

1// myComponent.tsx
2import React from 'react';
3
4const MyComponent = () => <div>Hello, World!</div>;
5
6export default MyComponent;

❌ Invalid

1// myUtility.tsx
2export function myUtilityFunction() {
3  return 42;
4}

The above code would trigger an error, suggesting that the file should be renamed to .ts since no JSX is present.

Contributing

Contributions are welcome! If you want to add new rules or improve existing ones, feel free to fork the repository and open a pull request.

License

MIT © hesamSe