feat!: Replace eslint & prettier to biome

Author: aXenDeveloper

.github/copilot-instructions.md

@@ -2,11 +2,13 @@
 
 The repository is a monorepo for the VitNode framework, which includes a backend API, frontend documentation site, and shared packages. The codebase uses modern web technologies and follows specific conventions for development based on Next.js 15 and Hono.js 4.
 
+- Do not nest ternary operators,
+
 ## Architecture & Key Patterns
 
 - **Monorepo Structure:**
   - `apps/` contains main apps (`api` for backend, `docs` for docs site)
-  - `packages/` holds shared code, core framework, ESLint/Prettier configs, and CLI tools
+  - `packages/` holds shared code, core framework, Biome configs, and CLI tools
   - `plugins/` for extendable features
 - **Frontend:**
   - Next.js 15, App Router, Server Components
@@ -33,7 +35,7 @@ The repository is a monorepo for the VitNode framework, which includes a backend
   - `pnpm dev` (dev server), `pnpm build`, `pnpm lint`, `pnpm db:push`, `pnpm db:migrate`, `pnpm docker:dev`
 - **CLI:**
   - Create apps/plugins via `pnpm create vitnode-app@canary` (see `packages/create-vitnode-app`)
-  - CLI prompts for package manager, app mode, ESLint, Docker, install (see `questions.ts`)
+  - CLI prompts for package manager, app mode, Biome, Docker, install (see `questions.ts`)
 - **Linting/Formatting:**
   - Use configs from `packages/eslint/`
   - File names: snake_case, ESModule only

.github/docs/prd.md

@@ -46,7 +46,7 @@ VitNode is designed for individual developers and small teams who need a structu
 ### CI/CD
 
 - Automated workflows using GitHub Actions:
-  - Code quality checks (ESLint, Prettier, TypeScript)
+  - Code quality checks (Biome, TypeScript)
   - Test suite execution with Vitest and Playwright
   - Dependency security scanning with npm audit
   - Automated builds and deployments to Vercel
@@ -165,7 +165,7 @@ VitNode is designed for individual developers and small teams who need a structu
 - Turborepo for monorepo management
 - Vitest for unit testing
 - Playwright for end-to-end testing
-- ESLint and Prettier for code quality
+- Biome for code quality
 - Docker for containerization
 
 ## Features Planned for Future Releases

.prettierrc.mjs

@@ -7,5 +7,29 @@
   ],
   "search.exclude": {
     "**/(plugins)/*": true
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

.vscode/settings.json

@@ -11,8 +11,6 @@
     "dev:email": "email dev --dir src/emails",
     "build": "tsc && tsc-alias -p tsconfig.json",
     "start": "node dist/index.js",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
     "drizzle-kit": "drizzle-kit"
   },
   "dependencies": {
@@ -36,7 +34,6 @@
     "@types/react-dom": "^19.1.7",
     "@vitnode/eslint-config": "workspace:*",
     "dotenv": "^17.2.1",
-    "eslint": "^9.33.0",
     "react-email": "^4.2.8",
     "tsc-alias": "^1.8.16",
     "tsx": "^4.20.4",

apps/api/eslint.config.mjs

@@ -19,7 +19,7 @@ serve(
   info => {
     const initMessage = '\x1b[34m[VitNode]\x1b[0m';
 
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: <start>
     console.log(
       `${initMessage} API server is running on http://localhost:${info.port}`,
     );

apps/api/package.json

@@ -1,14 +1,13 @@
 import { NodemailerEmailAdapter } from '@vitnode/core/api/adapters/email/nodemailer';
 import { buildApiConfig } from '@vitnode/core/vitnode.config';
-import * as dotenv from 'dotenv';
+import { config } from 'dotenv';
 import { drizzle } from 'drizzle-orm/postgres-js';
 
-dotenv.config({
+config({
   quiet: true,
 });
 
 export const POSTGRES_URL =
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   process.env.POSTGRES_URL || 'postgresql://root:root@localhost:5432/vitnode';
 
 export const vitNodeApiConfig = buildApiConfig({

apps/api/src/index.ts

@@ -9,20 +9,20 @@ description: Select from a list of options with a search input.
 
 ## Usage
 
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 <Tabs items={['Auto Form', 'Manual']}>
   <Tab value="Auto Form">
 
 ```ts
-import { z } from 'zod';
-import { AutoForm } from '@vitnode/core/components/form/auto-form';
-import { AutoFormCombobox } from '@vitnode/core/components/form/fields/combobox';
+import { z } from "zod";
+import { AutoForm } from "@vitnode/core/components/form/auto-form";
+import { AutoFormCombobox } from "@vitnode/core/components/form/fields/combobox";
 ```
 
 ```ts
 const formSchema = z.object({
-  type: z.enum(['option-one', 'option-two']),
+  type: z.enum(["option-one", "option-two"])
 });
 ```
 
@@ -31,25 +31,25 @@ const formSchema = z.object({
   formSchema={formSchema}
   fields={[
     {
-      id: 'type',
-      component: props => (
+      id: "type",
+      component: (props) => (
         <AutoFormCombobox
           {...props}
           description="Select an option from the list"
           label="Type"
           labels={[
             {
-              value: 'option-one',
-              label: 'Option One',
+              value: "option-one",
+              label: "Option One"
             },
             {
-              value: 'option-two',
-              label: 'Option Two',
-            },
+              value: "option-two",
+              label: "Option Two"
+            }
           ]}
         />
-      ),
-    },
+      )
+    }
   ]}
 />
 ```
@@ -59,53 +59,49 @@ const formSchema = z.object({
   <Tab value="Manual">
 
 ```tsx
-'use client';
+"use client";
 
-import * as React from 'react';
-import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+import React from "react";
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
 
-import { cn } from '@vitnode/core/lib/utils';
-import { Button } from '@vitnode/core/components/ui/button';
+import { cn } from "@vitnode/core/lib/utils";
+import { Button } from "@vitnode/core/components/ui/button";
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-  CommandList,
-} from '@vitnode/core/components/ui/command';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@vitnode/core/components/ui/popover';
+  CommandList
+} from "@vitnode/core/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@vitnode/core/components/ui/popover";
 
 const frameworks = [
   {
-    value: 'next.js',
-    label: 'Next.js',
+    value: "next.js",
+    label: "Next.js"
   },
   {
-    value: 'sveltekit',
-    label: 'SvelteKit',
+    value: "sveltekit",
+    label: "SvelteKit"
   },
   {
-    value: 'nuxt.js',
-    label: 'Nuxt.js',
+    value: "nuxt.js",
+    label: "Nuxt.js"
   },
   {
-    value: 'remix',
-    label: 'Remix',
+    value: "remix",
+    label: "Remix"
   },
   {
-    value: 'astro',
-    label: 'Astro',
-  },
+    value: "astro",
+    label: "Astro"
+  }
 ];
 
 export function ExampleCombobox() {
   const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -117,8 +113,8 @@ export function ExampleCombobox() {
           className="w-[200px] justify-between"
         >
           {value
-            ? frameworks.find(framework => framework.value === value)?.label
-            : 'Select framework...'}
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
           <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -128,19 +124,19 @@ export function ExampleCombobox() {
           <CommandList>
             <CommandEmpty>No framework found.</CommandEmpty>
             <CommandGroup>
-              {frameworks.map(framework => (
+              {frameworks.map((framework) => (
                 <CommandItem
                   key={framework.value}
                   value={framework.value}
-                  onSelect={currentValue => {
-                    setValue(currentValue === value ? '' : currentValue);
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue);
                     setOpen(false);
                   }}
                 >
                   <CheckIcon
                     className={cn(
-                      'mr-2 size-4',
-                      value === framework.value ? 'opacity-100' : 'opacity-0',
+                      "mr-2 size-4",
+                      value === framework.value ? "opacity-100" : "opacity-0"
                     )}
                   />
                   {framework.label}
@@ -161,36 +157,34 @@ export function ExampleCombobox() {
 
 ## Props
 
-import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { TypeTable } from "fumadocs-ui/components/type-table";
 
 <TypeTable
   type={{
     label: {
-      description: 'The label for the combobox, displayed above the input.',
-      type: 'string',
-      default: '',
+      description: "The label for the combobox, displayed above the input.",
+      type: "string",
+      default: ""
     },
     description: {
-      description:
-        'An optional description for the combobox, displayed below the input.',
-      type: 'string',
-      default: '',
+      description: "An optional description for the combobox, displayed below the input.",
+      type: "string",
+      default: ""
     },
     labels: {
-      description:
-        'An array of options for the combobox, each with a value and label.',
-      type: 'Array<{ value: string; label: string }>',
-      default: '[]',
+      description: "An array of options for the combobox, each with a value and label.",
+      type: "Array<{ value: string; label: string }>",
+      default: "[]"
     },
     placeholder: {
-      description: 'Placeholder text for the combobox input.',
-      type: 'string',
-      default: 'Select an option',
+      description: "Placeholder text for the combobox input.",
+      type: "string",
+      default: "Select an option"
     },
     searchPlaceholder: {
-      description: 'Placeholder text for the search input within the combobox.',
-      type: 'string',
-      default: 'Search...',
-    },
+      description: "Placeholder text for the search input within the combobox.",
+      type: "string",
+      default: "Search..."
+    }
   }}
 />

apps/api/src/vitnode.api.config.ts

@@ -1,9 +1,11 @@
 import { expect, test } from '@playwright/test';
 
+const vitNodeTitleRegex = /VitNode/;
+
 test.describe('Homepage', () => {
   test('should load successfully', async ({ page }) => {
     await page.goto('/');
-    await expect(page).toHaveTitle(/VitNode/);
+    await expect(page).toHaveTitle(vitNodeTitleRegex);
     await expect(page.getByText('Start Your Journey!')).toBeVisible();
   });
 });