Add ESLint and Prettier

Prettier owns formatting: .prettierrc.json, format and format:check scripts, and
a one-off pass over the repo so the check is green from the start. Embedded
language formatting is off deliberately - the renderers build HTML in html
tagged templates and letting Prettier reflow those would change the markup
customers receive. docs/ is excluded because it is hand-wrapped prose, and shell
scripts have no Prettier parser.

ESLint covers the JavaScript: the two browser scripts, the build and check
scripts, and its own config. no-var is scoped out for the browser scripts on
purpose; they are plain ES5-shaped IIFEs and a hoisting difference would only
show up in a browser.

ESLint cannot lint the TypeScript here: typescript@7 is the native port with no
JavaScript compiler API, and typescript-eslint requires a 4.8-6.1 peer, so it
refuses to install and forcing it through would leave a parser that cannot read
the compiler. tsc --noEmit stays the TypeScript gate; README records the two
ways to change that.

lint and format:check now run in deploy.sh, and VS Code formats on save with
Prettier and surfaces ESLint findings.
This commit is contained in:
tanshu committed 2026-09-22 23:15:08 +05:30
1 parent ce8079355b
commit e64f65642f
40 files changed
+1469 -172

No files matched your search

+33 -7
View File
@@ -85,6 +85,32 @@ npm run verify # integrity of .dev/data
npm run check-site -- http://127.0.0.1:3000 # checks a running site from outside
```
### Linting and formatting
```sh
npm run lint # eslint
npm run lint:fix
npm run format # prettier --write
npm run format:check # what CI and deploy.sh run
```
Prettier owns formatting (`.prettierrc.json`); `docs/` is excluded because those
are hand-wrapped notes rather than code. `embeddedLanguageFormatting` is off on
purpose: the renderers build HTML inside `html` tagged template literals, and
letting Prettier reflow those would change the markup customers receive.
**ESLint does not lint the TypeScript, and cannot as things stand.** This project
uses the native TypeScript port (`typescript@7`), which ships no JavaScript
compiler API — and every ESLint TypeScript parser needs one. `typescript-eslint`
declares `typescript >=4.8.4 <6.1.0` as a peer and refuses to install; forcing it
through would leave a parser that cannot read the compiler it was given. The
TypeScript gate is therefore `npm run typecheck` (strict, with `noUnusedLocals`,
`noUncheckedIndexedAccess`, `exactOptionalPropertyTypes` and
`erasableSyntaxOnly`), and ESLint covers the JavaScript. To get ESLint over the
`.ts` files as well, either pin `typescript@5.9` — which supports everything this
project uses — and add `typescript-eslint`, or add `oxlint`, which parses
TypeScript without the compiler API.
Dragging Pages is the one interaction that only a browser can check, so there is
a harness for it. It needs `geckodriver` on PATH and a running dev server:
@@ -98,18 +124,18 @@ npm run check-dnd -- <set-id> none # just reports affordances
`.vscode/` holds launch configurations and tasks.
| Configuration | What it does |
| --- | --- |
| **Dev server (debug)** | runs `src/server.ts` with the dev environment, breakpoints live |
| **Dev server (watch, no debugger)** | `npm run dev` in a terminal |
| **Debug the open test file** | runs the file you have open under `node --test`, with child processes attached so breakpoints inside a test bind |
| **Check the running site** | prompts for a URL and runs `scripts/check-site.ts` |
| Configuration | What it does |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Dev server (debug)** | runs `src/server.ts` with the dev environment, breakpoints live |
| **Dev server (watch, no debugger)** | `npm run dev` in a terminal |
| **Debug the open test file** | runs the file you have open under `node --test`, with child processes attached so breakpoints inside a test bind |
| **Check the running site** | prompts for a URL and runs `scripts/check-site.ts` |
Breakpoints land in the `.ts` files themselves: Node strips types in place, so
line numbers are the ones you see. The debug configuration creates `.dev/site.env`
first (`preLaunchTask`), so a fresh clone serves a working admin immediately.
Tasks (Command Palette → *Run Task*) cover the same ground: seed, the dev server,
Tasks (Command Palette → _Run Task_) cover the same ground: seed, the dev server,
tests, typecheck, verify and repair. `.dev`, `.tmp` and `.npm-cache` are hidden
from the explorer, search and the file watcher, so a watched server does not
restart on its own data writes.