home / skills / thebushidocollective / han / prettier-configuration

This skill helps you master Prettier configuration including options, files, patterns, and best practices to ensure consistent, high-quality JavaScript

npx playbooks add skill thebushidocollective/han --skill prettier-configuration

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
11.2 KB
---
name: prettier-configuration
user-invocable: false
description: Use when prettier configuration including options, config files, ignore patterns, and formatting rules.
allowed-tools: [Read, Write, Edit, Bash, Glob, Grep]
---

# prettier configuration

Master Prettier configuration including options, config files, ignore patterns, and formatting rules. This skill provides comprehensive coverage of essential concepts, patterns, and best practices for professional Prettier development.

## Overview

Prettier is a powerful tool for javascript development, providing robust capabilities for maintaining code quality and ensuring reliable software delivery. This skill covers the fundamental through advanced aspects of working with Prettier.

## Installation and Setup

### Basic Installation

Setting up Prettier requires proper installation and configuration in your development environment.

```bash
# Installation command specific to Prettier
# Follow official documentation for latest version
```

### Project Configuration

Create appropriate configuration files and setup for your project structure:

- Configuration file setup
- Project structure organization
- Team collaboration setup
- CI/CD integration preparation

## Core Concepts

### Fundamental Principles

Understanding the core principles of Prettier is essential for effective usage:

1. **Architecture** - How Prettier is structured and operates
2. **Configuration** - Setting up and customizing behavior
3. **Integration** - Working with other tools and frameworks
4. **Best Practices** - Industry-standard approaches

### Key Features

Prettier provides several key features that make it valuable:

- Feature 1: Core functionality
- Feature 2: Advanced capabilities  
- Feature 3: Integration options
- Feature 4: Performance optimization
- Feature 5: Extensibility

### Configuration Strategy

Proper configuration ensures Prettier works optimally:

- Environment-specific setup
- Team standards enforcement
- Performance tuning
- Error handling configuration

### Advanced Usage

For complex scenarios, Prettier offers advanced capabilities:

- Custom extensions
- Advanced patterns
- Performance optimization
- Scalability considerations

## Code Examples

### Example 1: Basic Setup

```javascript
// Basic Prettier setup
// Demonstrates fundamental usage patterns
// Shows proper initialization and configuration

// Core setup code
function basicSetup() {
  // Initialize framework
  // Configure basic options
  // Return configured instance
}

// Usage example
const instance = basicSetup();
```

### Example 2: Configuration

```javascript
// Configuration example for Prettier
// Shows how to properly configure
// Includes common options and patterns

// Configuration object
const config = {
  option1: 'value1',
  option2: 'value2',
  advanced: {
    setting1: true,
    setting2: false
  }
};

// Apply configuration
function applyConfig(config) {
  // Validation logic
  // Application logic
  // Return result
}
```

### Example 3: Advanced Pattern

```javascript
// Advanced usage pattern
// Demonstrates sophisticated techniques
// Shows best practices in action

function advancedPattern() {
  // Setup phase
  // Execution phase
  // Cleanup phase
}
```

### Example 4: Integration

```javascript
// Integration with other tools
// Shows real-world usage
// Demonstrates interoperability

function integrationExample() {
  // Setup integration
  // Execute workflow
  // Handle results
}
```

### Example 5: Error Handling

```javascript
// Proper error handling approach
// Defensive programming patterns
// Graceful degradation

function withErrorHandling() {
  try {
    // Main logic
  } catch (error) {
    // Error recovery
  } finally {
    // Cleanup
  }
}
```

### Example 6: Performance Optimization

```javascript
// Performance-optimized implementation
// Shows efficiency techniques
// Demonstrates best practices

function optimizedApproach() {
  // Efficient implementation
  // Resource management
  // Performance monitoring
}
```

### Example 7: Testing

```javascript
// Testing approach for Prettier
// Unit test examples
// Integration test patterns

function testExample() {
  // Test setup
  // Execution
  // Assertions
  // Teardown
}
```

### Example 8: Production Usage

```javascript
// Production-ready implementation
// Includes monitoring and logging
// Error recovery and resilience

function productionExample() {
  // Production configuration
  // Monitoring setup
  // Error handling
  // Logging
}
```

## Best Practices

1. **Follow conventions** - Adhere to established naming and structural patterns for consistency
2. **Configure appropriately** - Set up framework configuration that matches project requirements
3. **Validate inputs** - Always validate and sanitize inputs before processing
4. **Handle errors gracefully** - Implement comprehensive error handling and recovery
5. **Document decisions** - Comment configuration choices and non-obvious implementations
6. **Test thoroughly** - Write comprehensive tests for all functionality
7. **Optimize performance** - Profile and optimize critical paths
8. **Maintain security** - Follow security best practices and guidelines
9. **Keep updated** - Regularly update framework and dependencies
10. **Monitor production** - Implement logging and monitoring for production systems

## Common Pitfalls

1. **Incorrect configuration** - Misconfiguration leads to unexpected behavior and bugs
2. **Missing error handling** - Not handling edge cases causes production issues
3. **Poor performance** - Not optimizing leads to scalability problems
4. **Inadequate testing** - Insufficient test coverage misses bugs
5. **Security vulnerabilities** - Not following security best practices exposes risks
6. **Tight coupling** - Poor architecture makes maintenance difficult
7. **Ignoring warnings** - Dismissing framework warnings leads to future problems
8. **Outdated dependencies** - Using old versions exposes security risks
9. **No monitoring** - Lack of observability makes debugging difficult
10. **Inconsistent standards** - Team inconsistency reduces code quality

## Advanced Topics

### Customization

Prettier allows extensive customization for specific needs:

- Custom plugins and extensions
- Behavior modification
- Integration adapters
- Domain-specific adaptations

### Performance Tuning

Optimize Prettier performance for production:

- Profiling and benchmarking
- Resource optimization
- Caching strategies
- Parallel execution

### CI/CD Integration

Integrate Prettier into continuous integration pipelines:

- Automated execution
- Result reporting
- Quality gates
- Deployment integration

### Troubleshooting

Common issues and their solutions:

- Configuration errors
- Integration problems
- Performance issues
- Unexpected behavior

## When to Use This Skill

- Setting up Prettier in new projects
- Configuring Prettier for specific requirements
- Migrating to Prettier from alternatives
- Optimizing Prettier performance
- Implementing advanced patterns
- Troubleshooting Prettier issues
- Integrating Prettier with CI/CD
- Training team members on Prettier
- Establishing team standards
- Maintaining existing Prettier implementations

## Additional Resources

### Documentation

- Official Prettier documentation
- Community guides and tutorials
- API reference materials
- Migration guides

### Tools and Utilities

- Development tools
- Testing utilities
- Monitoring solutions
- Helper libraries

### Community

- Online forums and communities
- Open source contributions
- Best practice repositories
- Example implementations

## Conclusion

Mastering Prettier requires understanding both fundamentals and advanced concepts. This skill provides the foundation for professional-grade usage, from initial setup through production deployment. Apply these principles consistently for best results.

## Detailed Configuration Examples

### Configuration Option 1

Comprehensive configuration example demonstrating best practices and common patterns used in production environments.

```bash
# Detailed configuration setup
# Includes all necessary options
# Optimized for production use
```

### Configuration Option 2

Alternative configuration approach for different use cases, showing flexibility and adaptability of the framework.

```bash
# Alternative configuration
# Different optimization strategy
# Suitable for specific scenarios
```

### Configuration Option 3

Advanced configuration for complex environments with multiple requirements and constraints.

```bash
# Advanced configuration
# Handles complex scenarios
# Production-ready setup
```

## Advanced Usage Patterns

### Pattern 1: Modular Organization

Organize your setup in a modular way to improve maintainability and scalability across large projects.

Implementation details:

- Separate concerns appropriately
- Use composition over inheritance
- Follow single responsibility principle
- Maintain clear interfaces

### Pattern 2: Performance Optimization

Optimize for performance in production environments with proven strategies and techniques.

Key considerations:

- Profile before optimizing
- Focus on bottlenecks
- Cache appropriately
- Monitor in production

### Pattern 3: Error Recovery

Implement robust error recovery mechanisms to handle failures gracefully.

Recovery strategies:

- Graceful degradation
- Retry with backoff
- Circuit breaker pattern
- Comprehensive logging

### Pattern 4: Testing Strategy

Comprehensive testing approach ensuring code quality and reliability.

Testing layers:

- Unit tests for components
- Integration tests for workflows
- End-to-end tests for user scenarios
- Performance tests for scalability

## Integration Strategies

### Integration with CI/CD

Seamless integration into continuous integration and deployment pipelines.

Steps:

1. Configure pipeline
2. Set up automation
3. Define quality gates
4. Monitor execution

### Integration with Development Tools

Connect with popular development tools and IDEs for improved workflow.

Tools:

- IDE plugins and extensions
- CLI tools and utilities
- Build system integration
- Version control hooks

### Integration with Monitoring

Implement monitoring and observability for production systems.

Monitoring aspects:

- Performance metrics
- Error tracking
- Usage analytics
- Health checks

## Team Practices

### Establishing Standards

Create and maintain consistent standards across the team.

Standards to define:

- Naming conventions
- Code organization
- Documentation requirements
- Review processes

### Onboarding Process

Streamline onboarding for new team members.

Onboarding steps:

- Initial setup guide
- Training materials
- Practice exercises
- Mentorship program

### Code Review Guidelines

Effective code review practices for quality assurance.

Review checklist:

- Correctness
- Performance
- Security
- Maintainability

## Troubleshooting Guide

### Common Issue 1

Detailed troubleshooting steps for frequently encountered problem.

Resolution steps:

1. Identify symptoms
2. Check configuration
3. Verify dependencies
4. Test solution

### Common Issue 2

Another common issue with comprehensive resolution approach.

Diagnostic steps:

1. Reproduce issue
2. Gather logs
3. Analyze data
4. Apply fix

### Common Issue 3

Third common scenario with clear resolution path.

Investigation process:

1. Understand context
2. Review recent changes
3. Test hypotheses
4. Implement solution

Overview

This skill teaches practical Prettier configuration for projects, covering options, config files, ignore patterns, and formatting rules. It guides setup from basic installation through advanced patterns for CI/CD, performance tuning, and team standards. The goal is consistent, maintainable formatting that integrates with developer workflows.

How this skill works

The skill inspects common Prettier configuration locations (.prettierrc, package.json, prettier.config.js) and evaluates option choices like printWidth, tabWidth, singleQuote, trailingComma, and parser selection. It explains ignore patterns (.prettierignore), editor/IDE integration, and automated enforcement via git hooks and CI jobs. It also outlines strategies for extending Prettier with plugins and custom rules where needed.

When to use it

  • Initializing Prettier in a new project
  • Standardizing formatting across a team or mono-repo
  • Migrating from another formatter to Prettier
  • Adding Prettier enforcement to CI/CD pipelines
  • Tuning performance for large codebases
  • Troubleshooting inconsistent formatting or ignore behavior

Best practices

  • Create a single source of truth for config (root-level .prettierrc or prettier.config.js).
  • Commit .prettierignore and config to version control and document non-obvious choices.
  • Integrate formatting into pre-commit hooks and CI quality gates rather than relying on manual runs.
  • Prefer simple, team-consensus options over heavy customization; use plugins only when necessary.
  • Test configuration changes on representative files and add unit/integration checks to CI.

Example use cases

  • Add Prettier to an existing TypeScript repo and run it in a CI job that fails on diffs.
  • Create a shared config package for multiple projects in a monorepo to enforce identical rules.
  • Use .prettierignore to exclude generated code and third-party libraries from formatting.
  • Combine Prettier with ESLint: configure ESLint to defer stylistic rules to Prettier and run both in CI.
  • Profile large repositories and enable incremental formatting or parallel runners to improve speed.

FAQ

How do I make Prettier the source of truth alongside ESLint?

Disable overlapping stylistic rules in ESLint and use eslint-config-prettier; run Prettier first or use eslint --fix with prettier integration so formatting decisions are consistent.

Where should I put the Prettier config for a monorepo?

Place a root-level config at the monorepo root for shared rules and allow per-package overrides when necessary via package-level config files.