npm package: @foundrykit/prettier-config
Description: Prettier configuration for FoundryKit projects
Author: FoundryKit Team
Latest version: 1.0.5

# @foundrykit/prettier-config

Prettier configuration for the FoundryKit ecosystem. Provides consistent code
formatting rules and standards across all FoundryKit packages and applications.

## Features

- **Consistent formatting** - Standardized code formatting across projects
- **Zero configuration** - Works out of the box with sensible defaults
- **Framework agnostic** - Works with any JavaScript/TypeScript project
- **Extensible** - Easy to customize for specific needs
- **IDE integration** - Seamless integration with popular editors

## Installation

```bash
pnpm add -D @foundrykit/prettier-config
```

## Quick Start

### 1. Install the package

```bash
pnpm add -D @foundrykit/prettier-config
```

### 2. Create Prettier configuration

```javascript
// prettier.config.js
module.exports = require('@foundrykit/prettier-config');
```

### 3. Add scripts to package.json

```json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}
```

## Configuration

### Basic Configuration

```javascript
// prettier.config.js
module.exports = require('@foundrykit/prettier-config');
```

### Custom Configuration

Extend the base configuration with custom settings:

```javascript
// prettier.config.js
module.exports = {
  ...require('@foundrykit/prettier-config'),
  semi: false,
  singleQuote: true,
  tabWidth: 4,
};
```

### Override Configuration

```javascript
// prettier.config.js
module.exports = {
  ...require('@foundrykit/prettier-config'),
  overrides: [
    {
      files: '*.md',
      options: {
        proseWrap: 'always',
        printWidth: 80,
      },
    },
    {
      files: '*.json',
      options: {
        tabWidth: 2,
      },
    },
  ],
};
```

## Default Settings

The base configuration includes these settings:

```javascript
module.exports = {
  // Line length
  printWidth: 80,

  // Indentation
  tabWidth: 2,
  useTabs: false,

  // Quotes
  singleQuote: true,
  quoteProps: 'as-needed',

  // Semicolons
  semi: true,

  // Trailing commas
  trailingComma: 'es5',

  // Brackets
  bracketSpacing: true,
  bracketSameLine: false,

  // Arrow functions
  arrowParens: 'always',

  // End of line
  endOfLine: 'lf',

  // HTML
  htmlWhitespaceSensitivity: 'css',

  // Embedded code
  embeddedLanguageFormatting: 'auto',
};
```

## Usage

### Command Line

Format all files:

```bash
# Format all files
pnpm format

# Check formatting without changing files
pnpm format:check

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

# Format specific file types
npx prettier --write "**/*.{ts,tsx,js,jsx,json,md}"
```

### Ignore Files

Create a `.prettierignore` file to exclude files:

```gitignore
# .prettierignore
node_modules
dist
build
.next
.vercel
*.min.js
*.min.css
```

### Pre-commit Hooks

Using husky and lint-staged:

```json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,md}": ["prettier --write"]
  }
}
```

## Integration

### VS Code

Install the Prettier extension and add to your settings:

```json
// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

### WebStorm

Configure Prettier in WebStorm:

1. Go to Settings/Preferences
2. Navigate to Languages & Frameworks > JavaScript > Prettier
3. Enable Prettier
4. Set the Prettier package to `@foundrykit/prettier-config`
5. Enable "On code reformat" and "On save"

### Git Hooks

Using husky:

```bash
# Install husky
pnpm add -D husky

# Initialize husky
npx husky install

# Add pre-commit hook
npx husky add .husky/pre-commit "pnpm lint-staged"
```

## Customization

### Project-Specific Settings

```javascript
// prettier.config.js
module.exports = {
  ...require('@foundrykit/prettier-config'),
  // Override specific settings
  printWidth: 100,
  tabWidth: 4,
  semi: false,
};
```

### File-Specific Overrides

```javascript
// prettier.config.js
module.exports = {
  ...require('@foundrykit/prettier-config'),
  overrides: [
    {
      files: '*.md',
      options: {
        proseWrap: 'always',
        printWidth: 72,
      },
    },
    {
      files: '*.json',
      options: {
        tabWidth: 2,
        printWidth: 80,
      },
    },
    {
      files: '*.{ts,tsx}',
      options: {
        semi: true,
        trailingComma: 'all',
      },
    },
  ],
};
```

### Environment-Specific Configuration

```javascript
// prettier.config.js
const baseConfig = require('@foundrykit/prettier-config');

module.exports = {
  ...baseConfig,
  overrides: [
    {
      files: '*.{ts,tsx}',
      options: {
        ...baseConfig,
        // TypeScript-specific settings
        parser: 'typescript',
      },
    },
  ],
};
```

## Best Practices

### Configuration Organization

```javascript
// ✅ Good - Clear, organized configuration
module.exports = {
  ...require('@foundrykit/prettier-config'),
  overrides: [
    {
      files: '*.md',
      options: {
        proseWrap: 'always',
      },
    },
  ],
};
```

### Consistent Settings

```javascript
// ✅ Good - Consistent with team standards
module.exports = {
  ...require('@foundrykit/prettier-config'),
  printWidth: 80,
  tabWidth: 2,
  semi: true,
};
```

### File Exclusions

```gitignore
# ✅ Good - Appropriate exclusions
node_modules/
dist/
build/
*.min.js
*.min.css
```

## Troubleshooting

### Common Issues

**Configuration not working:**

```bash
# Check if Prettier is using the correct config
npx prettier --find-config-path src/index.ts
```

**Format on save not working:**

```json
// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

**Conflicts with ESLint:**

```bash
# Install eslint-config-prettier
pnpm add -D eslint-config-prettier
```

### Performance Issues

```javascript
// prettier.config.js
module.exports = {
  ...require('@foundrykit/prettier-config'),
  // Optimize for large files
  printWidth: 80,
  tabWidth: 2,
};
```

## Migration

### From Custom Configuration

If you have an existing Prettier configuration:

1. **Backup your current config:**

```bash
cp .prettierrc .prettierrc.backup
```

2. **Replace with FoundryKit config:**

```javascript
// prettier.config.js
module.exports = require('@foundrykit/prettier-config');
```

3. **Test formatting:**

```bash
pnpm format:check
```

4. **Apply formatting:**

```bash
pnpm format
```

### From Other Configs

```javascript
// prettier.config.js
module.exports = {
  ...require('@foundrykit/prettier-config'),
  // Add any custom settings you need
  semi: false,
  singleQuote: true,
};
```

## Contributing

When contributing to the Prettier configuration:

1. Follow Prettier best practices
2. Test configurations thoroughly
3. Document setting changes
4. Maintain backward compatibility
5. Update this README

## License

MIT