spacemacs使用web-mode编辑vue的一个小问题

在使用web-mode编辑vue文件自动格式化总是把标签内的内容与这个标签缩进4个空格以至于被eslint报告缩进错误。 求助怎么配置vue的这部分js内容与标签无缩进。

我之前也碰到这个问题,这是我的配置,你可以试下

(setq web-mode-content-types-alist
      '(("vue" . "\\.vue\\'")))

(defun my/web-vue-setup()
  (setq web-mode-style-padding 0
        web-mode-script-padding 0))

(add-hook 'web-mode-hook
          (lambda ()
            (cond ((equal web-mode-content-type "vue")
                   (my/web-vue-setup)))))
1 个赞

确实可以了 非常感谢

web-mode里indent相关的一些变量我当初也找了好久,这里补充一些:

  (setq
   web-mode-style-padding 0
   web-mode-script-padding 0
   web-mode-block-padding 0
   web-mode-enable-current-element-highlight t
   web-mode-enable-auto-indentation nil
   web-mode-comment-formats '(("java" . "//") ("javascript" . "//") ("php" . "//")))
  (setq-default
   web-mode-markup-indent-offset 2
   web-mode-code-indent-offset 2
   web-mode-css-indent-offset 2)

  (modify-syntax-entry ?' "\"" web-mode-syntax-table)
  (modify-syntax-entry ?` "\"" web-mode-syntax-table)
  ;; "-" as word so company completes kabeb-case
  (modify-syntax-entry ?_ "w" web-mode-syntax-table)
  (modify-syntax-entry ?- "w" web-mode-syntax-table)
  (modify-syntax-entry ?# "_" web-mode-syntax-table)

另外上面把.vue加到web-mode-content-types-alist应该是不需要的,这个是web-mode对文件作特殊的理解用的,比如jsx,而.vue反正只要当html就可以了。这里大概是用它实现了auto-mode,那换成在auto-mode-alist里加上'("\\.vue\\'" . web-mode)会更符合通常的做法。

1 个赞

我稍后试下 感谢分享