D.Horiyama's output

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

EmacsJavaScript開発環境

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

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