From cafba215232f3f2dbd5637c2edc160e9bb9b719f Mon Sep 17 00:00:00 2001
From: "viet-anh.n" <viet-anh.n@scopicsoftware.com>
Date: Mon, 20 Jul 2026 10:35:51 +0000
Subject: [PATCH] Configure ESLint, Prettier, and TypeScript strict mode

- Add package.json with ESLint v9, typescript-eslint, eslint-plugin-react,
  eslint-plugin-react-hooks, eslint-config-prettier, Prettier, and TypeScript
  as devDependencies; includes lint, format, and format:check npm scripts
- Add eslint.config.js (flat config) with TypeScript recommended rules,
  React + React Hooks plugin rules, and prettier conflict suppression
- Add tsconfig.json with strict: true, ES2020 target, DOM libs, react-jsx
- Add .prettierrc with single quotes, 2-space indent, ES5 trailing commas
- Update CLAUDE.md to document new tooling and commands

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .prettierrc      |  6 ++++++
 CLAUDE.md        | 30 ++++++++++++++++++++++++------
 eslint.config.js | 24 ++++++++++++++++++++++++
 package.json     | 20 ++++++++++++++++++++
 tsconfig.json    | 15 +++++++++++++++
 5 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 eslint.config.js
 create mode 100644 package.json
 create mode 100644 tsconfig.json

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0175252
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80
+}
diff --git a/CLAUDE.md b/CLAUDE.md
index 15f587d..f6611df 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -6,15 +6,23 @@ Greenfield project. Implementation is driven by the Vexa AI-SDLC pipeline (Jira
 
 ```
 /
-├── index.html  # Calculator UI (semantic HTML5)
-├── styles.css  # Responsive CSS layout and styling
-├── README.md   # Project overview
-└── CLAUDE.md   # This file
+├── index.html      # Calculator UI (semantic HTML5)
+├── styles.css      # Responsive CSS layout and styling
+├── package.json    # Dev dependencies and npm scripts
+├── eslint.config.js # ESLint flat config (TypeScript + React rules)
+├── tsconfig.json   # TypeScript compiler config (strict mode)
+├── .prettierrc     # Prettier formatting config
+├── README.md       # Project overview
+└── CLAUDE.md       # This file
 ```
 
 ## Build Commands
 
-No build system has been configured yet. Update this section once a language/framework is chosen and dependencies are added.
+No build step configured yet. Install dependencies with:
+
+```bash
+npm install
+```
 
 ## Test Commands
 
@@ -24,6 +32,14 @@ No test suite has been configured yet. Update this section once testing infrastr
 
 No dev server or REPL is configured yet. Update this section once the implementation begins.
 
+## Lint and Format Commands
+
+```bash
+npm run lint          # Run ESLint
+npm run format        # Format all files with Prettier
+npm run format:check  # Check formatting without writing (CI)
+```
+
 ## Architecture Notes
 
 - **Domain**: Simple Calculator — arithmetic operations (add, subtract, multiply, divide at minimum).
@@ -32,4 +48,6 @@ No dev server or REPL is configured yet. Update this section once the implementa
 
 ## Code Style
 
-No linter or formatter has been configured yet. Update this section once tooling is set up.
+- **Linter**: ESLint v9 (flat config) with `typescript-eslint` recommended rules, `eslint-plugin-react`, `eslint-plugin-react-hooks`, and `eslint-config-prettier`.
+- **Formatter**: Prettier — single quotes, 2-space indent, ES5 trailing commas, 80-char line width.
+- **TypeScript**: `strict: true` enabled in `tsconfig.json`.
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..d391c37
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,24 @@
+import tseslint from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import prettierConfig from 'eslint-config-prettier';
+
+export default [
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  prettierConfig,
+];
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..db09869
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "test-simple-calculator",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "prettier": "^3.0.0",
+    "typescript": "^5.0.0"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..84fa338
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true
+  },
+  "include": ["src", "*.ts", "*.tsx"]
+}