Update eslint config to new format

Author: dpolugic

.eslintrc.cjs

@@ -1,4 +1,4 @@
-const config = {
+export default {
   printWidth: 110,
   trailingComma: 'es5',
   semi: false,
@@ -8,5 +8,3 @@ const config = {
   quoteProps: 'consistent',
   plugins: ['prettier-plugin-organize-imports'],
 }
-
-module.exports = config

.prettierrc.cjs .prettierrc.mjs.prettierrc.cjs renamed to .prettierrc.mjs

@@ -0,0 +1,43 @@
+import { fixupConfigRules } from "@eslint/compat";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    files: ["**/*.ts", "**/*.tsx"],
+    ignores: ["**/dist"],
+}, ...fixupConfigRules(compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+)), {
+    plugins: {
+        "react-refresh": reactRefresh,
+    },
+
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+        },
+
+        parser: tsParser,
+    },
+
+    rules: {
+        "react-refresh/only-export-components": ["warn", {
+            allowConstantExport: true,
+        }],
+    },
+}];

eslint.config.mjs

@@ -6,9 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "find-unused": "ts-unused-exports ./tsconfig.json --showLineNumber"
+    "find-unused": "ts-unused-exports ./tsconfig.json --showLineNumber",
+    "format": "prettier --write ./src"
   },
   "dependencies": {
     "prettier": "^3.5.1",
@@ -18,6 +19,7 @@
     "styled-components": "^6.1.15"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.6",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "^8.24.0",
@@ -26,6 +28,7 @@
     "eslint": "^9.20.1",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
     "ts-unused-exports": "^11.0.1",
     "typescript": "^5.7.3",
     "vite": "^6.1.0"

package.json

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+)