Use biome for formatting, linting

startkit-dev · May 10, 2024 · b9d03f5 · b9d03f5
1 parent d63cf7e
commit b9d03f5
Show file tree

Hide file tree

Showing 56 changed files with 173 additions and 368 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,8 +1,3 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss",
-    "unifiedjs.vscode-mdx"
-  ]
+  "recommendations": ["biomejs.biome", "bradlc.vscode-tailwindcss"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,34 +1,26 @@
 {
   // Filetype-specific config
   "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
 
   // Editor Config
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
+    "source.fixAll": "explicit",
+    "source.organizeImports.biome": "explicit"
   },
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
 
-  // ESLint Config
-  "eslint.format.enable": true,
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-
   // Files config
   "files.insertFinalNewline": true,
   "files.trimTrailingWhitespace": true,

diff --git a/README.md b/README.md
@@ -12,9 +12,7 @@
 - [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components) gallore
 - [Typescript](https://www.typescriptlang.org/) for a rock-solid codebase
 - [Drizzle](https://orm.drizzle.team) database ORM, configured for [PostgreSQL](https://www.postgresql.org/) and [Drizzle Kit](https://orm.drizzle.team/kit-docs/overview)
-- Edge runtime ready.
-- Strict, recommended [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) config using the [Vercel Style Guide](https://github.com/vercel/style-guide) for readable, safe code.
-- Extra linting power with [Oxlint](https://oxc-project.github.io)
+- Insanely fast linting and formatting via [Biome](https://bimoejs.dev) for readable, safe code.
 - [TailwindCSS](https://tailwindcss.com/) for utility-first CSS.
 - Gorgeous UI built with [Radix](https://www.radix-ui.com/) and [shadcn/ui](https://ui.shadcn.com/).
 - Authentication via [Next Auth](https://next-auth.js.org/) version 5.
@@ -154,7 +152,7 @@ where `button` can be any UI element from the project.
 
 ## Linting / Checking the codebase
 
-To run a full check of the codebase (type-check, lint, prettier check, test), run:
+To run a full check of the codebase (type-check, lint, format check, test), run:
 
 ```sh
 bun run check
@@ -172,7 +170,7 @@ bun run lint
 bun run type-check
 ```
 
-### Formatting with Prettier
+### Formatting with Biome
 
 ```sh
 bun run format

diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation"
-import { type ReactNode } from "react"
+import type { ReactNode } from "react"
 
 import { auth } from "@/auth"
 import { ThemePickerProvider } from "@/components/theme-picker/theme-picker-provider"

diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
@@ -16,7 +16,7 @@ export default function RegisterPage() {
       <div className="absolute top-4 flex w-full flex-row justify-between px-4 md:top-8">
         <Button
           asChild
-          className="z-20 flex items-center bg-transparent text-lg font-medium text-primary transition-colors hover:bg-accent lg:text-primary-foreground lg:hover:bg-primary-foreground/10 lg:hover:text-primary-foreground"
+          className="z-20 flex items-center bg-transparent font-medium text-lg text-primary transition-colors hover:bg-accent lg:hover:bg-primary-foreground/10 lg:hover:text-primary-foreground lg:text-primary-foreground"
         >
           <Link href="/">
             <Logo className="mr-2 size-6" />
@@ -29,7 +29,7 @@ export default function RegisterPage() {
         </Button>
       </div>
 
-      <div className="relative hidden h-full flex-col bg-muted p-10 text-primary-foreground dark:border-r lg:flex">
+      <div className="relative hidden h-full flex-col bg-muted p-10 text-primary-foreground lg:flex dark:border-r">
         <div className="absolute inset-0 h-full bg-primary" />
 
         <div className="relative z-20 mt-auto">
@@ -46,17 +46,17 @@ export default function RegisterPage() {
       <div className="lg:p-8">
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col space-y-2 text-center">
-            <h1 className="text-2xl font-semibold tracking-tight">
+            <h1 className="font-semibold text-2xl tracking-tight">
               Create an account
             </h1>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-muted-foreground text-sm">
               Enter your email below to create your account
             </p>
           </div>
 
           <UserAuthForm />
 
-          <p className="px-8 text-center text-sm text-muted-foreground">
+          <p className="px-8 text-center text-muted-foreground text-sm">
             By clicking continue, you agree to our{" "}
             <Button
               asChild

diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from "next"
+import type { Metadata } from "next"
 import Link from "next/link"
 
 import { UserAuthForm } from "@/components/auth/user-auth-form"
@@ -21,7 +21,7 @@ export default function SigninPage() {
       <div className="absolute top-4 flex w-full flex-row justify-between px-4 md:top-8">
         <Button
           asChild
-          className="z-20 flex items-center bg-transparent text-lg font-medium text-primary transition-colors hover:bg-accent lg:text-primary-foreground lg:hover:bg-primary-foreground/10 lg:hover:text-primary-foreground"
+          className="z-20 flex items-center bg-transparent font-medium text-lg text-primary transition-colors hover:bg-accent lg:hover:bg-primary-foreground/10 lg:hover:text-primary-foreground lg:text-primary-foreground"
         >
           <Link href="/">
             <Logo className="mr-2 size-6" />
@@ -34,7 +34,7 @@ export default function SigninPage() {
         </Button>
       </div>
 
-      <div className="relative hidden h-full flex-col bg-muted p-10 text-primary-foreground dark:border-r lg:flex">
+      <div className="relative hidden h-full flex-col bg-muted p-10 text-primary-foreground lg:flex dark:border-r">
         <div className="absolute inset-0 h-full bg-primary" />
 
         <div className="relative z-20 mt-auto">
@@ -51,17 +51,17 @@ export default function SigninPage() {
       <div className="lg:p-8">
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col space-y-2 text-center">
-            <h1 className="text-2xl font-semibold tracking-tight">
+            <h1 className="font-semibold text-2xl tracking-tight">
               Welcome back
             </h1>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-muted-foreground text-sm">
               Enter your email below to sign in to your account
             </p>
           </div>
 
           <UserAuthForm />
 
-          <p className="px-8 text-center text-sm text-muted-foreground">
+          <p className="px-8 text-center text-muted-foreground text-sm">
             Already have an account?{" "}
             <Button
               asChild

diff --git a/app/(legal)/layout.tsx b/app/(legal)/layout.tsx
@@ -1,6 +1,6 @@
 import { ChevronLeftIcon } from "lucide-react"
 import Link from "next/link"
-import { type ReactNode } from "react"
+import type { ReactNode } from "react"
 
 import { Footer } from "@/components/layout/footer"
 import { Button } from "@/components/ui/button"

diff --git a/app/(legal)/privacy/page.tsx b/app/(legal)/privacy/page.tsx
@@ -2,7 +2,7 @@ import Content from "./content.mdx"
 
 export default function PrivacyPage() {
   return (
-    <article className="prose pb-8 dark:prose-invert lg:prose-xl">
+    <article className="prose dark:prose-invert lg:prose-xl pb-8">
       <Content />
     </article>
   )

diff --git a/app/(legal)/terms/page.tsx b/app/(legal)/terms/page.tsx
@@ -2,7 +2,7 @@ import Content from "./content.mdx"
 
 export default function TermsPage() {
   return (
-    <article className="prose pb-8 dark:prose-invert lg:prose-xl">
+    <article className="prose dark:prose-invert lg:prose-xl pb-8">
       <Content />
     </article>
   )

diff --git a/app/(marketing)/features.tsx b/app/(marketing)/features.tsx
@@ -20,12 +20,7 @@ export function Features() {
       { title: "API Route Handlers" },
       { title: "Authentication (Email + OAuth)" },
       { title: "Typescript (Strict)" },
-      {
-        title: "Vercel Style Guide",
-        href: "https://github.com/vercel/style-guide"
-      },
-      { title: "Oxlint", href: "https://oxc-project.github.io" },
-      { title: "ESLint + Prettier" },
+      { title: "Biome", href: "https://biomejs.dev" },
       { title: "TailwindCSS", href: "https://tailwindcss.com" },
       { title: "Radix UI", href: "https://www.radix-ui.com" },
       { title: "PostgreSQL" },

diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from "react"
+import type { ReactNode } from "react"
 
 import { Footer } from "@/components/layout/footer"
 import { Header } from "@/components/layout/header"