牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

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

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-packageseglot をインストール
  • 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 の設定ややこしい&めんどう。

参考リンク