enforce code formatting and linting

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_size = 4
+
+[*.{js,jsx,json,yml,yaml,md,css,scss}]
+indent_style = space
+
+[{**/*.{yml,yaml,json}}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -106,11 +106,5 @@ dist
 # Keycloak file
 keycloak.json
 
-# js config file
-jsconfig.json
-
-# Prettier format
-.prettierrc
-
 # AutoTab config
 .autotab.d/

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm exec lint-staged

.prettierignore

@@ -0,0 +1,14 @@
+node_modules/
+dist/
+coverage/
+pnpm-lock.yaml
+
+# Build / generated
+components/console/dist/
+
+# Helm / templating — Prettier can break Go-template syntax
+charts/**/templates/**
+charts/**/*.gotmpl
+
+# Large or generated assets
+*.min.js

components/console/README.md

@@ -35,7 +35,6 @@ components/console/
 │   ├── App.test.jsx
 │   ├── index.jsx                # Application entry point
 │   └── index.css
-├── eslint.config.js
 ├── index.html                   # Vite HTML entry
 ├── vite.config.js
 ├── package.json
@@ -87,8 +86,16 @@ node index.js
 
 ### Lint
 
+ESLint is configured at the **repository root** (`eslint.config.js`). From the repo root:
+
+```bash
+pnpm lint
+```
+
+To lint only console sources:
+
 ```bash
-pnpm --filter vms-console lint
+pnpm exec eslint components/console
 ```
 
 ## Dependencies
@@ -105,15 +112,17 @@ pnpm --filter vms-console lint
 ### Theme Configuration
 
 The Carbon theme can be customized in `src/theme/theme.scss`. Currently using the g100 (dark) theme. Available themes:
+
 - `white` - Light theme
 - `g10` - Light gray theme
 - `g90` - Dark gray theme
 - `g100` - Dark theme (current)
 
 To change the theme, modify the `$theme` parameter in `src/theme/theme.scss`:
+
 ```scss
-@use '@carbon/react/scss/theme' with (
-  $theme: themes.$white  // Change to desired theme
+@use "@carbon/react/scss/theme" with (
+    $theme: themes.$white // Change to desired theme
 );
 ```
 
@@ -126,6 +135,7 @@ To change the theme, modify the `$theme` parameter in `src/theme/theme.scss`:
 ## Development Status
 
 All core features are implemented:
+
 - ✅ Project initialization
 - ✅ Carbon Design System integration
 - ✅ Navigation structure
@@ -137,6 +147,7 @@ All core features are implemented:
 ## Future Development
 
 Each page includes a blank panel ready for content development:
+
 - Dashboard metrics and widgets
 - Network configuration interfaces
 - TLS certificate management
@@ -146,6 +157,7 @@ Each page includes a blank panel ready for content development:
 ## Browser Support
 
 Supports all modern browsers:
+
 - Chrome (latest)
 - Firefox (latest)
 - Safari (latest)
@@ -158,6 +170,7 @@ This project is part of the VMS Console application.
 ## Contributing
 
 When adding new features:
+
 1. Follow Carbon Design System guidelines
 2. Maintain consistent component structure
 3. Update navigation as needed

components/console/package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -21,14 +20,9 @@
     "vite-express": "^0.22.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.5.0",
     "vite": "^8.0.9"
   }
 }

eslint.config.js

@@ -0,0 +1,82 @@
+import js from "@eslint/js";
+import globals from "globals";
+import vitest from "@vitest/eslint-plugin";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import eslintConfigPrettier from "eslint-config-prettier";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+const unusedVarsRule = ["error", { varsIgnorePattern: "^[A-Z_]|^_", argsIgnorePattern: "^_" }];
+const commonRules = {
+    "no-unused-vars": unusedVarsRule,
+    "prefer-const": "error",
+    "no-var": "error",
+};
+
+export default defineConfig([
+    globalIgnores(["**/dist/**", "**/coverage/**", "**/node_modules/**", "charts/**/templates/**"]),
+
+    // controllers + shared modules
+    {
+        files: [
+            "modules/**/*.{js,jsx}",
+            "components/management-controller/**/*.{js,jsx}",
+            "components/site-controller/**/*.{js,jsx}",
+            "tests/**/*.{js,jsx}",
+            "*.js",
+        ],
+        extends: [js.configs.recommended],
+        languageOptions: {
+            ecmaVersion: "latest",
+            sourceType: "module",
+            globals: globals.node,
+        },
+        rules: {
+            ...commonRules,
+        },
+    },
+
+    // Console
+    {
+        files: ["components/console/**/*.{js,jsx}"],
+        extends: [
+            js.configs.recommended,
+            reactHooks.configs.flat.recommended,
+            reactRefresh.configs.vite,
+        ],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+            parserOptions: {
+                ecmaVersion: "latest",
+                ecmaFeatures: { jsx: true },
+                sourceType: "module",
+            },
+        },
+        rules: {
+            ...commonRules,
+            "react-hooks/immutability": "off",
+            "react-hooks/set-state-in-effect": "off",
+            "react-hooks/rules-of-hooks": "error",
+        },
+    },
+
+    // Vitest tests
+    {
+        files: ["**/*.test.js"],
+        extends: [js.configs.recommended, vitest.configs.recommended],
+        languageOptions: {
+            ecmaVersion: "latest",
+            sourceType: "module",
+            globals: {
+                ...globals.node,
+                ...vitest.environments.env.globals,
+            },
+        },
+        rules: {
+            ...commonRules,
+        },
+    },
+
+    eslintConfigPrettier,
+]);

package.json

@@ -5,6 +5,11 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepare": "husky",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:unit": "vitest run --project unit",
@@ -15,11 +20,30 @@
     "cluster:down": "tests/integration/kind/scripts/cluster-down.sh"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@vitest/eslint-plugin": "^1.6.23",
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/ui": "4.1.9",
+    "eslint": "^10.7.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
     "express": "^4.22.1",
+    "globals": "^17.7.0",
+    "husky": "^9.1.7",
     "js-yaml": "^4.1.1",
+    "lint-staged": "^17.0.8",
+    "prettier": "^3.9.5",
     "supertest": "^7.1.4",
     "vitest": "^4.1.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md,yml,yaml,css,scss}": [
+      "prettier --write"
+    ]
   }
 }