prettier-integration skill

---
name: prettier-integration
user-invocable: false
description: Use when prettier integration with editors, pre-commit hooks, ESLint, and CI/CD pipelines.
allowed-tools: [Read, Write, Edit, Bash, Glob, Grep]
---

# prettier integration

Master Prettier integration with editors, pre-commit hooks, ESLint, and CI/CD pipelines. 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