chore: add prettier, eslint, fix some components

2026-08-27 20:34:16 +05:00
parent 0acfa3aeb9
commit bc5a5d13c4
14 changed files with 1204 additions and 73 deletions
@@ -10,6 +10,23 @@
  Не использовать npm.
 - Сборка: `pnpm --dir web build`, проверка типов: `pnpm --dir web exec svelte-check --tsconfig ./tsconfig.json`,
  тесты: `pnpm --dir web test`.
+- Форматирование: `pnpm --dir web format` (Prettier + `prettier-plugin-svelte`,
+  конфиг `web/.prettierrc`, игнор `web/.prettierignore`). Проверка без записи:
+  `pnpm --dir web exec prettier --check .`.
+- Линтинг: `pnpm --dir web lint` (ESLint, flat-конфиг `web/eslint.config.js`).
+  Устроен инкрементально:
+  - На **весь код** — парсинг TS/Svelte + правило
+    `@typescript-eslint/consistent-type-imports` (запрет инлайн-тип-импортов).
+  - Полные `recommended`-наборы (`eslint` + `typescript-eslint` + `eslint-plugin-svelte`)
+    навешены **только на новый код** (`src/lib/components/kit/**`,
+    `src/routes/preview/**`), чтобы старый код не засыпался предсуществующими
+    ошибками. Когда старый дизайн удалён (C19), scoped-блок убирается и
+    `recommended` включается на весь код.
+  - **Scoped-пути двигаются вместе с папками** (см. `plan-redesign.md` §10):
+    на C17 `src/routes/preview/**` → `src/routes/**` (preview переезжает на
+    реальные маршруты), на C19 при переименовании `kit/`→`ui/` — и компонентный
+    glob. Не оставлять устаревшие пути в `eslint.config.js`.
+  - Для `*.svelte` выключен `prefer-const` (пропсы в Svelte 5 пишутся через `let`).

 ## Правила кода

@@ -20,20 +37,27 @@

 ```svelte
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
  interface Props {
    label: string;
    accent?: boolean;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
  }
+
  let { label, accent = false, children }: Props = $props();
 </script>
 ```

 Не использовать инлайн-дженерик `$props<{ ... }>()` — он тяжело читается и
-разносит тип и деструктуризацию по разным местам.
+разносит тип и деструктуризацию по разным местам. Также **не использовать
+инлайн-импорты в типах** (`children?: import('svelte').Snippet;`) — все
+`import type` поднимаются наверх файла. Это правило **включено в ESLint**
+(`@typescript-eslint/consistent-type-imports`, `prefer: 'type-imports'`).

-> Позже планируется линтер/правило (eslint-plugin-svelte / custom rule),
-> запрещающее `$props<...>()` и требующее `interface Props`.
+> Правило «всегда `interface Props` + `let {...}: Props = $props()`» стандартным
+> ESLint-правилом не покрывается — остаётся конвенцией. Кастомное правило
+> (eslint-plugin-svelte / свой visitor) — TODO, позже.

 ### Дизайн: новый визуальный язык

@@ -342,13 +342,23 @@ src/routes/preview/tools/[id]/+page.svelte

 - [ ] **[C17]** Перенести `preview/*` → реальные маршруты (move), удалить
      `(old)/`, корневой `+layout.svelte` импортирует `design2.css` + новый shell.
-      Убрать флаг/кнопку.
+      Убрать флаг/кнопку. **И обновить `newCode` в `web/eslint.config.js`:** заменить
+      `src/routes/preview/**` на `src/routes/**` (после переезда все маршруты —
+      новый дизайн), компонентный glob `src/lib/components/kit/**` пока оставить.
 - [ ] **[C18]** Правки импортов/редиректов после переноса, проверка билда.

 ### Шаг 6. Удаление старого

 - [ ] **[C19]** Удалить старое `ui/`, прочие старые компоненты, старый `app.css`,
-      неиспользуемые классы. Переименовать `kit/` → `ui/` (если решено на C1).
+      неиспользуемые классы. Переименовать `kit/` → `ui/` (если решено на C1 —
+      тогда в `eslint.config.js` обновить и компонентный glob).
+      **И раскрыть ESLint `recommended` на весь код** — убрать scoped-блок
+      `newCode` в `web/eslint.config.js` (см. AGENTS.md), прогнать `lint` и
+      починить всплывшие ошибки в оставшемся коде.
+      _Примечание: доменные модули (`lib/core`, `lib/registry`, тесты и т.п.) —
+      это не «старый дизайн», у них свой линт-долг; расширение `recommended` на
+      них может выдать много ошибок. Решить на C19: либо чиним сразу, либо
+      расширяем scoped только на `src/routes/**` + `src/lib/components/**`._
 - [ ] **[C20]** Финальный проход по брейкпоинтам 1200/1100/800/480; build без
      предупреждений; `grep` по старым токенам/классам пуст.
 - [ ] **[C21]** _(опционально)_ Удалить `refs/` и `refs-html/` из репо — они
@@ -357,7 +367,7 @@ src/routes/preview/tools/[id]/+page.svelte
 > Если какой-то коммит тянет за собой > 500 строк (например, C6/C7),
 > разбивать на под-коммиты по 2–4 компонента. Тесты/билд прогонять после
 > каждого коммита, чтобы регрессия локализовалась одним шагом назад.
-
+>
 > **Атомарность и точки «поломки» между коммитами.**
 >
 > - C1+C2 уже сделаны вместе (связаны: нейтральный root без `(old)`-layout
@@ -6,7 +6,8 @@
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "pnpm --dir web dev",
-    "build": "pnpm --dir web build"
+    "build": "pnpm --dir web build",
+    "format": "pnpm --dir web format"
  },
  "keywords": [],
  "author": "Ku6epXBOCTuK",
@@ -0,0 +1,8 @@
+node_modules
+build
+.svelte-kit
+dist
+pnpm-lock.yaml
+static
+*.log
+.DS_Store
@@ -0,0 +1,23 @@
+{
+	"useTabs": true,
+	"singleQuote": false,
+	"trailingComma": "all",
+	"printWidth": 80,
+	"proseWrap": "always",
+	"endOfLine": "lf",
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.md",
+			"options": {
+				"useTabs": false
+			}
+		},
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}
@@ -0,0 +1,91 @@
+import js from "@eslint/js";
+import prettier from "eslint-config-prettier";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+import svelteParser from "svelte-eslint-parser";
+import tseslint from "typescript-eslint";
+
+// Новый код редизайна: к нему применяем полные recommended-наборы уже сейчас.
+// Когда старый дизайн удалим (C19), этот scoped-блок убирается и recommended
+// включается на весь код (см. план-redesign §10, шаг 6).
+const newCode = ["**/src/lib/components/kit/**", "**/src/routes/preview/**"];
+
+export default tseslint.config(
+	{
+		ignores: [
+			"**/node_modules/**",
+			"**/build/**",
+			"**/.svelte-kit/**",
+			"**/dist/**",
+			"**/static/**",
+		],
+	},
+	// Минимально на весь код: парсинг TS/Svelte + запрет инлайн-тип-импортов.
+	{
+		files: ["**/*.ts", "**/*.svelte.ts", "**/*.svelte.js", "**/*.svelte"],
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+			parserOptions: {
+				projectService: {
+					allowDefaultProject: [
+						"vitest.config.ts",
+						"eslint.config.js",
+						"svelte.config.js",
+					],
+				},
+				extraFileExtensions: [".svelte"],
+			},
+		},
+		plugins: {
+			"@typescript-eslint": tseslint.plugin,
+		},
+		rules: {
+			// Инлайн-тип-импорты (import('x').Y) запрещены — только
+			// `import type { Y } from 'x'` наверху файла.
+			"@typescript-eslint/consistent-type-imports": [
+				"error",
+				{ prefer: "type-imports", fixStyle: "separate-type-imports" },
+			],
+		},
+	},
+	{
+		files: ["**/*.ts", "**/*.svelte.ts", "**/*.svelte.js"],
+		languageOptions: {
+			parser: tseslint.parser,
+		},
+	},
+	{
+		files: ["**/*.svelte"],
+		languageOptions: {
+			parser: svelteParser,
+			parserOptions: {
+				parser: tseslint.parser,
+			},
+		},
+	},
+	// Полные recommended-наборы — только на новый код.
+	...[
+		...(Array.isArray(js.configs.recommended)
+			? js.configs.recommended
+			: [js.configs.recommended]),
+		...tseslint.configs.recommended,
+		...svelte.configs["flat/recommended"],
+	].map((cfg) => ({
+		...cfg,
+		files: newCode,
+	})),
+
+	// В Svelte 5 пропсы деструктурируются через `let` (конвенция документации и
+	// наш AGENTS.md), поэтому prefer-const на них — ложноположительный.
+	{
+		files: ["**/*.svelte"],
+		rules: {
+			"prefer-const": "off",
+		},
+	},
+	// prettier — последним, чтобы гасить форматирующие правила из recommended.
+	prettier,
+);
@@ -10,15 +10,26 @@
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest run"
+		"test": "vitest run",
+		"format": "prettier --write .",
+		"lint": "eslint ."
 	},
 	"devDependencies": {
+		"@eslint/js": "^10.0.1",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.63.0",
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"eslint": "^10.9.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.23.0",
+		"globals": "^17.11.0",
+		"prettier": "^3.9.6",
+		"prettier-plugin-svelte": "^4.1.1",
 		"svelte": "^5.56.1",
 		"svelte-check": "^4.6.0",
+		"svelte-eslint-parser": "^1.8.1",
 		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.67.0",
 		"vite": "^8.0.16",
 		"vitest": "^4.1.11"
 	},
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import BlueprintGrid from './BlueprintGrid.svelte';
+	import BlueprintGrid from "./BlueprintGrid.svelte";

 	let { children } = $props();
 </script>
@@ -6,8 +6,16 @@
 		inset: 0;
 		pointer-events: none;
 		background-image:
-			linear-gradient(to right, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
-			linear-gradient(to bottom, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
+			linear-gradient(
+				to right,
+				color-mix(in srgb, var(--line) 45%, transparent) 1px,
+				transparent 1px
+			),
+			linear-gradient(
+				to bottom,
+				color-mix(in srgb, var(--line) 45%, transparent) 1px,
+				transparent 1px
+			);
 		background-size: 32px 32px;
 		opacity: 0.55;
 	}
@@ -1,9 +1,11 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	interface Props {
-		children?: import('svelte').Snippet;
-		size?: 'sm' | 'large';
+		children?: Snippet;
+		size?: "sm" | "large";
 	}
-	let { children, size = 'large' }: Props = $props();
+	let { children, size = "large" }: Props = $props();
 </script>

 <div class="checker-canvas checker-canvas--{size}">
@@ -19,8 +21,10 @@
 		place-items: center;
 		overflow: hidden;
 		background-color: #0b0f14;
-    background-image: linear-gradient(45deg, #1a2129 25%, transparent 25%),
-      linear-gradient(-45deg, #1a2129 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a2129 75%),
+		background-image:
+			linear-gradient(45deg, #1a2129 25%, transparent 25%),
+			linear-gradient(-45deg, #1a2129 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #1a2129 75%),
 			linear-gradient(-45deg, transparent 75%, #1a2129 75%);
 		background-size: 20px 20px;
 		background-position:
@@ -1,13 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	interface Props {
 		accent?: boolean;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 	}

 	let { accent = false, children }: Props = $props();
 </script>

-<span class="mono-label" class:accent={accent}>
+<span class="mono-label" class:accent>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import StatusDot from './StatusDot.svelte';
-	import MonoLabel from './MonoLabel.svelte';
+	import StatusDot from "./StatusDot.svelte";
+	import MonoLabel from "./MonoLabel.svelte";

 	interface Props {
 		label: string;
@@ -1,17 +1,17 @@
-@import '@fontsource/ibm-plex-sans/400.css';
-@import '@fontsource/ibm-plex-sans/500.css';
-@import '@fontsource/ibm-plex-sans/600.css';
-@import '@fontsource/ibm-plex-sans/700.css';
-@import '@fontsource/ibm-plex-mono/400.css';
-@import '@fontsource/ibm-plex-mono/500.css';
+@import "@fontsource/ibm-plex-sans/400.css";
+@import "@fontsource/ibm-plex-sans/500.css";
+@import "@fontsource/ibm-plex-sans/600.css";
+@import "@fontsource/ibm-plex-sans/700.css";
+@import "@fontsource/ibm-plex-mono/400.css";
+@import "@fontsource/ibm-plex-mono/500.css";

 /* Новый дизайн: токены (§2 плана redesign).
   Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
   глобально не конфликтует со старым app.css. */

 :root {
-	--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
-	--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
+	--font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
+	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

 	--background: #eef1f4;
 	--panel: #f8fafb;
@@ -28,7 +28,7 @@
 	--radius: 4px;
 }

-[data-theme='dark'] {
+[data-theme="dark"] {
 	--background: #11171d;
 	--panel: #182129;
 	--foreground: #e8eef2;