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/utility-functions/debounce.ts

@@ -9,13 +9,13 @@ export function debouncer<T>(callFn: (value: T) => unknown, { debounceTime = 60
 	let currentValue: T | undefined;
 	let recentlyUpdated: boolean = false;
 
-	const emitValue = (): void => {
+	const emitValue = () => {
 		recentlyUpdated = false;
 		if (currentValue === undefined) return;
 		updateValue(currentValue);
 	};
 
-	const updateValue = (newValue: T): void => {
+	const updateValue = (newValue: T) => {
 		if (recentlyUpdated) {
 			currentValue = newValue;
 			return;

frontend/src/utility-functions/files.ts

@@ -1,4 +1,4 @@
-export function downloadFileURL(filename: string, url: string): void {
+export function downloadFileURL(filename: string, url: string) {
 	const element = document.createElement("a");
 
 	element.href = url;
@@ -7,7 +7,7 @@ export function downloadFileURL(filename: string, url: string): void {
 	element.click();
 }
 
-export function downloadFileBlob(filename: string, blob: Blob): void {
+export function downloadFileBlob(filename: string, blob: Blob) {
 	const url = URL.createObjectURL(blob);
 
 	downloadFileURL(filename, url);
@@ -15,7 +15,7 @@ export function downloadFileBlob(filename: string, blob: Blob): void {
 	URL.revokeObjectURL(url);
 }
 
-export function downloadFileText(filename: string, text: string): void {
+export function downloadFileText(filename: string, text: string) {
 	const type = filename.endsWith(".svg") ? "image/svg+xml;charset=utf-8" : "text/plain;charset=utf-8";
 
 	const blob = new Blob([text], { type });
@@ -41,7 +41,7 @@ export async function upload<T extends "text" | "data">(acceptedExtensions: stri
 					resolve({ filename, type, content });
 				}
 			},
-			{ capture: false, once: true }
+			{ capture: false, once: true },
 		);
 
 		element.click();
@@ -55,7 +55,7 @@ type UploadResultType<T> = T extends "text" ? string : T extends "data" ? Uint8A
 export function blobToBase64(blob: Blob): Promise<string> {
 	return new Promise((resolve) => {
 		const reader = new FileReader();
-		reader.onloadend = (): void => resolve(typeof reader.result === "string" ? reader.result : "");
+		reader.onloadend = () => resolve(typeof reader.result === "string" ? reader.result : "");
 		reader.readAsDataURL(blob);
 	});
 }

frontend/src/utility-functions/icons.ts

@@ -104,16 +104,16 @@ import Copy from "@graphite-frontend/assets/icon-16px-solid/copy.svg";
 import Credits from "@graphite-frontend/assets/icon-16px-solid/credits.svg";
 import CustomColor from "@graphite-frontend/assets/icon-16px-solid/custom-color.svg";
 import Edit from "@graphite-frontend/assets/icon-16px-solid/edit.svg";
-import Eyedropper from "@graphite-frontend/assets/icon-16px-solid/eyedropper.svg";
 import EyeHidden from "@graphite-frontend/assets/icon-16px-solid/eye-hidden.svg";
 import EyeVisible from "@graphite-frontend/assets/icon-16px-solid/eye-visible.svg";
+import Eyedropper from "@graphite-frontend/assets/icon-16px-solid/eyedropper.svg";
 import File from "@graphite-frontend/assets/icon-16px-solid/file.svg";
 import FlipHorizontal from "@graphite-frontend/assets/icon-16px-solid/flip-horizontal.svg";
 import FlipVertical from "@graphite-frontend/assets/icon-16px-solid/flip-vertical.svg";
 import Folder from "@graphite-frontend/assets/icon-16px-solid/folder.svg";
-import GraphiteLogo from "@graphite-frontend/assets/icon-16px-solid/graphite-logo.svg";
 import GraphViewClosed from "@graphite-frontend/assets/icon-16px-solid/graph-view-closed.svg";
 import GraphViewOpen from "@graphite-frontend/assets/icon-16px-solid/graph-view-open.svg";
+import GraphiteLogo from "@graphite-frontend/assets/icon-16px-solid/graphite-logo.svg";
 import IconsGrid from "@graphite-frontend/assets/icon-16px-solid/icons-grid.svg";
 import Image from "@graphite-frontend/assets/icon-16px-solid/image.svg";
 import Layer from "@graphite-frontend/assets/icon-16px-solid/layer.svg";
@@ -269,8 +269,8 @@ import VectorFreehandTool from "@graphite-frontend/assets/icon-24px-two-tone/vec
 import VectorLineTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-line-tool.svg";
 import VectorPathTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-path-tool.svg";
 import VectorPenTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-pen-tool.svg";
-import VectorRectangleTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg";
 import VectorPolygonTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-polygon-tool.svg";
+import VectorRectangleTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg";
 import VectorSplineTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-spline-tool.svg";
 import VectorTextTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-text-tool.svg";
 

frontend/src/utility-functions/network.ts

@@ -9,7 +9,7 @@ export function requestWithUploadDownloadProgress(
 	method: "GET" | "HEAD" | "POST" | "PUT" | "DELETE" | "CONNECT" | "OPTIONS" | "TRACE" | "PATCH",
 	body: string,
 	uploadProgress: (progress: number) => void,
-	downloadOccurring: () => void
+	downloadOccurring: () => void,
 ): [Promise<RequestResult>, XMLHttpRequest | undefined] {
 	let xhrValue: XMLHttpRequest | undefined;
 	const promise = new Promise<RequestResult>((resolve, reject) => {

frontend/src/utility-functions/platform.ts

@@ -61,10 +61,11 @@ export function isEventSupported(eventName: string) {
 	if (["submit", "reset"].includes(eventName)) tag = "form";
 	if (["error", "load", "abort"].includes(eventName)) tag = "img";
 	const element = document.createElement(tag);
-	
+
 	if (onEventName in element) return true;
 
 	// Check if "return;" gets converted into a function, meaning the event is supported
 	element.setAttribute(eventName, "return;");
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	return typeof (element as Record<string, any>)[onEventName] === "function";
 }

frontend/src/utility-functions/rasterization.ts

@@ -26,7 +26,7 @@ export async function rasterizeSVGCanvas(svg: string, width: number, height: num
 	const image = new Image();
 	image.src = url;
 	await new Promise<void>((resolve) => {
-		image.onload = (): void => resolve();
+		image.onload = () => resolve();
 	});
 
 	// Draw our SVG to the canvas
@@ -41,7 +41,7 @@ export async function rasterizeSVGCanvas(svg: string, width: number, height: num
 // Rasterize the string of an SVG document at a given width and height and turn it into the blob data of an image file matching the given MIME type
 export async function rasterizeSVG(svg: string, width: number, height: number, mime: string, backgroundColor?: string): Promise<Blob> {
 	if (!width || !height) throw new Error("Width and height must be nonzero when given to rasterizeSVG()");
-	
+
 	const canvas = await rasterizeSVGCanvas(svg, width, height, backgroundColor);
 
 	// Convert the canvas to an image of the correct MIME type
@@ -109,7 +109,7 @@ export async function imageToCanvasContext(imageData: ImageBitmapSource): Promis
 	const canvas = document.createElement("canvas");
 	canvas.width = width;
 	canvas.height = height;
-	
+
 	const context = canvas.getContext("2d");
 	if (!context) throw new Error("Could not create canvas context");
 	context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);