A powerful VS Code extension that enables bidirectional visualization and conversion between ternary expressions
and if-else statements
. Boost your code readability and performance with instant previews and conversions.
- 🔄 Instantly convert between ternary expressions ⇄ if-else statements
- 🔍 Smart detection and conversion of nested ternary operations
- 🐛 Make complex conditions more readable and easier to debug
- 👁️ Real-time preview on hover without modifying your code
- 📖 Improve code readability for better team collaboration
- ⚡ Copy converted code with a single click
- 🎛️ Enable/Disable converter with one click
- 🔬 Granular level conversion support for nested conditions
- Features
- If-Else to Ternary
- Ternary to If-Else
- Additional Features
- How to Use
- Ternary to If-Else
- If-Else to Ternary
- Enable/Disable Converter
- Supported Languages
- Debugging
- Common Issues
- More Examples To Try With
- License
- Description: Transform nested
if-else
statements into conciseternary expressions
. - Key Benefits:
- Faster execution compared to traditional if-else blocks
- Reduces code length without losing functionality
- Embraces modern JavaScript practices
- Optimizes memory usage and final bundle size in production
- Supports granular conversion of nested conditions
- Description: Convert
ternary expressions
into more readableif-else
statements. - Key Benefits:
- Simplifies debugging and understanding of complex logic
- Serves as a learning aid for new team members
- Useful for teaching fundamental programming concepts
- Supports conversion at any nesting level
- Copy & Paste: Easy to copy the converted code and modify it for your needs
- Instant Preview: See conversions in real-time without affecting original code
- Bidirectional Conversion: Freedom to switch between both formats as needed
- Toggle Converter: Quick enable/disable functionality via status bar
- Granular Conversion: Convert specific parts of nested conditions
- Status Bar Button: Click the converter status in the status bar to toggle
- Quick Access: Instantly enable/disable without going through settings
- Visual Feedback: Status bar shows current state (Enabled/Disabled)
- Hover Over Ternary: Simply hover your mouse over any ternary expression (
condition ? value1 : value2
). - View Conversion: The extension will automatically show the corresponding
if-else
statement as a hover preview.
- Hover Over If-Else: Hover over an if-else statement to see its ternary equivalent.
- View Conversion: The extension shows a preview of the ternary expression.
The extension now supports converting specific parts of nested conditions:
This extension supports the following languages:
- JavaScript (
.js
) - TypeScript (
.ts
) - JavaScript React (
.jsx
) - TypeScript React (
.tsx
)
- Verify that you're using one of the supported file extensions:
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- Code must be syntactically correct for the converter to work
- Use your IDE's linting tools to check for syntax errors
- While both converters support nested structures, extremely complex cases might need to be broken down
- Consider splitting very complex conditions into smaller, more manageable parts
- Nested Ternary to If-Else
- Ternary in Functions
- JSX Ternary Expression
- Objects
- Nested If-Else to Ternary
const value = conditionA ? (conditionB ? 'B1' : 'B2') : 'A2';
// Converts to:
if (conditionA) {
if (conditionB) {
'B1';
} else {
'B2';
}
} else {
'A2';
}
function getStatus(conditionA: any) {
return conditionA
? 100 + 50
: Math.random() > 0.5
? 'Random True'
: 'Random False';
}
// Converts to:
if (conditionA) {
100 + 50
} else {
if (Math.random() > 0.5) {
'Random True'
} else {
'Random False'
}
}
{isLoading ? (
<Spinner />
) : error ? (
<ErrorMessage error={error} />
) : (
<Content data={data} />
)}
// Converts to:
if (isLoading) {
<Spinner />
} else if (error) {
<ErrorMessage error={error} />
} else {
<Content data={data} />
}
const obj2 = {
key: conditionA ? (conditionB ? 'value1' : 'value2') : 'value3',
}
// Converts to:
if (conditionA) {
if (conditionB) {
'value1'
} else {
'value2'
}
} else {
'value3'
}
if (hardCustomOccupancy && roomCustomOccupancy) {
roomCustomOccupancy?.adult;
} else {
if (setSelectionDetails) {
if (condition) {
valueA;
} else {
valueB;
}
} else {
valueC;
}
}
// Converts to:
hardCustomOccupancy && roomCustomOccupancy
? roomCustomOccupancy?.adult
: setSelectionDetails
? condition ? valueA : valueB
: valueC
This project is licensed under the MIT License - see the LICENSE file for details.