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:
1 parent
ce8079355b
commit
e64f65642f
40 files changed
+1469
-172
No files matched your search
@@ -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.
|
||||
|
||||
Reference in new issue
Block a user