概要
前回 emacs で Firefox 拡張を開発する環境を構築し lint やインデントの設定などを行いました
今回はコード補完を行う方法を紹介します
環境
- macOS 11.7.6
- emacs 28.2
- nodejs 19.7.0
- tern
tern のインストール
-
npm install -g tern
.tern.conf の作成
-
vim ~/.tern-config
{
"libs": [
"browser",
"jquery",
"ecma5",
"underscore"
],
"plugins": {
"angular": {},
"commonjs":{},
"node":{},
"requirejs":{},
"node_resolve":{}
}
}
tern-mode のインストール
- M-x package-list-packages
tern-mode と tern-auto-complete をインストール
emacs の設定
前回の設定 (mode の起動や lint の設定) も記載しています
tern はどうやら company には対応しなくなったようで auto-complete 用の拡張があるのでそれを使うように変更しています
; for firefox extension (via js2-mode)
(require 'tern)
(require 'js2-mode)
(require 'flycheck)
# .js ファイルで js2-mode 起動
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
# js2-mode 起動時に auto-complete-mode 起動
(add-hook 'js2-mode-hook 'auto-complete-mode)
# インデントはスペース2つにする
(add-hook 'js2-mode-hook
(lambda ()
(setq my-js-mode-indent-num 2)
(setq js2-basic-offset my-js-mode-indent-num)
(setq js-switch-indent-offset my-js-mode-indent-num)
))
# js2-mode のデフォルトの linter は無効にする
(setq js2-mode-show-strict-warnings nil)
# js2-mode 起動時に flycheck-mode 起動
(add-hook 'js2-mode-hook #'flycheck-mode)
# flycheck の linter は eslint にする
(setq flycheck-javascript-eslint-executable "eslint")
(with-eval-after-load 'flycheck
(flycheck-add-mode 'javascript-eslint 'js2-mode))
# js2-mode 起動時に tern-mode 起動
(add-hook 'js2-mode-hook
(lambda ()
(tern-mode t)))
# tern-auto-complete を使って連携
(eval-after-load 'tern
'(progn
(require 'tern-auto-complete)
(tern-ac-setup)))
# 補完用のキーバインドを設定
(define-key tern-mode-keymap (kbd "M-.") 'tern-find-definition)
(define-key tern-mode-keymap (kbd "M-,") 'tern-pop-find-definition)
最後に
js2-mode + flycheck (eslint) + tern-mode はおそらく JavaScript 単体の開発であれば Firefox 以外の環境でも使えると思います
