From 690147726eb1f731cde026609f12da112993d522 Mon Sep 17 00:00:00 2001 From: Sawaymaan Singh Date: Sun, 13 Sep 2026 01:20:46 +0200 Subject: [PATCH] chore: configure ESLint and Prettier Add Prettier config and ignore file, disable conflicting ESLint rules via eslint-config-prettier, add lint/format scripts, and format the project. Closes #2 --- country-explorer/.prettierignore | 17 +++++++++++ country-explorer/.prettierrc.json | 8 ++++++ country-explorer/README.md | 10 +++---- country-explorer/eslint.config.js | 18 +++++++----- country-explorer/package-lock.json | 34 ++++++++++++++++++++++ country-explorer/package.json | 5 ++++ country-explorer/src/App.css | 6 ++-- country-explorer/src/App.tsx | 46 +++++++++--------------------- country-explorer/src/index.css | 6 ++-- country-explorer/src/main.tsx | 10 +++---- country-explorer/tsconfig.json | 5 +--- country-explorer/vite.config.ts | 7 ++--- 12 files changed, 105 insertions(+), 67 deletions(-) create mode 100644 country-explorer/.prettierignore create mode 100644 country-explorer/.prettierrc.json diff --git a/country-explorer/.prettierignore b/country-explorer/.prettierignore new file mode 100644 index 0000000..1786133 --- /dev/null +++ b/country-explorer/.prettierignore @@ -0,0 +1,17 @@ +# Dependencies +node_modules + +# Build output +dist +dist-ssr + +# Logs +*.log + +# Auto-generated, not meant to be formatted +package-lock.json + +# Editor / OS +.vscode +.idea +.DS_Store diff --git a/country-explorer/.prettierrc.json b/country-explorer/.prettierrc.json new file mode 100644 index 0000000..ef2237c --- /dev/null +++ b/country-explorer/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "semi": true, + "singleQuote": true, + "trailingComma": "all", + "printWidth": 100, + "tabWidth": 2, + "endOfLine": "lf" +} diff --git a/country-explorer/README.md b/country-explorer/README.md index 2d31cb6..d8cb914 100644 --- a/country-explorer/README.md +++ b/country-explorer/README.md @@ -40,16 +40,15 @@ export default defineConfig([ // other options... }, }, -]) - +]); ``` You can also install [eslint-plugin-react-x](https://npmx.dev/package/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://npmx.dev/package/eslint-plugin-react-dom) for React-specific lint rules: ```js // eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' +import reactX from 'eslint-plugin-react-x'; +import reactDom from 'eslint-plugin-react-dom'; export default defineConfig([ globalIgnores(['dist']), @@ -70,6 +69,5 @@ export default defineConfig([ // other options... }, }, -]) - +]); ``` diff --git a/country-explorer/eslint.config.js b/country-explorer/eslint.config.js index ef614d2..85a3641 100644 --- a/country-explorer/eslint.config.js +++ b/country-explorer/eslint.config.js @@ -1,9 +1,10 @@ -import js from '@eslint/js' -import globals from 'globals' -import reactHooks from 'eslint-plugin-react-hooks' -import reactRefresh from 'eslint-plugin-react-refresh' -import tseslint from 'typescript-eslint' -import { defineConfig, globalIgnores } from 'eslint/config' +import js from '@eslint/js'; +import globals from 'globals'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRefresh from 'eslint-plugin-react-refresh'; +import tseslint from 'typescript-eslint'; +import { defineConfig, globalIgnores } from 'eslint/config'; +import eslintConfigPrettier from 'eslint-config-prettier'; export default defineConfig([ globalIgnores(['dist']), @@ -14,9 +15,12 @@ export default defineConfig([ tseslint.configs.recommended, reactHooks.configs.flat.recommended, reactRefresh.configs.vite, + // Must stay last: turns off ESLint stylistic rules that would + // otherwise conflict with Prettier's formatting. + eslintConfigPrettier, ], languageOptions: { globals: globals.browser, }, }, -]) +]); diff --git a/country-explorer/package-lock.json b/country-explorer/package-lock.json index bbd4e70..9a9f88a 100644 --- a/country-explorer/package-lock.json +++ b/country-explorer/package-lock.json @@ -18,9 +18,11 @@ "@types/react-dom": "^19.2.7", "@vitejs/plugin-react": "^6.1.1", "eslint": "^10.10.0", + "eslint-config-prettier": "^10.1.5", "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.5.6", "globals": "^17.12.0", + "prettier": "^3.8.3", "typescript": "~6.0.2", "typescript-eslint": "^8.69.0", "vite": "^8.3.0" @@ -1459,6 +1461,22 @@ } } }, + "node_modules/eslint-config-prettier": { + "version": "10.1.8", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz", + "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", + "dev": true, + "license": "MIT", + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "funding": { + "url": "https://opencollective.com/eslint-config-prettier" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-plugin-react-hooks": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz", @@ -2356,6 +2374,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.9.6", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.6.tgz", + "integrity": "sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/country-explorer/package.json b/country-explorer/package.json index e689424..e36a244 100644 --- a/country-explorer/package.json +++ b/country-explorer/package.json @@ -7,6 +7,9 @@ "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", + "lint:fix": "eslint . --fix", + "format": "prettier --write .", + "format:check": "prettier --check .", "preview": "vite preview" }, "dependencies": { @@ -20,9 +23,11 @@ "@types/react-dom": "^19.2.7", "@vitejs/plugin-react": "^6.1.1", "eslint": "^10.10.0", + "eslint-config-prettier": "^10.1.5", "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.5.6", "globals": "^17.12.0", + "prettier": "^3.8.3", "typescript": "~6.0.2", "typescript-eslint": "^8.69.0", "vite": "^8.3.0" diff --git a/country-explorer/src/App.css b/country-explorer/src/App.css index f90339d..d6c7c9a 100644 --- a/country-explorer/src/App.css +++ b/country-explorer/src/App.css @@ -42,8 +42,7 @@ z-index: 1; top: 34px; height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); + transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) scale(1.4); } .vite { @@ -51,8 +50,7 @@ top: 107px; height: 26px; width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); + transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) scale(0.8); } } diff --git a/country-explorer/src/App.tsx b/country-explorer/src/App.tsx index 9ca8e8d..9ec34bc 100644 --- a/country-explorer/src/App.tsx +++ b/country-explorer/src/App.tsx @@ -1,11 +1,11 @@ -import { useState } from 'react' -import heroImg from './assets/hero.png' -import reactLogo from './assets/react.svg' -import viteLogo from './assets/vite.svg' -import './App.css' +import { useState } from 'react'; +import heroImg from './assets/hero.png'; +import reactLogo from './assets/react.svg'; +import viteLogo from './assets/vite.svg'; +import './App.css'; function App() { - const [count, setCount] = useState(0) + const [count, setCount] = useState(0); return ( <> @@ -21,11 +21,7 @@ function App() { Edit src/App.tsx and save to test HMR

- @@ -63,11 +59,7 @@ function App() {