Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

概要

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

test.gif

インストール

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-markercompany-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-transformerscompany-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-docstern-find-definitionがうまく動かない.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした