npm package: @scaffit/prettier
Description: Prettier code formatting setup with Tailwind CSS plugin for Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js projects
Author: Santosh Hanumaiah Ranganatha
Latest version: 1.0.4

# @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)
```bash
# Add Prettier scaffold (no installation needed!)
npx scaffit add prettier
```

### Alternative: Global Installation
```bash
# Install CLI globally
npm install -g scaffit

# Add Prettier scaffold
scaffit add prettier
```

### Option 2: Direct npm package usage
```bash
# 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:

```bash
# 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:**
```json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}
```

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

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

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

**Express/Fastify/Node.js:**
```json
{
  "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
```bash
npm run format
```

### Check formatting
```bash
npm run format:check
```

### Format specific files
```bash
npx prettier --write src/**/*.{js,ts,jsx,tsx}
```

### VS Code Integration

Add to your VS Code settings.json:

```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