@scaffit/prettier

Prettier code formatting setup with Tailwind CSS plugin support.

Features

• Consistent code formatting with Prettier
• Multi-framework support - Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js
• Automatic framework detection - Adapts configuration based on your project
• Tailwind CSS plugin - Optional Tailwind class sorting
• Customizable configuration for semicolons, quotes, and tab width
• Package.json scripts for formatting commands
• Framework-specific ignore files - Ignores build directories for your framework

Installation

Option 1: Using Scaffit CLI (Recommended)

# Add Prettier scaffold (no installation needed!)
npx scaffit add prettier

Alternative: Global Installation

# Install CLI globally
npm install -g scaffit

# Add Prettier scaffold
scaffit add prettier

Option 2: Direct npm package usage

# Install scaffold directly
npm install @scaffit/prettier

# Use in your code
import { setupPrettier, previewPrettier } from '@scaffit/prettier';

// Setup Prettier with custom options
const result = await setupPrettier({
  includeTailwindPlugin: true,
  addFormatScripts: true,
  projectRoot: './my-project'
});

// Preview changes before applying
const preview = await previewPrettier({
  includeTailwindPlugin: true,
  addFormatScripts: true
});

Note: Both approaches require @scaffit/core to be installed (automatically handled).

Usage

After installation, you can immediately format your code:

# Format all files
npm run format

# Check formatting without changing files
npm run format:check

Note: Formatting is ready to use immediately after installation.

Configuration Options

• Include Tailwind CSS plugin: Add Tailwind class sorting
• Add format scripts: Add npm scripts for formatting commands
• Framework: Automatically detected (Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js)

Generated Files

.prettierrc.json

Framework-specific Prettier configuration:

Next.js/React:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

Vue:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss", "@vue/prettier"],
  "vueIndentScriptAndStyle": true
}

Angular:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": "*.html",
      "options": { "parser": "angular" }
    }
  ]
}

Svelte:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"]
}

Express/Fastify/Node.js:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "endOfLine": "lf"
}

.prettierignore

Framework-specific ignore patterns:

Next.js:

node_modules
.next
out
.vercel
dist
build
coverage
*.log
*.lock
package-lock.json
yarn.lock
pnpm-lock.yaml

React/Vue/Angular/Svelte:

node_modules
dist
build
coverage
*.log
*.lock
package-lock.json
yarn.lock
pnpm-lock.yaml

Express/Fastify/Node.js:

node_modules
dist
build
coverage
*.log
*.lock
package-lock.json
yarn.lock
pnpm-lock.yaml

Dependencies Added

• prettier - Code formatter
• prettier-plugin-tailwindcss - Tailwind CSS class sorting (if enabled)

Package.json Scripts Added

• format - Format all files with Prettier
• format:check - Check if files are formatted correctly

ESLint Integration

If ESLint integration is enabled, the scaffold will:

1. Add eslint-config-prettier to dependencies
2. Update your ESLint configuration to extend prettier
3. Prevent conflicts between ESLint and Prettier

Usage Examples

Format all files

npm run format

Check formatting

npm run format:check

Format specific files

npx prettier --write src/**/*.{js,ts,jsx,tsx}

VS Code Integration

Add to your VS Code settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Configuration

You can customize Prettier by editing .prettierrc.json:

• semi: Add semicolons (true/false)
• singleQuote: Use single quotes (true/false)
• tabWidth: Number of spaces per indentation level
• trailingComma: Add trailing commas ("none", "es5", "all")
• printWidth: Line length before wrapping
• endOfLine: Line ending style ("lf", "crlf", "cr", "auto")

Next Steps

1. Run npm run format to format existing files
2. Set up your editor to format on save
3. Add Prettier to your CI/CD pipeline with npm run format:check
4. Consider adding a pre-commit hook to ensure formatting