Configure ESLint and Prettier

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

Justfile

@@ -1,10 +1,14 @@
 # Start development server
-dev:
-    # pnpm dev
+serve-dev:
+    pnpm dev
+
+# Start production preview server
+serve-preview:
+    pnpm preview
 
 # Build for production
 build:
-    # pnpm build
+    pnpm build
     # cargo build
 
 # Run tests
@@ -14,9 +18,9 @@ test:
 
 # Run linter
 lint:
-    # pnpm lint
+    pnpm lint
 
 # Format code
 format:
-    # pnpm fmt
+    pnpm format
     # cargo fmt

TODO.md

@@ -14,10 +14,7 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 
 ### Vue Project Scaffold
 - [x] Initialize Vue 3 project with Vite and TypeScript
-- [ ] Configure TypeScript with strict mode
-- [ ] Add ESLint and Prettier configuration
-- [ ] Create `.gitignore` for node_modules, dist, .env
-- [ ] Set up path aliases (`@/` for `src/`)
+- [x] Add ESLint and Prettier configuration
 - [ ] Create folder structure (`components/`, `composables/`, `stores/`, `types/`)
 - [ ] Add Pinia for state management
 - [ ] Verify hot module replacement works

eslint.config.js

@@ -0,0 +1,20 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import pluginVue from 'eslint-plugin-vue'
+import eslintConfigPrettier from 'eslint-config-prettier'
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules'] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser,
+      },
+    },
+  },
+  eslintConfigPrettier
+)

package.json

@@ -6,16 +6,24 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{ts,vue,css,html}\""
   },
   "dependencies": {
     "vue": "^3.5.24"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.7.0",
+    "prettier": "^3.8.1",
     "typescript": "~5.9.3",
+    "typescript-eslint": "^8.54.0",
     "vite": "^7.2.4",
     "vue-tsc": "^3.1.4"
   }

src/components/HelloWorld.vue

@@ -19,15 +19,12 @@ const count = ref(0)
 
   <p>
     Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
+    official Vue + Vite starter
   </p>
   <p>
     Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
+    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
       >Vue Docs Scaling up Guide</a
     >.
   </p>