add formatter

sg-frontend/.prettierrc

+{
+	"useTabs": true,
+	"tabWidth": 2,
+	"svelteStrictMode": true
+}

sg-frontend/src/App.svelte

 <script lang="ts">
-    import SoftwareMerger from './components/SoftwareMerger.svelte';
-  import Counter from './lib/Counter.svelte'
+	import SoftwareMerger from "./components/SoftwareMerger.svelte";
+	import Counter from "./lib/Counter.svelte";
 </script>
 
 <main>
 	<h1>Software Merger</h1>
-  <SoftwareMerger></SoftwareMerger>
-
+	<SoftwareMerger />
 </main>
 
 <style>

sg-frontend/src/components/SoftwareMerger.svelte

@@ -2,62 +2,63 @@
 	import { setContext } from "svelte";
 	import { onMount } from "svelte";
 	import SoftwareSelect from "./SoftwareSelect.svelte";
-	const BACKEND_URL = import.meta.env.VITE_BACKEND_URL
-	console.log(import.meta.env.VITE_BACKEND_URL)
+	const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
+	console.log(import.meta.env.VITE_BACKEND_URL);
 	let softwares = [];
 	let software1, software2, result;
-	let node, data
+	let node, data;
 	onMount(async () => {
 		await fetch(BACKEND_URL + "/software")
-	.then(response => response.json())
-	.then(data => {
+			.then((response) => response.json())
+			.then((data) => {
 				console.log(data);
-			let tempSoft = []
-			data['softwares'].forEach(element => {
-				node = Object.values(Object.values(element))[0]
-				delete Object.assign(node, {['label']: node['name'] })['name'];
-				tempSoft.push(node)
+				let tempSoft = [];
+				data["softwares"].forEach((element) => {
+					node = Object.values(Object.values(element))[0];
+					delete Object.assign(node, { ["label"]: node["name"] })["name"];
+					tempSoft.push(node);
 				});
-			softwares = tempSoft
-			console.log(softwares)
-	}).catch(error => {
+				softwares = tempSoft;
+				console.log(softwares);
+			})
+			.catch((error) => {
 				console.log(error);
 				return [];
 			});
 	});
 	function checkVars() {
 		if (software1 && software2) {
-            console.log("OK")
-			postSoftwareMerger()
+			console.log("OK");
+			postSoftwareMerger();
 		}
 	}
 
-    $: (software1, software2), checkVars()
+	$: (software1, software2), checkVars();
 
 	async function postSoftwareMerger() {
-		const res = await fetch(BACKEND_URL + '/software-search', {
-			method: 'POST',
+		const res = await fetch(BACKEND_URL + "/software-search", {
+			method: "POST",
 			headers: {
-				'Content-Type': 'application/json'
+				"Content-Type": "application/json",
 			},
 			body: JSON.stringify({
-				"software1": software1.label,
-				"software2": software2.label
-			})
-		})
+				software1: software1.label,
+				software2: software2.label,
+			}),
+		});
 
-		const data = await res.json()
-		data.softwares.shift()
-		data.softwares.pop()
-		result = data.softwares
-		console.log(result)
+		const data = await res.json();
+		data.softwares.shift();
+		data.softwares.pop();
+		result = data.softwares;
+		console.log(result);
 	}
-
 </script>
+
 <p>First Software</p>
-<SoftwareSelect items={softwares} bind:selectedSoftware={software1}/>
+<SoftwareSelect items="{softwares}" bind:selectedSoftware="{software1}" />
 <p>Second Software</p>
-<SoftwareSelect items={softwares} bind:selectedSoftware={software2}/>
+<SoftwareSelect items="{softwares}" bind:selectedSoftware="{software2}" />
 
 {#if result}
 	<div style="text-align: left;">

sg-frontend/src/components/SoftwareSelect.svelte

 <script>
-	import Select from 'svelte-select';
-
-
-    export let items, selectedSoftware
-
+	import Select from "svelte-select";
 
+	export let items, selectedSoftware;
 
 	function handleSelect(event) {
-		console.log(event)
+		console.log(event);
 		selectedSoftware = event.detail;
 	}
 
 	function handleClear() {
 		selectedSoftware = undefined;
 	}
-    console.log(items)
-    
+	console.log(items);
 </script>
 
 <form>
 	<label for="food">Favourite food:</label>
-	<Select id="food" {items} on:select={handleSelect} on:clear={handleClear}></Select>
+	<Select
+		id="food"
+		items="{items}"
+		on:select="{handleSelect}"
+		on:clear="{handleClear}"
+	/>
 </form>
 
 {#if selectedSoftware}