Sales & GTM

Fundraising & Ecosystem

Prettier

Code formatting with shadcn/ui patterns — import ordering and Tailwind class sorting.

We use Prettier with shadcn/ui's official patterns: no semicolons, double quotes, ES5 trailing commas, and automatic import + Tailwind class sorting.

Configuration

prettier.config.js mirrors shadcn/ui's prettier.config.cjs:

/** @type {import('prettier').Config} */
module.exports = {
  semi: false,
  singleQuote: false,
  trailingComma: "es5",
  tabWidth: 2,
  printWidth: 80,
  bracketSpacing: true,
  endOfLine: "lf",
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/env(.*)$",
    "^@/types/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "^@/components/ui/(.*)$",
    "^@/components/(.*)$",
    "^@/styles/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]",
  ],
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  plugins: [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss",
  ],
}

Differences from defaults

Option	shadcn/ui	Default	Why
`semi`	`false`	`true`	Cleaner code, matches shadcn/ui components
`trailingComma`	`"es5"`	`"all"`	Better compatibility, smaller diffs

Commands

pnpm format            # Format entire project
pnpm format:check      # CI check
pnpm format:staged     # Staged files only
pnpm format:cache      # With caching (faster)

Import groups

Imports auto-sort into logical groups: React/Next → third-party → internal (env, types, config, lib, hooks, ui, components, styles, app) → relative.

// 1. React + Next
import * as React from "react"
import Link from "next/link"
// 2. Third-party
import { useForm } from "react-hook-form"
import { z } from "zod"
 
// 3. Internal
import { env } from "@/env"
import type { Student } from "@/types/student"
import { db } from "@/lib/db"
import { Button } from "@/components/ui/button"
 
// 4. Relative
import { localHelper } from "./helpers"

Tailwind class sorting

// Before
<div className="p-4 flex bg-blue-500 items-center text-white">
 
// After
<div className="flex items-center bg-blue-500 p-4 text-white">

Plugins

Plugin	Purpose
@ianvs/prettier-plugin-sort-imports	Intelligent import sorting via regex groups
prettier-plugin-tailwindcss	Sorts Tailwind classes

The Tailwind plugin must be last in the plugins array.

ESLint integration

ESLint runs alongside Prettier with conflict rules disabled via eslint-config-prettier.

// eslint.config.mjs
import { dirname } from "path"
import { fileURLToPath } from "url"
import { FlatCompat } from "@eslint/eslintrc"
import eslintConfigPrettier from "eslint-config-prettier"
 
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
const compat = new FlatCompat({ baseDirectory: __dirname })
 
export default [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  eslintConfigPrettier, // must be last
]

pnpm lint
pnpm lint --fix

Conventions: TypeScript-first (no any), server components by default, absolute aliases (@/components/ui/button).

IDE setup

VS Code

Install Prettier - Code formatter, then add to .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.requireConfig": true
}

WebStorm

Settings → Languages & Frameworks → JavaScript → Prettier. Enable "On save" and "On 'Reformat Code' action". Set Prettier package to node_modules/prettier.

Pre-commit hook

# .husky/pre-commit
npx pretty-quick --staged

Ignored

# .prettierignore
dist
node_modules
.next
build
.contentlayer
pnpm-lock.yaml

Troubleshooting

Import sorting not working — verify plugin order: sort-imports first, tailwindcss last.

VS Code not formatting — check Prettier extension installed, editor.defaultFormatter set, prettier.config.js exists in root.

Different formatting locally vs CI — pin Prettier version in package.json:

{
  "devDependencies": {
    "prettier": "3.7.4"
  }
}

Prettier

Code formatting with shadcn/ui patterns — import ordering and Tailwind class sorting.

We use Prettier with shadcn/ui's official patterns: no semicolons, double quotes, ES5 trailing commas, and automatic import + Tailwind class sorting.

Configuration

prettier.config.js mirrors shadcn/ui's prettier.config.cjs:

/** @type {import('prettier').Config} */
module.exports = {
  semi: false,
  singleQuote: false,
  trailingComma: "es5",
  tabWidth: 2,
  printWidth: 80,
  bracketSpacing: true,
  endOfLine: "lf",
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/env(.*)$",
    "^@/types/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "^@/components/ui/(.*)$",
    "^@/components/(.*)$",
    "^@/styles/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]",
  ],
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  plugins: [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss",
  ],
}

Differences from defaults

Option	shadcn/ui	Default	Why
`semi`	`false`	`true`	Cleaner code, matches shadcn/ui components
`trailingComma`	`"es5"`	`"all"`	Better compatibility, smaller diffs

Commands

pnpm format            # Format entire project
pnpm format:check      # CI check
pnpm format:staged     # Staged files only
pnpm format:cache      # With caching (faster)

Import groups

Imports auto-sort into logical groups: React/Next → third-party → internal (env, types, config, lib, hooks, ui, components, styles, app) → relative.

// 1. React + Next
import * as React from "react"
import Link from "next/link"
// 2. Third-party
import { useForm } from "react-hook-form"
import { z } from "zod"
 
// 3. Internal
import { env } from "@/env"
import type { Student } from "@/types/student"
import { db } from "@/lib/db"
import { Button } from "@/components/ui/button"
 
// 4. Relative
import { localHelper } from "./helpers"

Tailwind class sorting

// Before
<div className="p-4 flex bg-blue-500 items-center text-white">
 
// After
<div className="flex items-center bg-blue-500 p-4 text-white">

Plugins

Plugin	Purpose
@ianvs/prettier-plugin-sort-imports	Intelligent import sorting via regex groups
prettier-plugin-tailwindcss	Sorts Tailwind classes

The Tailwind plugin must be last in the plugins array.

ESLint integration

ESLint runs alongside Prettier with conflict rules disabled via eslint-config-prettier.

// eslint.config.mjs
import { dirname } from "path"
import { fileURLToPath } from "url"
import { FlatCompat } from "@eslint/eslintrc"
import eslintConfigPrettier from "eslint-config-prettier"
 
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
const compat = new FlatCompat({ baseDirectory: __dirname })
 
export default [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  eslintConfigPrettier, // must be last
]

pnpm lint
pnpm lint --fix

Conventions: TypeScript-first (no any), server components by default, absolute aliases (@/components/ui/button).

IDE setup

VS Code

Install Prettier - Code formatter, then add to .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.requireConfig": true
}

WebStorm

Settings → Languages & Frameworks → JavaScript → Prettier. Enable "On save" and "On 'Reformat Code' action". Set Prettier package to node_modules/prettier.

Pre-commit hook

# .husky/pre-commit
npx pretty-quick --staged

Ignored

# .prettierignore
dist
node_modules
.next
build
.contentlayer
pnpm-lock.yaml

Troubleshooting

Import sorting not working — verify plugin order: sort-imports first, tailwindcss last.

VS Code not formatting — check Prettier extension installed, editor.defaultFormatter set, prettier.config.js exists in root.

Different formatting locally vs CI — pin Prettier version in package.json:

{
  "devDependencies": {
    "prettier": "3.7.4"
  }
}

balqalam

Prettier

Configuration

Differences from defaults

Commands

Import groups

Tailwind class sorting

Plugins

ESLint integration

IDE setup

VS Code

WebStorm

Pre-commit hook

Ignored

Troubleshooting

See also

balqalam

Prettier

Configuration

Differences from defaults

Commands

Import groups

Tailwind class sorting

Plugins

ESLint integration

IDE setup

VS Code

WebStorm

Pre-commit hook

Ignored

Troubleshooting

See also