MUI SX Fold

A Visual Studio Code extension that enhances code readability by automatically folding MUI's sx props in your React components.

Features

• Automatic Folding: Automatically folds multiline sx props in your JavaScript/TypeScript React files
• Toggle Support: Easily toggle the folding feature on/off with a command
• Visual Indicators: Shows a subtle {{... indicator for folded props
• Language Support: Works with JavaScript, TypeScript, and their React variants (.js, .jsx, .ts, .tsx)

Example of how it works:

Before folding:

<Button
  sx={{
    backgroundColor: 'primary.main',
    color: 'white',
    padding: 2,
    '&:hover': {
      backgroundColor: 'primary.dark'
    }
  }}
>
  Click Me
</Button>

After folding:

<Button sx={{...
  Click Me
</Button>

Requirements

• Visual Studio Code version 1.98.0 or higher
• React codebase using Material-UI (MUI) components

Extension Settings

This extension contributes the following settings:

• mui-sx-fold.enabled: Enable/disable automatic folding of MUI sx props (default: true)

Commands

The extension provides the following commands:

• Toggle MUI SX Fold: Toggle the folding feature on/off

You can access these commands through the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux).

Known Issues

None reported yet. If you find any issues, please report them on our GitHub repository.

Release Notes

0.0.1

• Initial release
• Basic folding functionality for MUI sx props
• Toggle command
• Support for JS/TS React files

Contributing

Found a bug or have a feature request? Please open an issue on our GitHub repository.

License

This extension is licensed under the MIT License.