【Emacs】JSの補完を入れた話

JSの補完を入れた話

company-mode + tern

---

環境

• Win10
• GNUEmacs 25.2

導入

company

自動補完のドライバ

1. M-x package-install RET companyをインストール
2. Emacs実践入門 などを参考に、良しなに設定する
   • 筆者は改定前の赤い本を使用した

tern

自動補完のバックエンド

1. Node.jsが入っていなければインストールする
2. $ npm install -g tern

.tern-project

• ternの設定ファイル。下記のような内容を設定する
  • 補完対象のファイル
  • 使用するライブラリ
    • 例えば、windowオブジェクトはECMAScriptにはないので
      "browser"を指定する必要がある
    • 他にも、jqueryとか指定可能
• 開発対象プロジェクトのルートに設置する
• 設定例。import/export等不使用の原始的な分割ソースコードでもこれでいける

{
    "libs": [
        "browser",
        "ecmascript"
    ],
    "loadEagerly": [
        "./src/*.js"
    ],
    "plugins": {
        "requirejs": {
            "baseURL": "./",
            "paths": {}
        }
    }
}

• 読みたくないファイルはdontLoadで指定するらしい
  • ビルド済コードとか

{
    "dontLoad": []
}

companyのバックエンドに登録

1. M-x package-install RET company-ternをインストール
2. 筆者の設定項目

init.el

;; depth絡みの不具合への対策
;; override
(defun company-tern-depth (candidate)
  "Return depth attribute for CANDIDATE. 'nil' entries are treated as 0."
  (let ((depth (get-text-property 0 'depth candidate)))
    (if (eq depth nil) 0 depth)))

(defun js2-company-tern-hook ()
  (when (locate-library "tern")
    ;; .tern-port を作らない
    (setq tern-command '("tern" "--no-port-file"))
    (tern-mode t)))

(add-hook 'js2-mode-hook 'js2-company-tern-hook)

;; backend追加
(add-to-list 'company-backends 'company-tern)
;; company-dabbrev-codeは現在開いているバッファからワードを拾ってくる
;; IdとIDとかの表記ゆれにやられるのであえて切っている
;; (add-to-list 'company-backends '(company-tern :with company-dabbrev-code))

--no-port-fileオプションを設定しないと、.tern-portがポコポコ生成されて鬱陶しい

所感

• 関数の仮引数なども型推論してくれる。すごい
  • 呼び出し側コードから推論している？
• M-. で定義にジャンプできる。tagsとか要らなかったんや
  • .tern-projectを適切に設定すれば、ファイルをまたいで飛んでくれる

TODO

参考にした資料の出典のせる