Merge pull request #24 from kagankan/feature/eslint-flat-config

upgrade ESLint to v9 & migrate to Flat Config

Author: kagankan

.eslintrc

@@ -0,0 +1,80 @@
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import testingLibraryPlugin from 'eslint-plugin-testing-library';
+import vitestPlugin from '@vitest/eslint-plugin';
+import globals from 'globals';
+import { config } from '@markuplint-dev/eslint-config';
+
+/** @type {import('eslint').Linter.Config[]}  */
+export default [
+	...config,
+	reactPlugin.configs.flat.recommended,
+	testingLibraryPlugin.configs['flat/react'],
+	{
+		// global settings
+		plugins: {
+			'react-hooks': reactHooksPlugin,
+			'react-refresh': reactRefresh,
+			vitest: vitestPlugin,
+		},
+		languageOptions: {
+			globals: { ...globals.browser, React: true, JSX: true },
+			parserOptions: {
+				ecmaFeatures: { jsx: true },
+			},
+		},
+		settings: { react: { version: 'detect' }, 'import/resolver': { typescript: [] } },
+	},
+	{
+		// TypeScript
+		files: ['**/*.{ts,tsx}'],
+		languageOptions: {
+			parserOptions: {
+				// https://typescript-eslint.io/getting-started/typed-linting/
+				projectService: true,
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+		rules: {
+			'@typescript-eslint/no-unused-vars': [2, { argsIgnorePattern: '^_', ignoreRestSiblings: true }],
+			'@typescript-eslint/prefer-readonly-parameter-types': [
+				1,
+				{
+					allow: [
+						{ from: 'lib', name: 'URL' },
+						{ from: 'package', package: 'json-schema', name: 'JSONSchema7' },
+						{ from: 'package', package: 'json-schema', name: 'JSONSchema7Definition' },
+					],
+					checkParameterProperties: false,
+					ignoreInferredTypes: true,
+				},
+			],
+		},
+	},
+	{
+		// React
+		files: ['**/*.tsx'],
+		rules: {
+			// https://github.com/facebook/react/issues/28313
+			...reactHooksPlugin.configs.recommended.rules,
+			'react/display-name': 0,
+			'react/prop-types': 0,
+			'react-refresh/only-export-components': 'warn',
+			'unicorn/filename-case': 0,
+		},
+	},
+	{
+		files: ['**/*.spec.ts', '**/*.spec.tsx'],
+		rules: {
+			'testing-library/prefer-user-event': 2,
+			'testing-library/no-manual-cleanup': 0,
+		},
+	},
+	{
+		files: ['vitest.config.ts'],
+		rules: {
+			'import/no-default-export': 0,
+		},
+	},
+];

eslint.config.mjs

@@ -7,7 +7,7 @@
 		"dev": "vite",
 		"build": "tsc && vite build",
 		"lint": "run-s lint:eslint lint:markuplint lint:prettier lint:cspell",
-		"lint:eslint": "eslint src --ext ts,tsx",
+		"lint:eslint": "eslint src",
 		"lint:markuplint": "markuplint src/**/*.tsx",
 		"lint:prettier": "prettier --check 'src/**/*.{js,ts,tsx}'",
 		"lint:cspell": "cspell src/**/* --no-progress",
@@ -36,9 +36,10 @@
 		"@commitlint/cli": "^19.4.0",
 		"@commitlint/config-conventional": "^19.2.2",
 		"@egoist/tailwindcss-icons": "1.8.1",
+		"@eslint/js": "^9.20.0",
 		"@iconify-json/heroicons-solid": "1.1.12",
 		"@iconify-json/majesticons": "1.1.12",
-		"@markuplint-dev/eslint-config": "^1.0.1",
+		"@markuplint-dev/eslint-config": "^1.0.11",
 		"@markuplint-dev/prettier-config": "^1.0.1",
 		"@markuplint/jsx-parser": "4.7.5",
 		"@markuplint/react-spec": "4.5.5",
@@ -52,16 +53,16 @@
 		"@types/react": "18.3.3",
 		"@types/react-dom": "18.3.0",
 		"@types/semver": "7.5.8",
-		"@typescript-eslint/eslint-plugin": "7",
 		"@vitejs/plugin-react": "4.3.1",
+		"@vitest/eslint-plugin": "^1.1.26",
 		"autoprefixer": "10.4.20",
 		"cspell": "8.13.3",
-		"eslint": "8",
-		"eslint-plugin-react": "7.35.0",
-		"eslint-plugin-react-hooks": "4.6.2",
-		"eslint-plugin-react-refresh": "0.4.9",
-		"eslint-plugin-testing-library": "6.3.0",
-		"eslint-plugin-vitest": "0.5.4",
+		"eslint": "^9.20.0",
+		"eslint-plugin-react": "^7.37.4",
+		"eslint-plugin-react-hooks": "^5.1.0",
+		"eslint-plugin-react-refresh": "^0.4.18",
+		"eslint-plugin-testing-library": "^7.1.1",
+		"globals": "^15.14.0",
 		"husky": "^9.1.5",
 		"jsdom": "24.1.1",
 		"lint-staged": "^15.2.9",

package.json

@@ -16,6 +16,7 @@ export const ConsoleOutput = forwardRef<ConsoleOutputRef, Props>((_, ref) => {
 
 	useEffect(() => {
 		if (wrapperRef.current) {
+			// eslint-disable-next-line unicorn/prefer-global-this -- fix it later
 			const elementStyle = window.getComputedStyle(wrapperRef.current);
 			const terminal = new Terminal({
 				theme: {

src/components/ConsoleOutput.tsx

@@ -8,6 +8,7 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+// eslint-disable-next-line unicorn/text-encoding-identifier-case -- fix it later
 const content = fs.readFileSync(path.resolve(__dirname, './constants.json'), { encoding: 'utf-8' });
 const constants = JSON.parse(content);