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))))

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *