feat: biome as linter and formatter

Author: moebiusmania

.github/workflows/push.yml

@@ -22,5 +22,8 @@ jobs:
       - name: 📦 Install dependencies
         run: npm ci
 
+      - name: 🔍 Run lint
+        run: npm run lint
+
       - name: 📝 Run unit tests
         run: npm run test

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "editor.tabSize": 2,
-  "editor.formatOnSave": true
-}
+	"editor.tabSize": 2,
+	"editor.formatOnSave": true
+}

app.vue

@@ -1,24 +1,24 @@
 <script lang="ts" setup>
 useHead({
-  title: "🚌 ATM Milano Info Dashboard",
-  meta: [
-    {
-      name: "description",
-      content: "ATM Milano info & status dashboard webapp.",
-    },
-    { name: "author", content: "Salvatore Laisa" },
-  ],
-  link: [
-    {
-      rel: "icon",
-      href: "https://www.atm.it/_layouts/atm/images/favicon.ico",
-      type: "image/x-icon",
-    },
-  ],
-  htmlAttrs: {
-    lang: "it-IT",
-    "data-theme": "corporate",
-  },
+	title: "🚌 ATM Milano Info Dashboard",
+	meta: [
+		{
+			name: "description",
+			content: "ATM Milano info & status dashboard webapp.",
+		},
+		{ name: "author", content: "Salvatore Laisa" },
+	],
+	link: [
+		{
+			rel: "icon",
+			href: "https://www.atm.it/_layouts/atm/images/favicon.ico",
+			type: "image/x-icon",
+		},
+	],
+	htmlAttrs: {
+		lang: "it-IT",
+		"data-theme": "corporate",
+	},
 });
 </script>
 

assets/css/tailwind.css

@@ -1,23 +1,23 @@
 @import "tailwindcss";
 @plugin "daisyui" {
-  themes: corporate --default;
+	themes: corporate --default;
 }
 
 @plugin "daisyui/theme" {
-  name: "corporate";
-  default: true;
-  --color-primary: #f48325;
+	name: "corporate";
+	default: true;
+	--color-primary: #f48325;
 }
 
 @theme {
-  --color-line-M1: #E31D1A;
-  --color-line-M2: #638B18;
-  --color-line-M3: #F6A704;
-  --color-line-M4: #1F3E6D;
-  --color-line-M5: #9778D3;
+	--color-line-M1: #e31d1a;
+	--color-line-M2: #638b18;
+	--color-line-M3: #f6a704;
+	--color-line-M4: #1f3e6d;
+	--color-line-M5: #9778d3;
 }
 
 /* === SAFELIST (ex safelist) === */
 @source inline("bg-line-{M1,M2,M3,M4,M5}");
 @source inline("color-primary");
-@source inline("bg-primary");
+@source inline("bg-primary");

biome.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "tab"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.vue"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUnusedImports": "off",
+            "noUnusedVariables": "off"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["assets/css/tailwind.css"],
+      "css": {
+        "linter": {
+          "enabled": false
+        }
+      }
+    }
+  ]
+}

components/Card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 type Props = {
-  title: string;
+	title: string;
 };
 
 const { title } = defineProps<Props>();

components/Status.vue

@@ -4,17 +4,17 @@ import type { LineStatus } from "../types/line";
 const resource: string = "/api/status";
 
 const lineClass = (line: string): string =>
-  `badge badge-lg bg-line-${line} rounded-none border-0 w-10`;
+	`badge badge-lg bg-line-${line} rounded-none border-0 w-10`;
 
 const { data } = await useFetch<Array<LineStatus>>(resource);
 
 const inactive: Array<string> = ["tratta sospesa", "rallentata"];
 
 const notActive = (status: string): string =>
-  inactive.includes(status.toLocaleLowerCase()) ? "font-bold" : "font-normal";
+	inactive.includes(status.toLocaleLowerCase()) ? "font-bold" : "font-normal";
 
 const isOK = (status: string): string =>
-  status.toLocaleLowerCase() === "regolare" ? "🟩" : "🟥";
+	status.toLocaleLowerCase() === "regolare" ? "🟩" : "🟥";
 </script>
 
 <template>

components/StatusV1.vue

@@ -5,15 +5,15 @@ import type { LineStatus } from "../types/line";
 const resource: string = "/api/v1/status";
 
 const lineClass = (line: string): string =>
-  `badge badge-lg bg-line-${line} rounded-none border-0 w-10`;
+	`badge badge-lg bg-line-${line} rounded-none border-0 w-10`;
 
 const { status, data, error } = await useFetch<Array<LineStatus>>(resource);
 
 const inactive: Array<string> = ["tratta sospesa", "rallentata"];
 const isPending = status.value === "pending";
 
 const notActive = (status: string): string =>
-  inactive.includes(status.toLocaleLowerCase()) ? "font-bold" : "font-normal";
+	inactive.includes(status.toLocaleLowerCase()) ? "font-bold" : "font-normal";
 
 if (error.value) console.error("ERROR from useFetch: ", error.value);
 </script>

components/__tests__/Card.test.ts

@@ -4,19 +4,19 @@ import { expect, test } from "vitest";
 import Card from "../Card.vue";
 
 test("<Card />", () => {
-  const title = "Test title";
-  const content = "Test content";
+	const title = "Test title";
+	const content = "Test content";
 
-  const wrapper = mount(Card, {
-    props: {
-      title,
-    },
-    slots: {
-      default: `<p>${content}</p>`,
-    },
-  });
+	const wrapper = mount(Card, {
+		props: {
+			title,
+		},
+		slots: {
+			default: `<p>${content}</p>`,
+		},
+	});
 
-  expect(wrapper.find("article").exists()).toBe(true);
-  expect(wrapper.text()).toContain(title);
-  expect(wrapper.text()).toContain(content);
+	expect(wrapper.find("article").exists()).toBe(true);
+	expect(wrapper.text()).toContain(title);
+	expect(wrapper.text()).toContain(content);
 });

components/__tests__/Footer.test.ts

@@ -4,11 +4,11 @@ import { expect, test } from "vitest";
 import Footer from "../Footer.vue";
 
 test("<Footer />", () => {
-  const wrapper = mount(Footer);
-  const year = new Date().getFullYear();
+	const wrapper = mount(Footer);
+	const year = new Date().getFullYear();
 
-  expect(wrapper.html()).toMatchSnapshot();
+	expect(wrapper.html()).toMatchSnapshot();
 
-  expect(wrapper.find("footer").exists()).toBe(true);
-  expect(wrapper.text()).toContain(year);
+	expect(wrapper.find("footer").exists()).toBe(true);
+	expect(wrapper.text()).toContain(year);
 });