Frontend: Disable Prettier reflow; enforce indent/quotes via ESLint #4966

.claude/rules/frontend-rules.md

@@ -12,6 +12,8 @@
 ## Frontend Formatting
 
 - ESLint + Prettier own formatting. After edits run `make fmt-js` (or `npm run fmt` inside `frontend/`) and `make lint-js` to verify; `frontend/eslint.config.mjs` is the flat-config source of truth.
+- The dev container preinstalls `eslint` and `prettier` on the global `PATH` at the same version `frontend/package.json` pins (`eslint --version` should match the `eslint` entry in `frontend/package.json`). Invoke them directly (e.g. `eslint --fix tests/`) from `frontend/` — no need for `npx`, which adds a spawn step and an extra resolution layer.
+- Prettier reflow is **not** part of `make fmt-js` / `eslint --fix` — the `prettier/prettier` rule is set to `"off"` so intentional newlines (multi-line method chains, vertical predicate lists) are preserved. Run `prettier --write <file>` explicitly when a full reflow is wanted; do not run it blanket across `src/` or `tests/`.
 - Prettier uses `printWidth: 160`, double quotes, semicolons, `trailingComma: "es5"`, and `proseWrap: "never"` (see `frontend/.prettierrc.json`). Do not hand-wrap long lines — let Prettier decide. CSS/SCSS use `tabWidth: 4`.
 - The repo-root `.editorconfig` covers indentation and newline style; don't override it locally.
 - Vue SFC block order is `<template>` → `<script>` → `<style>`; keep it consistent with existing components.

frontend/eslint.config.mjs

@@ -72,11 +72,12 @@ export default defineConfig([
       },
     },
     rules: {
-      // Defer indentation to Prettier so we don't get conflicting expectations.
-      "indent": "off",
+      // Match what Prettier was producing: 2-space indent (4 for CSS lives in .prettierrc), switch
+      // cases nested one level, method-chain continuations indented one level.
+      "indent": ["error", 2, { SwitchCase: 1, MemberExpression: 1 }],
       "linebreak-style": ["error", "unix"],
       "quotes": [
-        "off",
+        "error",
         "double",
         {
           avoidEscape: true,
@@ -109,19 +110,12 @@ export default defineConfig([
           multiline: "ignore",
         },
       ],
-      "prettier/prettier": [
-        "warn",
-        {
-          printWidth: 160,
-          semi: true,
-          singleQuote: false,
-          bracketSpacing: true,
-          trailingComma: "es5",
-          htmlWhitespaceSensitivity: "css",
-          quoteProps: "consistent",
-          proseWrap: "never",
-        },
-      ],
+      // Prettier reflow is off — it collapses intentional newlines (multi-line method chains,
+      // predicate lists) that help readability. Quote style and indent are enforced by the
+      // ESLint rules above instead. Run `prettier --write <file>` manually for full reflow.
+      // The plugin:prettier/recommended extends above still applies eslint-config-prettier,
+      // which disables ESLint stylistic rules that would conflict with Prettier-formatted code.
+      "prettier/prettier": "off",
     },
   },
 ]);

frontend/src/component/photo/edit/people.vue

@@ -252,13 +252,13 @@ export default {
       const subjectPromise = cached
         ? Promise.resolve(new Subject(cached))
         : this.loadSubject(marker.SubjUID).then((subject) => {
-            if (!subject) {
-              this.$notify.error(this.$gettext("Person not found"));
-              return null;
-            }
-            this.updatePersonList(subject);
-            return subject;
-          });
+          if (!subject) {
+            this.$notify.error(this.$gettext("Person not found"));
+            return null;
+          }
+          this.updatePersonList(subject);
+          return subject;
+        });
 
       return subjectPromise
         .then((subject) => {
@@ -287,12 +287,12 @@ export default {
       const subjectPromise = cached
         ? Promise.resolve(new Subject(cached))
         : this.loadSubject(marker.SubjUID).then((subject) => {
-            if (!subject) {
-              this.$notify.error(this.$gettext("Person not found"));
-              return null;
-            }
-            return subject;
-          });
+          if (!subject) {
+            this.$notify.error(this.$gettext("Person not found"));
+            return null;
+          }
+          return subject;
+        });
 
       return subjectPromise
         .then((subject) => {