I am looking to fold the className attribute in my react app, as I am using tailwindcss and thus the classNames get quite long, cluttering my files. I've come across code folding based on start and end identifiers using regex, but am unsure as to how I go about editing the
I'm thinking of setting the start identifier to
className=' and the end identifier to
How do I open this file, and is it even possible to code fold within a single line?
for example, I would like to convert the following:
<div className='some-superlong list-of-tailwind utility-classes that clutter-up this-file'> <p className='some-more utility-classes that-need to get-folded'> </div>
into something like this:
<div className...> <p className...> </div>
Install a plugin called Inline Fold.
If it its not working for JSX or TSX Simply go to vscode settings and search for
inline fold settings and add
tsx as of the supported languages and then reload.
This is now my
tsx file with tailwind with folding enabled.