什么配置适合开发 Vue?

Spacemacs
1

我试过 3 个配置加 1 个 mode，都不是特别好用：

  1. purcell 的配置：无法识别 .vue 文件，手动指定 nxml-web-mode，但是 <script> 和 <style> 标签没有高亮，也无法自动对齐，补全也不完整，指定 <style lang="scss"> 之后，css 完全没法补全了。
  2. 用了这位小哥的配置，手动指定为 web-mode， <script> 和 <style lang="scss"> 可以高亮，但是无法补全 scss，js 补全也不完整

  1. spacemacs 开启了 html, JavaScript 两个 layer，手动在 html layer 的 package.el 增加对 .vue 的识别，打开自动识别为 web-mode，都正常高亮， <script> 无法补全（连 {} 都没有办法成对出现），<style lang="scss"> 可以高亮也能补全 css，但是无法高亮跟补全 scss。

  2. spacemacs + vue-mode: <script> 中高亮颜色奇怪，无法补全（连 {} 都没有办法成对出现），<style lang="scss"> 没法高亮，没法补全（应该是没识别）

我这四种用的都是他们原生的配置，没有加其他的。

我发现主要问题是无法识别很好的识别 <script> <script> 标签，有没有办法可以在这两个标签中写代码像在 .js 跟 .scss 中一样顺畅？如果有 vue 的语义补全（mounted, router, components）之类就更好了。

请问各位用 Emacs 写 vue 的朋友是怎么配置的？或者建议？

2
  • js: 跟js2-mode没法比，但是也就不能用js2-refactor吧，补全主要是company-dabbrev所以感觉差距不大，倒是web-mode的缩进和高亮经常丢失，比如粘贴过来一大段它就不认，没高亮、格式也不对，要手动删除-撤销这样才能好。
  • 括号没有自动配对检查一下smart-parens或者electric-pair-mode之类有没有打开。
  • scss web-mode没支持吧，能当作css正确缩进我已经很满足了。不过company-css还是有的。虽然company-css在mac上秘制卡顿我把它关掉了。我看过web-mode关于支持pug的issue，作者说web-mode是面向html文件以及衍生的php/jsp等模版的，所以不会支持pug。scss不清楚。
  • vue specific的语义啥的，我前两天刚想搞一下imenu，把data created mounted这些放进imenu。不过web-mode做过一些手脚，导致只设定imenu-generic-expression无效，答案大概在这里:emacs - imenu does not work for python mode or c++ mode - Stack Overflow 我还没来得及看。
  • imenu没搞出来前，我现在是手动加mark然后跳来跳去的，比如evil的d标记到data的位置，c是created，不过每个buffer都要手动标记，比较弱。
3

多谢，我先试一下你提到的那些。

另外刚看到这篇文章，利用 lsp 实现 vue 的语义补全：

我刚试过，实现了输入 scaffold 自动生成 vue template，不过没法补全其他（类似 router, created 等），还在折腾中。你有空也可以试下。

另外找到一个类似 mmm-mode 的 package，叫做 polymode，作用也是在一个 buffer 下面实现多个 major mode。我也准备研究一下。

4

这个试过了吗？

补全，就用用代码片段。类似下面这种。。感觉挺好的。

5

我刚加上了tern补全,只要安装了tern和设置了 .tern-config就可以正确补全，速度也还不错，js可以正常补全。css部分因为vue是单文件不太好做。

IMG20171219_194045
IMG20171219_1940451004×710 52.7 KB
IMG20171219_194110
IMG20171219_1941101015×724 69.4 KB
IMG20171219_194131
IMG20171219_194131976×728 67.6 KB

6

~/.tern-config

    {
        "libs": [
            "browser",
            "ecmascript"
        ],
        "plugins": {
            "doc_comment": null,
            "es_modules": {},
            "webpack": {}
        }
    }