Nested ternary formatting - add indents back
Problem
Edit: I will no longer be actively participating in this thread - my reasons are explained in comment below. Hello, there are many - including me thinking that change to nested ternary is not best decision. Eg threads https://github.com/prettier/prettier/issues/5476 https://github.com/prettier/prettier/issues/3018 I know there is some reasoning why nested ternary indent was removed, but it's much harder to read code now. At least would be good to have option to remain nice formatting (from previous prettier version) - formatting of ternaries with indent and not under each other like: [code block] instead much easier to understand and read is: [code block]
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Reintroduce Indentation for Nested Ternary Operators in Prettier
The recent changes in Prettier's formatting rules removed indentation for nested ternary operators, leading to reduced readability. This change was made to simplify the formatting process, but it has resulted in code that is harder to understand, especially for complex expressions. The absence of indentation makes it difficult for developers to quickly grasp the structure of nested ternaries.
Awaiting Verification
Be the first to verify this fix
- 1
Fork the Prettier Repository
Create a personal fork of the Prettier repository on GitHub to make modifications to the codebase.
bashgit clone https://github.com/yourusername/prettier.git - 2
Modify the Formatting Logic
Locate the formatting logic for ternary operators in the Prettier codebase. Adjust the logic to reintroduce indentation for nested ternaries. This may involve modifying the `printTernary` function to include a parameter for indentation level.
javascript// Example modification in printTernary function function printTernary(node, options) { const indent = options.indent || 0; return `${' '.repeat(indent)}${node.test} ? ${node.consequent} : ${node.alternate}`; } - 3
Add Configuration Option
Implement a new configuration option in Prettier that allows users to enable or disable nested ternary indentation. This can be added to the Prettier options schema.
javascript// Example configuration option "nestedTernaryIndentation": { "type": "boolean", "default": false } - 4
Test the Changes
Run the Prettier test suite to ensure that the changes do not break existing functionality. Create new tests to verify that nested ternaries are formatted correctly with indentation when the new option is enabled.
bashnpm test - 5
Submit a Pull Request
Once the changes are verified and tested, submit a pull request to the main Prettier repository for review. Include a detailed description of the changes and the reasoning behind them.
bashgit push origin feature/nested-ternary-indentation # Then create a PR on GitHub
Validation
To confirm the fix worked, format a code snippet with nested ternaries using the new configuration option. Verify that the output includes the expected indentation. Run the Prettier test suite to ensure all tests pass without errors.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep