Prettier Configuration Guide for Clean Code Style

1. General Formatting

• Semicolons (semi): Always use semicolons at the end of statements for clarity and to avoid potential pitfalls in JavaScript's automatic semicolon insertion.

• Tab Width (tabWidth): Set the width of a tab to 2 spaces to ensure code is readable and consistent across various editors and environments.

• Use Tabs (useTabs): Use spaces instead of tabs for indentation to maintain consistency in how code looks across different environments and editors.

• Print Width (printWidth): Limit lines to 100 characters to improve readability and maintainability. Longer lines are wrapped according to the rules and preferences defined in Prettier.

• End of Line (endOfLine): Use lf (line feed) for the line endings to ensure consistency across different operating systems, especially in codebases shared among users of Linux, macOS, and Windows.

2. Quotes and Commas

• Single Quote (singleQuote): Prefer single quotes for strings to maintain consistency and reduce visual noise in the code.

• Trailing Comma (trailingComma): Do not add a trailing comma to the end of lists and object literals to align with traditional JavaScript styling, which can be beneficial for minimizing diffs in version control.

• Bracket Spacing (bracketSpacing): Do not add spaces between brackets of object literals for a more compact style that emphasizes the grouping of key-value pairs.

• Arrow Function Parentheses (arrowParens): Always include parentheses around the arguments of arrow functions for clarity, especially in more complex expressions or when including type annotations.

3. JSX Specific

• JSX Single Quote (jsxSingleQuote): Use double quotes in JSX attributes for consistency with HTML attributes, which typically use double quotes.

• Bracket Same Line (bracketSameLine): Place the closing > of a multiline JSX element at the end of the last line instead of being alone on the next line, aligning with traditional HTML formatting.

4. Import Sorting

• Plugin for Sorting Imports: Utilize @ianvs/prettier-plugin-sort-imports to automatically sort import statements in a consistent order, enhancing readability and making it easier to locate specific imports.

• Import Order: Define a specific order for imports, starting with type imports, followed by built-in modules, third-party modules, internal paths, and finally styles and relative paths. This order helps in visually categorizing imports and keeping the codebase organized.

• TypeScript Version for Import Sorting: Specify the TypeScript version to ensure compatibility and optimal sorting of TypeScript-specific syntax.

• Parser Plugins for Import Sorting: Include parser plugins such as jsx, typescript, and decorators-legacy to accurately parse and sort imports involving these syntax features.

Best Practices

• Run Prettier Regularly: Integrate Prettier into your development workflow to automatically format your code, ensuring consistency. Consider setting up your editor to format on save or using pre-commit hooks to format changed files.

• Review Prettier Configurations Periodically: As your project evolves, so might your formatting preferences. Regularly review and adjust your Prettier configuration to keep up with best practices and team agreements.

• Consistent Configuration Across Projects: If you work on multiple projects, strive to maintain a consistent Prettier configuration across them to reduce context switching costs and improve developer experience.

Adhering to these guidelines and utilizing Prettier effectively can significantly improve the consistency and readability of your codebase, making it easier for you and your team to maintain and extend your projects.