什么配置适合开发 Vue?

我试过 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 的朋友是怎么配置的?或者建议?

  • 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无效,答案大概在这里:https://stackoverflow.com/questions/21644876/imenu-does-not-work-for-python-mode-or-c-mode/21656063#21656063 我还没来得及看。
  • imenu没搞出来前,我现在是手动加mark然后跳来跳去的,比如evil的d标记到data的位置,ccreated,不过每个buffer都要手动标记,比较弱。

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

另外刚看到这篇文章,利用 lsp 实现 vue 的语义补全: https://medium.com/@aria_39488/improving-vue-mode-for-better-vue-js-editing-inside-of-spacemacs-4509f0577ea0

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

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

这个试过了吗?

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

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

~/.tern-config

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