<!--
title: Clean code formatting rules
domain: ai-agents
topic: Code Style
language: TSX
source: continuedev/continue
updated: 2025-07-04
url: https://awesomereviewers.com/reviewers/continue-clean-code-formatting-rules/
-->

Maintain consistent and clean code formatting to improve readability and maintainability. Follow these guidelines:

1. Use correct syntax for utility classes:
   ```tsx
   // ❌ Bad
   className="gap 1.5 flex-row"
   className={`${toolsSupported ? "md:flex" : "int:flex"} hover:underline"`}
   
   // ✅ Good
   className="gap-1.5 flex-row"
   className={`hover:underline ${toolsSupported ? "md:flex" : ""}`}
   ```

2. Keep class strings organized and manageable:
   - Extract complex conditional classes into variables
   - Use template literals for dynamic classes
   - Maintain consistent ordering (layout → spacing → visual)

3. Avoid inline comments in expressions:
   ```tsx
   // ❌ Bad
   ) : item.message.role === "tool" ? null : item.message.role === // comment here
   
   // ✅ Good
   // Comment above the expression
   ) : item.message.role === "tool" ? null : item.message.role === "assistant"
   ```

4. Use appropriate import paths:
   - Import from main module exports rather than internal files
   - Maintain proper encapsulation of implementation details
   - Keep imports organized and grouped by type

These rules help maintain code consistency, improve readability, and make the codebase easier to maintain and refactor.