Add eslint.

package.json

@@ -3,7 +3,21 @@
   "scripts": {
     "dev": "vite",
     "build": "rimraf build && tsc && vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "preact",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "ignorePatterns": [
+      "build/"
+    ],
+    "rules": {
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    }
   },
   "dependencies": {
     "preact": "^10.5.13"
@@ -16,6 +30,10 @@
     "@types/node": "^15.12.3",
     "@types/preact-i18n": "^2.3.0",
     "@types/styled-components": "^5.1.10",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
+    "@typescript-eslint/parser": "^4.27.0",
+    "eslint": "^7.28.0",
+    "eslint-config-preact": "^1.1.4",
     "preact-i18n": "^2.4.0-preactx",
     "react-overlapping-panels": "1.1.2-patch.0",
     "rimraf": "^3.0.2",

src/components/ui/Button.tsx

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 interface Props {
     readonly contrast?: boolean;
     readonly error?: boolean;
-};
+}
 
 export default styled.button<Props>`
 	z-index: 1;

src/components/ui/ColourSwatches.tsx

@@ -102,10 +102,10 @@ export default function ColourSwatches({ value, onChange }: Props) {
                 onChange={ev => onChange(ev.currentTarget.value)}
             />
             <Rows>
-                {presets.map(row => (
+                {presets.map((row, i) => (
-                    <div>
+                    <div key={i}>
-                        { row.map(swatch => (
+                        { row.map((swatch, i) => (
-                            <Swatch colour={swatch} type='small'
+                            <Swatch colour={swatch} type='small' key={i}
                                 onClick={() => onChange(swatch)}>
                                 {swatch === value && <Check size={18} strokeWidth={2} />}
                             </Swatch>

src/components/ui/InputBox.tsx

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 
 interface Props {
     readonly contrast?: boolean;
-};
+}
 
 export default styled.input<Props>`
     z-index: 1;

src/context/Theme.tsx

@@ -1,13 +1,14 @@
 import { createGlobalStyle } from "styled-components";
 
 // ! TEMP START
-let a = {"light":false,"accent":"#FD6671","background":"#191919","foreground":"#F6F6F6","block":"#2D2D2D","message-box":"#363636","mention":"rgba(251, 255, 0, 0.06)","success":"#65E572","warning":"#FAA352","error":"#F06464","hover":"rgba(0, 0, 0, 0.1)","sidebar-active":"#FD6671","scrollbar-thumb":"#CA525A","scrollbar-track":"transparent","primary-background":"#242424","primary-header":"#363636","secondary-background":"#1E1E1E","secondary-foreground":"#C8C8C8","secondary-header":"#2D2D2D","tertiary-background":"#4D4D4D","tertiary-foreground":"#848484","status-online":"#3ABF7E","status-away":"#F39F00","status-busy":"#F84848","status-streaming":"#977EFF","status-invisible":"#A5A5A5"};
+const a = {light:false,accent:"#FD6671",background:"#191919",foreground:"#F6F6F6",block:"#2D2D2D","message-box":"#363636",mention:"rgba(251, 255, 0, 0.06)",success:"#65E572",warning:"#FAA352",error:"#F06464",hover:"rgba(0, 0, 0, 0.1)","sidebar-active":"#FD6671","scrollbar-thumb":"#CA525A","scrollbar-track":"transparent","primary-background":"#242424","primary-header":"#363636","secondary-background":"#1E1E1E","secondary-foreground":"#C8C8C8","secondary-header":"#2D2D2D","tertiary-background":"#4D4D4D","tertiary-foreground":"#848484","status-online":"#3ABF7E","status-away":"#F39F00","status-busy":"#F84848","status-streaming":"#977EFF","status-invisible":"#A5A5A5"};
 
 export const GlobalTheme = createGlobalStyle`
 :root {
 	${
 		Object.keys(a)
 			.map(key => {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				return `--${key}: ${(a as any)[key]};`;
 			})
 	}

src/main.tsx

@@ -2,4 +2,5 @@ import { render } from 'preact'
 import '../styles/index.scss'
 import { App } from './app'
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 render(<App />, document.getElementById('app')!)

src/preact.d.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import JSX = preact.JSX