web-mode で html は html-tidy
でチェックして、vue javascript-eslint
でチェックしたいけど、html と vue のファイルを交互に編集するとなんかおかしくなるからゴニョゴニョしてみた。
その1: とりあえず javascript-eslint 使えればいいパターン
(progn
(define-derived-mode my-web-vue-mode web-mode "wVue"
"A major mode derived from web-mode, for editing .vue files.")
(add-to-list 'auto-mode-alist '("\\.vue\\'" . my-web-vue-mode))
(add-hook 'my-web-vue-mode-hook
(lambda ()
(flycheck-add-mode 'javascript-eslint 'my-web-vue-mode)
))
)
その2:lsp-mode にvls の追加方法がよくわからないので eglot を利用してみるパターン(追記1)
M-x package-list-packages
で eglot
をインストール
npm install -g vls
- flymakeが起動するものの正常動作してないようなのので設定でオフる
(progn
(define-derived-mode my-web-vue-mode web-mode "wVue"
"A major mode derived from web-mode, for editing .vue files.")
(add-to-list 'auto-mode-alist '("\\.vue\\'" . my-web-vue-mode))
(add-hook 'my-web-vue-mode-hook
(lambda ()
(flycheck-add-mode 'javascript-eslint 'my-web-vue-mode)
))
(require 'eglot)
(add-hook 'my-web-vue-mode-hook #'eglot-ensure)
(add-to-list 'eglot-server-programs '(my-web-vue-mode "vls"))
)
(defun sanityinc/eglot-prefer-flycheck ()
(when eglot--managed-mode
(flymake-mode -1)
))
(add-hook 'eglot--managed-mode-hook 'sanityinc/eglot-prefer-flycheck)
その3: やっぱり lsp-mode (追記2)
- melpa の lsp-mode の今月初旬版がおかしかったようで 20210521.446 版にアプデしたら動いた。
npm install -g vls
(progn
(define-derived-mode my-web-vue-mode web-mode "wVue"
"A major mode derived from web-mode, for editing .vue files.")
(add-to-list 'auto-mode-alist '("\\.vue\\'" . my-web-vue-mode))
(add-hook 'my-web-vue-mode-hook
(lambda ()
(flycheck-add-mode 'javascript-eslint 'my-web-vue-mode)
))
(add-hook 'my-web-vue-mode-hook #'lsp-deferred)
)
感想
Emacs で vue (javascript/typescript) 書くとき mode の設定ややこしい&めんどう。
参考リンク