iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
0
Software Development

Emacs 來寫程式系列 第 27

[Emacs-27] 用 Emacs 來寫 Vue.js 設定篇

Emacs 對於編輯 Vue.js 專案的支援

  • 程式補全:company-tide (javascript), company-web-html (html), company-css (css)
  • 語法檢查:flycheck + eslint (本地 eslint + plugin/vue-essential, eslint:recommended)
  • 支援 css 顏色顯示
  • 支援 emmet 快速輸入語法
  • 程式排版美化: 使用 prettier-js

安裝

  • 先前設定的 web-mode 是用來編輯 html 的主模式,事實上,html 也可能包含了 javascript 跟 css,因此這個模式本身已經考慮到當有 javascript 跟 css 時的顯示,但是畢竟在設定上可能有所不同,因此我們想藉由不同的檔案副檔名來界定
(use-package web-mode
  :ensure t
  :mode ("\\.html\\'" "\\.vue\\'")
  :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))
                                   ((member web-mode-content-type '("vue"))
                                    (my/web-vue-setup))
                                   )))
  )
  • 我們增加了對於 .vue 的支援,並且加入一個新的 web-mode-content-type "vue" 來區別是 html 或者是 vue 檔案,並分別為之做設定
(defun my/web-vue-setup()
  "Setup for js related."
  (message "web-mode use vue related setup")
  (setup-tide-mode)
  (prettier-js-mode)
  (flycheck-add-mode 'javascript-eslint 'web-mode)
  (flycheck-select-checker 'javascript-eslint)
  (my/use-eslint-from-node-modules)
  (add-to-list (make-local-variable 'company-backends)
               '(comany-tide company-web-html company-css company-files))
  )
  • 設定在這種檔案下,只使用 flycheck + javascript-eslint 來做語法檢查,並使用本地的 eslint 跟設定
  • 使用的程式補全為 company-tide, company-web-html 跟 company-css 並啟動 tide-mode 次模式
  • 使用 prettier-js 來做排版

借用 lunaryorn 在 https://emacs.stackexchange.com/questions/21205/flycheck-with-file-relative-eslint-executable 中的作法

(defun my/use-eslint-from-node-modules ()
  "Use local eslint from node_modules before global."
  (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))))

(add-hook 'flycheck-mode-hook #'my/use-eslint-from-node-modules)

原先在 Vue/cli 產生的 package.json已經定義跟安裝了 plugin:vue/essential

 "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

相關影片: Yes

相關簡報: 簡報

相關程式: Github 請下載到 ~/.emacs.d 下啟動 Emacs 就會自動設定安裝套件

相關資訊: 我的部落格


上一篇
[Emacs-26] 用 Emacs 來寫 C# 實戰篇
下一篇
[Emacs-28] 用 Emacs 來寫 Vue.js 實戰篇
系列文
Emacs 來寫程式30

尚未有邦友留言

立即登入留言