Emacs 寫 Vue.js

洋蔥工作室

Emacs for Vue.js

  • 主要使用 web-mode
  • 程式補全:主要用 company-tide 加上 company-web-html, company-css
  • 語法檢查:使用專案本身的 eslint, 加上 vue/essential plugin
  • 支援 css 顏色顯示
  • 支援使用 emmet

Youtube 影片

修改之前的 web-mode 設定

(use-package web-mode
:ensure t
:mode (("\\.html\\'" . web-mode)
       ("\\.erb\\'" . web-mode)
       ("\\.vue\\'" . web-mode))
:config
(setq web-mode-markup-indent-offset 2)
(setq web-mode-css-indent-offset 2)
(setq web-mode-code-indent-offset 2)
(setq web-mode-enable-current-element-highlight t)
(setq web-mode-enable-css-colorization t)
(set-face-attribute 'web-mode-html-tag-face nil :foreground "royalblue")
(set-face-attribute 'web-mode-html-attr-name-face nil :foreground "powderblue")
(set-face-attribute 'web-mode-doctype-face nil :foreground "lightskyblue")
(setq web-mode-content-types-alist
      '(("vue" . "\\.vue\\'")))
(use-package company-web
  :ensure t)
(add-hook 'web-mode-hook (lambda()
                           (cond ((equal web-mode-content-type "html")
                                  (my/web-html-setup)))
                           (cond ((equal web-mode-content-type "vue")
                                  (my/web-vue-setup)))
                           ))

)

建立 my/web-vue-setup

  • 當 web-mode-content-type 為 "vue" 時,啟動這個函式來做設定
(defun my/web-vue-setup ()
"Setup for web-mode vue files."
(message "web-mode for vue setup")
(flycheck-add-mode 'javascript-eslint 'web-mode)
(my/use-eslint-from-node-modules)
(flycheck-select-checker 'javascript-eslint)
(flycheck-mode)
(add-hook 'web-mode-hook #'setup-tide-mode)
(add-hook 'web-mode-hook #'prettier-js-mode)
(add-to-list (make-local-variable 'company-backends)
             '(company-tide company-web-html company-files company-css))
)

eslint 使用專案本身設定

(defun my/use-eslint-from-node-modules ()
;; use local eslint from node_modules before global
;; http://emacs.stackexchange.com/questions/21205/flycheck-with-file-relative-eslint-executable
(let* ((root (locate-dominating-file
              (or (buffer-file-name) default-directory)
              "node_modules"))
       (eslint (and root
                    (expand-file-name "node_modules/eslint/bin/eslint.js"
                                      root))))
  (when (and eslint (file-executable-p eslint))
    (setq-local flycheck-javascript-eslint-executable eslint))))