feat: forbid enums in React (#129)

.changeset/chilly-seas-cross.md

@@ -0,0 +1,5 @@
+---
+"@infinum/eslint-plugin": major
+---
+
+Added `eslint-plugin-typescript-enum` dependency and rules to React config

README.md

@@ -54,6 +54,7 @@ eslint-plugin-jsx-a11y@6.8 \
 @typescript-eslint/eslint-plugin@7.8 \
 @typescript-eslint/parser@7.8 \
 @next/eslint-plugin-next@14.2 \
+eslint-plugin-typescript-enum@2.1 \
 eslint-plugin-chakra-ui@0.11
 ```
 

package.json

@@ -48,6 +48,7 @@
 		"eslint-plugin-react": "~7.34.0",
 		"eslint-plugin-react-hooks": "~4.6.0",
 		"eslint-plugin-rxjs": "~5.0.3",
+		"eslint-plugin-typescript-enum": "~2.1.0",
 		"typescript": ">=3.3.1"
 	},
 	"peerDependenciesMeta": {
@@ -75,6 +76,9 @@
 		"eslint-plugin-chakra-ui": {
 			"optional": true
 		},
+		"eslint-plugin-typescript-enum": {
+			"optional": true
+		},
 		"typescript": {
 			"optional": true
 		}
@@ -100,6 +104,7 @@
 		"eslint-plugin-react": "7.34.1",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"eslint-plugin-rxjs": "5.0.3",
+		"eslint-plugin-typescript-enum": "2.1.0",
 		"husky": "9.0.11",
 		"lint-staged": "15.2.2",
 		"plop": "~3.1.2",

src/configs/react.ts

@@ -5,7 +5,12 @@ export default {
 		jest: true,
 		es2022: true,
 	},
-	extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:jsx-a11y/recommended'],
+	extends: [
+		'plugin:react/recommended',
+		'plugin:react-hooks/recommended',
+		'plugin:jsx-a11y/recommended',
+		'plugin:typescript-enum/recommended',
+	],
 	settings: {
 		react: {
 			version: process.env.NODE_ENV === 'test' ? 'v18.2.0' : 'detect',
@@ -29,5 +34,7 @@ export default {
 		'react/react-in-jsx-scope': 'off',
 		'react/self-closing-comp': ['warn', { component: true, html: true }],
 		'react/no-unknown-property': ['error', { ignore: ['css'] }],
+		'typescript-enum/no-enum': 'warn',
+		'typescript-enum/no-const-enum': 'warn',
 	},
 } satisfies TSESLint.Linter.Config;

tests/configs/react/typescript-enum-no-const-enum.test.ts

@@ -0,0 +1,30 @@
+import { getReactTester } from './utils';
+
+const ruleName = 'typescript-enum/no-const-enum';
+
+const { test, validate } = getReactTester(ruleName, { parser: '@typescript-eslint/parser' });
+
+test('should warn for const enums', () =>
+	validate(
+		`
+		const enum Foo {
+			Bar = "Bar",
+			Baz = "Baz",
+		}
+		`,
+		[],
+		[
+			'Unexpected `const` enum, use regular enum instead. As a side note, in modern TypeScript, you may not need an enum when an object with `as const` could suffice.',
+		]
+	));
+
+test('should not warn for union types', () =>
+	validate(
+		`
+		type Foo = "Bar" | "Baz";
+		`,
+		[],
+		[]
+	));
+
+test.run();

tests/configs/react/typescript-enum-no-enum.test.ts

@@ -0,0 +1,58 @@
+import { getReactTester } from './utils';
+
+const ruleName = 'typescript-enum/no-enum';
+
+const { test, validate } = getReactTester(ruleName, { parser: '@typescript-eslint/parser' });
+
+test('should warn for enums without specified values', () =>
+	validate(
+		`
+		enum Foo {
+			Bar,
+			Baz
+		}
+		`,
+		[],
+		['In modern TypeScript, you may not need an enum when an object with `as const` could suffice.']
+	));
+
+test('should warn for enums with specified values', () =>
+	validate(
+		`
+			enum Foo {
+				Bar = 'Bar',
+				Baz = 'Baz'
+			}
+
+			enum Foo {
+				Bar = "BAR",
+				Baz = "BAZ",
+			}
+			`,
+		[],
+		[
+			'In modern TypeScript, you may not need an enum when an object with `as const` could suffice.',
+			'In modern TypeScript, you may not need an enum when an object with `as const` could suffice.',
+		]
+	));
+
+test('should not warn for consts', () =>
+	validate(
+		`
+		const Foo = {
+			Bar: 0,
+			Baz: 1,
+		} as const;
+
+		type Foo = "Bar" | "Baz";
+
+		const Foo = {
+			Bar: "BAR",
+			Baz: "BAZ",
+		} as const;
+		`,
+		[],
+		[]
+	));
+
+test.run();

tests/configs/react/utils.ts

@@ -1,10 +1,17 @@
+import { TSESLint } from '@typescript-eslint/utils';
 import eslintConfig from '../../../src/configs/react';
 import { getTester } from '../../utils';
 
-export const getReactTester = (ruleName: string): ReturnType<typeof getTester> => {
+export const getReactTester = (
+	ruleName: string,
+	configOverride: TSESLint.ESLint.ESLintOptions['baseConfig'] = {}
+): ReturnType<typeof getTester> => {
 	return getTester({
 		filePath: __filename,
-		eslintConfig,
+		eslintConfig: {
+			...eslintConfig,
+			...configOverride,
+		},
 		ruleName: ruleName,
 	});
 };