emacsでFirefoxの拡張を開発する際にコード補完を設定する方法

• 概要
• 環境
• tern のインストール
• .tern.conf の作成
• tern-mode のインストール
• emacs の設定
• 最後に

概要

前回 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 以外の環境でも使えると思います