CODEWITHSUNDEEP
javascriptreactjsjsxvisual-studio-codecode-folding
maplesyrupman
maplesyrupman

Reputation: 51

Customize code folding for .js and .jsx files in vscode to achieve folding of className='...'

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 javascript-language.configuration.json file.

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>

Upvotes: 2

Views: 996

Answers (1)

Peter Mugendi
Peter Mugendi

Reputation: 945

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 jsx and tsx as of the supported languages and then reload.

See ; settings

This is now my tsx file with tailwind with folding enabled.

settings

Upvotes: 2

Related Questions