company-ternを使ってemacsでjavascriptの補完

company-modeの紹介記事はこちら

概要

ternは，javascriptのコード解析エンジン．
company-ternは，company-modeでternの補完を使うためのbackend．

インストール

ternサーバ

npmを使う

$ npm i -g tern

company-tern

MELPAからインストール可能．

M-x package-install RET company-tern RET

これでtern-modeも一緒にインストールされるはず．

設定

サーバ側

ternサーバの設定は~/.tern-configに書く．.tern-configは以下のような形式である．

{
  "libs": [
    "browser",
    "jquery"
  ],
  "loadEagerly": [
    "importantfile.js"
  ],
  "plugins": {
    "requirejs": {
      "baseURL": "./",
      "paths": {}
    }
  }
}

詳しくは公式ページ参照．
プロジェクト単位で設定したい場合は.tern-projectに設定を書く．

emacs側

(setq company-tern-property-marker "")
(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)))
(add-hook 'js2-mode-hook 'tern-mode) ; 自分が使っているjs用メジャーモードに変える
(add-to-list 'company-backends 'company-tern) ; backendに追加

company-tern-property-markerはcompany-ternのREADMEにある通り，そのオブジェクト自身のプロパティであるときのマーカだが，とりあえず表示しないようにした．
また，issueにあるような現象が自分も発生したのでcompany-tern-depthを再定義してる．
今後のアップデートで必要なくなると思う．

company-dabbrev-codeと併用

javascriptは言語の性質上，どうしても意図した補完候補が用意されないことがある．
そこで，現在開いているバッファからキーワードを拾ってくるcompany-dabbrev-codeを併用すると良い．
この場合，backendの設定は，

(add-to-list 'company-backends '(company-tern :with company-dabbrev-code))

となる．
このとき補完候補はcompany-tern由来のものが上に表示されてほしいので，
company-transformersにcompany-sort-by-backend-importanceを設定すると良い．
詳しくはこちら．

tern-modeのショートカットキー

• M-. 定義ジャンプ
• M-, 定義ジャンプから戻る
• C-c C-r 変数名のリネーム
• C-c C-c 型の取得
• C-c C-d docsの表示

日本語（マルチバイト）対応

どうも，ファイルに日本語(マルチバイト文字)が含まれると正常に動作しないらしい．
これはemacs側の問題でなく，ternサーバ側の問題のよう．
一応，大体うまく動くようだが，docsに日本語が含まれるとtern-get-docsやtern-find-definitionがうまく動かない．

補完すらうまく動かない場合は，buffer-string内のマルチバイト文字を適当な半角文字に変換する関数を定義して，tern.elの中のbuffer-stringをその関数に置換すれば補完は動くはず．