fix: linting

Author: KodingDev

.eslintrc.cjs

@@ -1,17 +1,34 @@
 module.exports = {
 	root: true,
 	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
+	extends: [
+		'plugin:svelte/recommended',
+		'plugin:svelte/prettier',
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'prettier'
+	],
+	plugins: ['@typescript-eslint', 'prettier'],
 	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
+	rules: {
+		'prettier/prettier': 'error',
+		'@typescript-eslint/no-non-null-assertion': 'off'
 	},
 	parserOptions: {
 		sourceType: 'module',
 		ecmaVersion: 2020
 	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+
+			// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	],
 	env: {
 		browser: true,
 		es2017: true,

.gitignore

@@ -8,4 +8,6 @@ node_modules
 !.env.example
 
 .idea
-.vscode
+.vscode
+
+yarn-error.log

.prettierrc

@@ -3,7 +3,19 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}
+	"plugins": [
+		"prettier-plugin-svelte",
+		"prettier-plugin-tailwindcss"
+	],
+	"pluginSearchDirs": [
+		"."
+	],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

package.json

@@ -11,7 +11,7 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
+		"format": "prettier --plugin-search-dir . --write . && eslint . --fix",
 		"tunnel": "cloudflared tunnel run --url http://localhost:5173"
 	},
 	"devDependencies": {
@@ -26,11 +26,13 @@
 		"autoprefixer": "^10.4.7",
 		"eslint": "^8.16.0",
 		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-svelte3": "^4.0.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-svelte": "^2.14.1",
 		"postcss": "^8.4.14",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
+		"prettier-plugin-tailwindcss": "^0.2.1",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-icons": "^2.1.0",
@@ -46,4 +48,4 @@
 		"clsx": "^1.2.1",
 		"nprogress": "^0.2.0"
 	}
-}
+}

src/app.postcss

@@ -5,7 +5,7 @@
 
 /* Setup page theming */
 body {
-	@apply bg-white text-black dark:bg-neutral-900 dark:text-white transition-all;
+	@apply bg-white text-black transition-all dark:bg-neutral-900 dark:text-white;
 }
 
 @layer utilities {
@@ -20,16 +20,16 @@ body {
 
 	/* Basic Cards */
 	.basic-card {
-		@apply p-4 border-[1px] rounded-md border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 bg-opacity-70 dark:bg-opacity-70;
+		@apply rounded-md border-[1px] border-neutral-300 bg-neutral-100 bg-opacity-70 p-4 dark:border-neutral-700 dark:bg-neutral-800 dark:bg-opacity-70;
 	}
 
 	/* Links */
 	.link {
-		@apply text-neutral-400 hover:text-neutral-200 transition-all;
+		@apply text-neutral-400 transition-all hover:text-neutral-200;
 	}
 }
 
 /* Icon sizing */
 .icon.sm {
-	@apply w-[24px] h-[24px];
+	@apply h-[24px] w-[24px];
 }

src/components/art/CommissionCard.svelte

@@ -6,17 +6,17 @@
 
 <a href={commission.slug ? `/art/${commission.slug}` : undefined}>
 	<div
-		class="flex flex-col border-[1px] rounded-lg overflow-clip border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 bg-opacity-70 transition-all hover:scale-[101%]"
+		class="flex flex-col overflow-clip rounded-lg border-[1px] border-neutral-300 bg-neutral-100 bg-opacity-70 transition-all hover:scale-[101%] dark:border-neutral-700 dark:bg-neutral-800"
 	>
 		<img
 			src={getURL(commission.images[0])}
 			alt={commission.title}
-			class="object-cover object-top aspect-square"
+			class="aspect-square object-cover object-top"
 		/>
 
 		<div class="p-4">
 			<h2 class="font-medium text-blue-400">{commission.title}</h2>
-			<p class="text-body line-clamp-2 text-ellipsis">
+			<p class="text-body text-ellipsis line-clamp-2">
 				By {commission.artist.name}
 			</p>
 		</div>

src/components/art/CommissionImage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import clsx from "clsx";
+	import clsx from 'clsx';
 
 	export let src: string;
 	export let title: string | undefined = undefined;
@@ -13,9 +13,12 @@
 	href={src}
 	target="_blank"
 	rel="noopener noreferrer"
-	class={clsx("relative rounded-3xl overflow-clip transition-all hover:scale-[101%] hover:shadow-2xl", className)}
+	class={clsx(
+		'relative overflow-clip rounded-3xl transition-all hover:scale-[101%] hover:shadow-2xl',
+		className
+	)}
 >
-	<img {src} alt={title} class="aspect-auto object-cover h-full w-full" />
+	<img {src} alt={title} class="aspect-auto h-full w-full object-cover" />
 
 	{#if title || subtitle}
 		<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50" />

src/components/art/CommissionPage.svelte

@@ -8,7 +8,7 @@
 
 <div
 	class={clsx(
-		'flex flex-col gap-6 content-between',
+		'flex flex-col content-between gap-6',
 		commission.layout === 'horizontal' ? 'lg:flex-row' : ''
 	)}
 >
@@ -20,14 +20,14 @@
 				<img
 					src={commission.artist.icon}
 					alt={commission.artist.name}
-					class="w-12 h-12 rounded-full object-cover"
+					class="h-12 w-12 rounded-full object-cover"
 				/>
 			{/if}
 
 			{#if commission.artist.link}
 				<a
 					href={commission.artist.link}
-					class="flex flex-col group"
+					class="group flex flex-col"
 					target="_blank"
 					rel="noopener noreferrer"
 				>
@@ -50,12 +50,12 @@
 		{#if commission.links}
 			<div>
 				<p class="font-semibold text-neutral-400">Links</p>
-				<ul class="flex flex-col sm:flex-row gap-4">
+				<ul class="flex flex-col gap-4 sm:flex-row">
 					{#each commission.links as link}
 						<li>
 							<a
 								href={link.href}
-								class="flex flex-col group"
+								class="group flex flex-col"
 								target="_blank"
 								rel="noopener noreferrer"
 							>

src/components/base/GradientCanvas.svelte

@@ -3,7 +3,7 @@
 	import { onMount } from 'svelte';
 
 	let canvas: HTMLCanvasElement;
-	let t: number = 0;
+	let t = 0;
 
 	onMount(() => {
 		canvas.classList.remove('opacity-0');
@@ -50,5 +50,5 @@
 	bind:this={canvas}
 	width="32"
 	height="32"
-	class="w-full h-full opacity-0 transition-all duration-500"
+	class="h-full w-full opacity-0 transition-all duration-500"
 />

src/components/base/NavBar.svelte

@@ -15,19 +15,19 @@
 </script>
 
 <div class="flex flex-row justify-between">
-	<div class="flex flex-row gap-6 items-center">
+	<div class="flex flex-row items-center gap-6">
 		<img
 			src="https://avatars.githubusercontent.com/u/23714764?v=4"
 			alt="Stella"
-			class="rounded-full w-10 h-10"
+			class="h-10 w-10 rounded-full"
 		/>
 
 		{#each links as { label, to, mode }}
 			<NavLink {to} {mode}>{label}</NavLink>
 		{/each}
 	</div>
 
-	<div class="flex flex-row gap-6 items-center">
+	<div class="flex flex-row items-center gap-6">
 		<NavLink to="https://twitter.com/KodingDev_">
 			<div class="icon sm">
 				<FaTwitter />