Why are my HTML class attributes collapsed inline?

This behaviour of attributes being collapsed into three dots is caused by the moalamri.inline-fold VS Code extension. You can find its Visual Studio Marketplace page here, and its source code here.

An excerpt from its readme:

VS Code Inline Fold extension mimics VS Code’s folding experience for inline code.
This is especially useful when working with frameworks like Tailwind CSS which use lots of utility classes that often disfigure code visual structure. You can expand the folds by clicking on them. You can also configure the extension to target specific attributes in your markup.
The characters used as a mask can be configured in the settings and you can update the regex expression to match any code pattern you want.
The extension also enables folding of attribute values within HTML/JSX tags. It makes your code tidy and easier to navigate.

There’s another extension which can have a similar effect: stivo.tailwind-fold.

It’s useful to use VS Code’s extension bisect feature to find out what extension is causing certain behaviours.

Leave a Comment