Emacs の web-mode から my-web-vue-mode 見たいのを生やして Vue の場合は Flycheck に javascript-eslint を設定できるようにしてみるメモ

その1: とりあえず javascript-eslint 使えればいいパターン
その2：lsp-mode にvls の追加方法がよくわからないので eglot を利用してみるパターン（追記1）
その3: やっぱり lsp-mode （追記2）
感想
参考リンク

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