web-mode 怎么才能有效地提示 js，如何配置 web-mode 下的 tern

Spacemacs
1

最近一直在用web-mode 有两个比较明显的问题.第一个是company的js提示没有,希望能和在js2-mode里一样,可以有company-tern的提示功能,其次就是括号补全各种加不进去…现在只能手动打开,有高手能简单知道一下么,我也试了很久,没有成效,不想再耽误时间,谢谢啦!ps:我用的是spacemacs

2

括号补全 是什么？

3

web-mode 其实相对于atom来说也是不好使…

用 atom 输入 div 回车, 标签就完成了, web-mode 还要自己手敲括号, 不知道emacs有没有这种插件

4

从来都没想过要在 web-mode 里用 tern 补全 js，web-mode 主要解决的是各种混合代码的排版。把这些大杂烩交给 tern 它能消化么。除非像 org-mode 一样，C-c ’ 进入一个子窗口，加载各自语言对应的配置。

至于 html 补全：

  • snippet: 输入 div 按 TAB 补全，简单，必须事先定义好模版。

  • emmet: 输入 div.list>ul>li*3 扩展为：

    <div class="list">
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

    还有各种酷炫的玩法。

  • web-mode 本身也有很多实用功能：

    • web-mode-element-vanish
    • web-mode-element-rename
    • web-mode-element-kill
    • web-mode-attribute-kill
    • web-mode-forward-sexp
    • web-mode-backward-sexp
    • …
1 个赞
5

就是smartparens-mode ,不能自动加载进去…

6

我也不会让tern做太多事情,因为没有js补全,确实会打代码有点累啊…因为都是些小demo,没必要份文件啊,如果硬要加进去,有什么办法么??

7

没试过，我估计 tern 会报错吧。或许可以在 tern 之前先把 html 标签滤掉，这要自己去实现了。

如果只是小 demo，代码不多都在一个文件里，hippie-expand/dabbrev-expand 聊胜于无。比如你有：

var foobar;
var obj = {
    fooBar: function() {
    }
}

输入 foo 可以补全：

foobar
fooBar

但是不能输入 obj. 补全 obj.fooBar。

8

好的,谢谢啦~看来只能暂时放弃加入tern了~~~

9

补充一个：

如果你是 react 项目，可以启用 js2-jsx 模式，支持 jsx 语法且具备 tern 补全。但是它的 jsx 缩进不完善，所以对于以模版代码为主的文件，也不太适合。

10

为什么都没有给出答案呢？最近也遇到 web-mode 不能加入 company-tern 导致不能补全的问题？试了 N 多次了

11

可以试试陈斌的webmode的补全模板

12

emmet-mode

13

放弃吧~ company-tern折腾好了也是卡的要死，话说company-backends感觉没一个靠谱的

14

不是不给出答案，是因为没有答案。

tern(js) 只是一个 javascript 补全后端，web-mode 面对的是一个模版文件，里边可不仅仅是 javascript 代码，目前的 tern 还没办法解析。

退一步，像 org-mode/markdown 一样，打开一个新窗口，进入特定的语言模式：

+----------------------+----------------------+
|                      |                      |
| #+BEGIN_SRC python   |                      |
|                     --> print('foo')        |
| #+END_SRC            |                      |
|                      |                      |
|~~~~~~~~~~~~~~~~~~~~~~|~~~~~~~~~~~~~~~~~~~~~~|
| org-mode             | python-mode          |
+----------------------+----------------------+

也只能应对这种情况，一段连续的代码：

<javascript>
  function hello(name) {
    alert('hello ' + name);
  }
  hello('foo')
</javascript>

面对更加破碎、交错的代码就无能为力了：

<ul>
 <?php foreach ($datas as $key => $value): ?>
   <li><?=Helper::format($value)?></li>
 <?php endforeach; ?>
</ul>

到底要进入哪一种模式？

15

搭配web-mode、js2-mode、tide、company-web、ac-html-csswatcher、ac-html-bootstrap以及multi-web-mode解决html中编辑js的问题，同时，建议使用smartparens替代autopair，具体的配置可以参考我的设置： https://github.com/ycz0926/.emacs.d/blob/master/lisp/init-js.el