web-mode自定义fold函数以适应indent-region


web-mode有一个内置的web-mode-fold-or-unfold函数,但这个函数有一个问题,当存在fold时,使用indent-region会得到错误的缩进,想要得到正确的缩进,必须先 unfold, 比如

 1<div>
 2  <div class="col-xs-3 col-sm-3" id="sidebar" role="navigation">
 3    <button class="btn btn-primary">Submit</button> <br />
 4    <span>
 5        <button class="btn btn-primary">Submit</button> <br />
 6    </span>
 7    <span>
 8        <button class="btn btn-primary">Submit</button> <br />
 9    </span>
10  </div>
11</div>
12<button class="btn btn-primary">Submit</button>
13<br />
14<a href="">as</a>

当把div#sidebar使用web-mode-fold-or-unfold折叠起来, 然后使用

1(defun maple/indent-buffer ()
2  "Format buffer with `indent-region`."
3  (interactive)
4  (save-excursion
5    (indent-region (point-min) (point-max) nil)))

展开后就会变成

 1<!-- sidebar -->
 2<div>
 3  <div class="col-xs-3 col-sm-3" id="sidebar" role="navigation">
 4    <button class="btn btn-primary">Submit</button> <br />
 5    <span>
 6    <button class="btn btn-primary">Submit</button> <br />
 7    </span>
 8    <span>
 9    <button class="btn btn-primary">Submit</button> <br />
10    </span>
11    </div>
12</div>
13<button class="btn btn-primary">Submit</button>
14<br />
15<a href="">as</a>

这与期望的效果不符(不知道是不是只有我碰到,还是这可能是一个bug), 我去看了一下web-mode-fold-or-unfold的实现, 它使用的是

1(put-text-property beg-inside end-inside 'invisible t)

来隐藏折叠部分, 我不太清楚为什么使用put-text-property会使indent-region缩进有问题,有知道的可以告知一下,但我平时在其他项目中都是使用 hs-toggle-hiding 来折叠代码, hs-toggle-hiding能很好的与indent-region配合

由于web-mode-fold-or-unfold这个函数太长,不想占用我自己的配置, 所以魔改了一下

1(fset 'maple/put-text-property (symbol-function 'put-text-property))
2(defun maple/web-mode-put-text(p q prop value)
3  (if (and (eq prop 'invisible) value) (hs-make-overlay p q 'code)
4    (maple/put-text-property p q prop value)))
5(defun maple/web-mode-fold-or-unfold()
6  (interactive)
7  (cl-letf (((symbol-function 'put-text-property) 'maple/web-mode-put-text))
8    (web-mode-fold-or-unfold)))

put-text-property临时修改成hs-make-overlay,这样web-mode折叠后就能正确地使用maple/indent-buffer

来源:honmaple's init-web.el

作者: honmaple
链接: https://honmaple.me/articles/2018/11/web-mode自定义fold函数以适应indent-region.html
版权: CC BY-NC-SA 4.0 知识共享署名-非商业性使用-相同方式共享4.0国际许可协议
wechat
alipay

加载评论