Managing Code Formatting in Multi-Language Projects

---
description: Enforce consistent code formatting across multi-language projects to enhance readability and maintainability.
globs: '**/*.{js,jsx,ts,tsx,py,java,html,css,scss}'
tags: [code-formatting, multi-language, consistency]
priority: 1
version: 1.0.0
---

# Managing Code Formatting in Multi-Language Projects

## Context
- Applicable to projects utilizing multiple programming languages.
- Ensures uniform code style across different languages to facilitate collaboration and reduce errors.

## Requirements
- **General Formatting:**
  - Use spaces for indentation:
    - JavaScript/TypeScript: 2 spaces.
    - Python: 4 spaces.
    - Java: 4 spaces.
    - HTML/CSS/SCSS: 2 spaces.
  - Maintain consistent line endings (e.g., LF).
  - Limit line length to 80 characters where feasible.
  - Remove trailing whitespace in all files.
- **Language-Specific Guidelines:**
  - **JavaScript/TypeScript:**
    - Use camelCase for variable and function names.
    - End statements with semicolons.
    - Prefer single quotes for strings.
  - **Python:**
    - Follow PEP 8 standards.
    - Use snake_case for variable and function names.
    - Include docstrings for all public modules, classes, and functions.
  - **Java:**
    - Use PascalCase for class names and camelCase for methods and variables.
    - Place opening braces on the same line as the declaration.
    - Include Javadoc comments for classes and public methods.
  - **HTML/CSS/SCSS:**
    - Use lowercase for element names, attributes, and property names.
    - Enclose attribute values in double quotes.
    - Use hyphenated class names (kebab-case) in CSS/SCSS.
- **Tooling:**
  - Integrate linters and formatters specific to each language:
    - JavaScript/TypeScript: ESLint and Prettier.
    - Python: Flake8 and Black.
    - Java: Checkstyle.
    - HTML/CSS/SCSS: Prettier and Stylelint.
  - Configure pre-commit hooks to enforce formatting rules before code is committed.

## Examples

<example>
**JavaScript/TypeScript:**
// Good
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

// Bad
const fetch_data = async function() {
    var response = await fetch("https://api.example.com/data")
    return response.json()
}
</example>

<example>
**Python:**
# Good
def calculate_total(price: float, tax: float) -> float:
    """Calculate total price including tax."""
    return price + (price * tax)

# Bad
def CalculateTotal(Price, Tax):
    return Price + (Price * Tax)
</example>

<example>
**Java:**
// Good
public class OrderProcessor {
    public void processOrder(Order order) {
        // processing logic
    }
}

// Bad
public class orderprocessor
{
    public void ProcessOrder(Order Order)
    {
        // processing logic
    }
}
</example>

<example>
**HTML/CSS/SCSS:**
<!-- Good -->
<div class="container">
  <h1>Welcome</h1>
</div>

<!-- Bad -->
<DIV CLASS="CONTAINER">
  <H1>Welcome</H1>
</DIV>
/* Good */
.container {
  display: flex;
  justify-content: center;
}

/* Bad */
.CONTAINER {
    display:flex;
    justify-content:center;
}
</example>