@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

pnpm add -D @foundrykit/prettier-config

Quick Start

1. Install the package

pnpm add -D @foundrykit/prettier-config

2. Create Prettier configuration

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

3. Add scripts to package.json

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

Configuration

Basic Configuration

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

Custom Configuration

Extend the base configuration with custom settings:

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

Override Configuration

// 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:

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:

# 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:

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

Pre-commit Hooks

Using husky and lint-staged:

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

Integration

VS Code

Install the Prettier extension and add to your settings:

// .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:

# 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

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

File-Specific Overrides

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

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

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

Consistent Settings

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

File Exclusions

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

Troubleshooting

Common Issues

Configuration not working:

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

Format on save not working:

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

Conflicts with ESLint:

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

Performance Issues

// 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:

cp .prettierrc .prettierrc.backup

2. Replace with FoundryKit config:

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

3. Test formatting:

pnpm format:check

4. Apply formatting:

pnpm format

From Other Configs

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