Enable JSX folding in web-mode

Question

I'm using web-mode to edit jsx files and I'm wondering what minor-mode can I use to add folding support. Is there anything out there that works?

Thanks

Answer 1

Although it's an old question, I'll share my setup for anyone still looking for ways to do this.

I use built-in hideshow package with additional configuration for handling HTML tags.

(use-package hideshow
  :diminish hs-minor-mode
  :config
  (add-to-list 'hs-special-modes-alist
               '(web-mode
                 "<!--\\|<[^/>]*[^/]>"
                 "-->\\|</[^/>]*[^/]>"
                 "<!--"
                 web-mode-forward-sexp
                 nil)))

Answer 2

It's not quite a full answer (unless you're O. K. with ditching web-mode which I would think is less than ideal) but Hideshow Minor Mode will, technically, get the job done for you.

If you enable it (with (hs-minor-mode t)), running the function hs-hide-block while the cursor is within a pair of curly braces will fold that block.

The one snag in all of this – from the perspective of web development in Emacs – is that Web Mode won't allow you to enable Hideshow Minor Mode while it (Web Mode) is in use. An ideal answer will allow find someway to enable the feature while keeping Web Mode present and fully functional.