Restore ESLint and Prettier auto-formatting and CI linting (#1457)

* Restore ESLint and Prettier autoformatting

* Fix formatting and lints in web files

* Hacky fix to eslint crash

* Fix remaining lints

* Add lint-fix script

---------

Co-authored-by: 0hypercube <0hypercube@gmail.com>

frontend/src/components/widgets/inputs/CheckboxInput.svelte

@@ -36,7 +36,7 @@
 </script>
 
 <LayoutRow class="checkbox-input">
-	<input type="checkbox" id={`checkbox-input-${id}`} {checked} on:change={(e) => dispatch("checked", inputElement?.checked)} {disabled} tabindex={disabled ? -1 : 0} bind:this={inputElement} />
+	<input type="checkbox" id={`checkbox-input-${id}`} {checked} on:change={(_) => dispatch("checked", inputElement?.checked)} {disabled} tabindex={disabled ? -1 : 0} bind:this={inputElement} />
 	<label class:disabled class:checked for={`checkbox-input-${id}`} on:keydown={(e) => e.key === "Enter" && toggleCheckboxFromLabel(e)} title={tooltip}>
 		<LayoutRow class="checkbox-box">
 			<IconLabel icon={displayIcon} />

frontend/src/components/widgets/inputs/CurveInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
+	import { clamp } from "@graphite/utility-functions/math";
 	import type { Curve, CurveManipulatorGroup } from "@graphite/wasm-communication/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import { clamp } from "@graphite/utility-functions/math";
 
 	// emits: ["update:value"],
 	const dispatch = createEventDispatcher<{
@@ -145,7 +145,7 @@
 		updateCurve();
 	}
 
-	function setHandlePosition(anchorIndex: number, handleIndex: number, position: [number, number]): void {
+	function setHandlePosition(anchorIndex: number, handleIndex: number, position: [number, number]) {
 		const { anchor, handles } = groups[anchorIndex];
 		const otherHandle = handles[1 - handleIndex];
 

frontend/src/components/widgets/inputs/FontInput.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext, onMount, tick } from "svelte";
 
+	import type { FontsState } from "@graphite/state-providers/fonts";
 	import type { MenuListEntry } from "@graphite/wasm-communication/messages";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import type { FontsState } from "@graphite/state-providers/fonts";
 
 	const fonts = getContext<FontsState>("fonts");
 
@@ -34,14 +34,14 @@
 
 	$: watchFont(fontFamily, fontStyle);
 
-	async function watchFont(..._: string[]): Promise<void> {
+	async function watchFont(..._: string[]) {
 		// We set this function's result to a local variable to avoid reading from `entries` which causes Svelte to trigger an update that results in an infinite loop
 		const newEntries = await getEntries();
 		entries = newEntries;
 		activeEntry = getActiveEntry(newEntries);
 	}
 
-	async function setOpen(): Promise<void> {
+	async function setOpen() {
 		open = true;
 
 		// Scroll to the active entry (the scroller div does not yet exist so we must wait for the component to render)
@@ -53,7 +53,7 @@
 		}
 	}
 
-	function toggleOpen(): void {
+	function toggleOpen() {
 		if (!disabled) {
 			open = !open;
 
@@ -61,7 +61,7 @@
 		}
 	}
 
-	async function selectFont(newName: string): Promise<void> {
+	async function selectFont(newName: string) {
 		let family;
 		let style;
 

frontend/src/components/widgets/inputs/LayerReferenceInput.svelte

@@ -24,13 +24,13 @@
 
 	$: droppable = hoveringDrop && Boolean(currentDraggingElement());
 
-	function dragOver(e: DragEvent): void {
+	function dragOver(e: DragEvent) {
 		hoveringDrop = true;
 
 		e.preventDefault();
 	}
 
-	function drop(e: DragEvent): void {
+	function drop(e: DragEvent) {
 		hoveringDrop = false;
 
 		const element = currentDraggingElement();

frontend/src/components/widgets/inputs/MenuBarInput.svelte

@@ -2,12 +2,12 @@
 	import { getContext, onMount } from "svelte";
 
 	import { platformIsMac } from "@graphite/utility-functions/platform";
+	import type { Editor } from "@graphite/wasm-communication/editor";
 	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/wasm-communication/messages";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
 	const accelKey = platformIsMac() ? "Command" : "Control";
@@ -57,7 +57,7 @@
 				...entry,
 
 				// Shared names with fields that need to be converted from the type used in `MenuBarEntry` to that of `MenuListEntry`
-				action: (): void => editor.instance.updateLayout(updateMenuBarLayout.layoutTarget, entry.action.widgetId, undefined),
+				action: () => editor.instance.updateLayout(updateMenuBarLayout.layoutTarget, entry.action.widgetId, undefined),
 				children: entry.children ? entry.children.map((entries) => entries.map((entry) => menuBarEntryToMenuListEntry(entry))) : undefined,
 
 				// New fields in `MenuListEntry`

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -174,8 +174,9 @@
 	function onCancelTextChange() {
 		updateValue(undefined, min, max, displayDecimalPlaces, unit);
 
-		rangeSliderValue = value;
-		rangeSliderValueAsRendered = value;
+		const valueOrZero = value !== undefined ? value : 0;
+		rangeSliderValue = valueOrZero;
+		rangeSliderValueAsRendered = valueOrZero;
 
 		editing = false;
 

frontend/src/components/widgets/inputs/SwatchPairInput.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 
+	import type { Editor } from "@graphite/wasm-communication/editor";
 	import type { Color } from "@graphite/wasm-communication/messages";
 
 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import type { Editor } from "@graphite/wasm-communication/editor";
 
 	const editor = getContext<Editor>("editor");