Reformat nuxt-app and gate formatting in CI

.github/workflows/run_tests.yml

@@ -53,6 +53,12 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      # Keep `prettier:check`, not `prettier` — the latter writes, so it would pass by mutating.
+      # Without this step formatting is voluntary, which is how 90 files drifted after the Prettier
+      # 3.2 -> 3.9 bump in Phase 2 with nothing noticing.
+      - name: Check formatting
+        run: npm run prettier:check
+
       # Keep `lint`, not `eslint` — the latter runs with --fix, so it mutates instead of failing.
       - name: Run ESLint
         run: npm run lint

AGENTS.md

@@ -111,6 +111,22 @@ Additional hints can be found in:
 - **Imports**: Auto-sorted, use `type` keyword for type-only imports
 - **Components**: PascalCase, single-word names allowed
 
+### Formatting is enforced, not requested
+
+CI runs `npm run prettier:check` in `nuxt-app`, so unformatted code fails the build. Nobody should be
+expected to remember the formatter — turn on **format on save** and it never comes up:
+
+- **WebStorm**: Settings → Languages & Frameworks → JavaScript → Prettier → *On save*
+- **VS Code**: the Prettier extension, plus `"editor.formatOnSave": true`
+
+Both read `nuxt-app/.prettierrc` on their own, and `nuxt-app/.editorconfig` covers indentation and line
+endings before that is set up. Keep those two in step — they overlap, and an editor that indents to a
+different width than Prettier produces a diff on every save. If a PR fails the check, `npm run prettier`
+fixes it — never hand-edit to satisfy it.
+
+Note that `npm run lint` (ESLint) needs `nuxt prepare` to have run first, since `eslint.config.mjs`
+extends the generated `.nuxt/eslint.config.mjs`. `npm ci` does this via `postinstall`.
+
 ## Key Patterns
 
 ### Type System

nuxt-app/.editorconfig

@@ -1,9 +1,14 @@
 # editorconfig.org
+#
+# Keep in step with .prettierrc — Prettier is the source of truth and CI runs `npm run
+# prettier:check`. This file exists so an editor indents correctly *before* the formatter runs; where
+# the two disagree, the editor loses and every save produces a diff.
 root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 4
+max_line_length = 120
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

nuxt-app/.prettierrc

@@ -9,7 +9,6 @@
     "jsxSingleQuote": false,
     "trailingComma": "es5",
     "bracketSpacing": true,
-    "jsxBracketSameLine": false,
     "arrowParens": "always",
     "endOfLine": "lf"
 }

nuxt-app/README.md

@@ -11,8 +11,8 @@ npm install
 
 Prepare your IDE as follows:
 
--   https://prettier.io/docs/en/webstorm
--   https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_automatic_configuration
+- https://prettier.io/docs/en/webstorm
+- https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_automatic_configuration
 
 ## Development Server
 

nuxt-app/components/BackgroundSpotlights.vue

@@ -1,27 +1,24 @@
 <template>
-  <!--<BackgroundSpotlight class="absolute z-20 h-192 w-auto" :class="position"/>-->
-  <div
-class='h-192 w-160 bg-no-repeat bg-contain absolute'
-       :class="position"
-       :style="{
-         backgroundImage: `url(${backgroundSpotlightImage})`,
-         zIndex: index,
-       }"
-  ></div>
+    <!--<BackgroundSpotlight class="absolute z-20 h-192 w-auto" :class="position"/>-->
+    <div
+        class="absolute h-192 w-160 bg-contain bg-no-repeat"
+        :class="position"
+        :style="{
+            backgroundImage: `url(${backgroundSpotlightImage})`,
+            zIndex: index,
+        }"
+    ></div>
 </template>
 
 <script setup lang="ts">
+import backgroundSpotlightImage from '~/assets/images/spotlights.png'
 import BackgroundSpotlight from '~/assets/images/spotlights.svg'
-import backgroundSpotlightImage from '~/assets/images/spotlights.png';
-
 import { defineProps } from 'vue'
 
 const props = defineProps<{
-  position: string
-  index: string
-}>();
-
+    position: string
+    index: string
+}>()
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>