BLOG.tass.io

強力なJavaScriptエディタ支援'Tern'を Sublime Text 2で使う方法

2013-09-05

@kiwanamiさんオススメのJavaScript用エディタ支援ツール“Tern”を、Sublime Text 2で使うための手順です。TernをSublime Text 2から利用するためのプラグインtern_for_sublimeは、普通のプラグインと違って手動でnpm installが必要だったりするので一応、ドキュメント化してみました。

実際はREADMEをざっくり訳して少し章立てを変えた程度です(ノω・)テヘ


【事前準備】

  • nodenpmがインストールされていること
    まだの方はreplication先生のエントリがオススメです。

  • Sublime Text 2にPackage Controlがインストールされていること
    Sublime Text 2の使用者でPackage Controlを知らない人はいないと思いますが、初心者の方はこちらでの勉強がオススメです。わたしは日本語化はしませんけど…。


【インストール方法】

  1. Package Controlから “tern_for_sublime” を選択してプラグインをインストール
  2. (osxの場合) ターミナルでtern_for_sublimeのディレクトリ(※)へ移動
    /Users/{ユーザ名}/Library/Application Support/Sublime Text 2/Packages/tern_for_sublime
  3. ターミナルからnpm install を実行して、ternが動作するのに必要な外部ライブラリをインストール

【設定】

一般的なプラグインと異なり、tern_for_sublime専用の設定ファイルはありません
tern_for_sublimeの設定は、Sublime Text 2本体の設定ファイルPreference.sublime-settingsに入力することになります。
メニューバーの[Sublime Text 2]-[Preferences]-[Settings - User]から開いて編集してください。

(1) auto_complete_triggers / 補完表示の設定

これが強力!Preference.sublime-settingsのauto_complete_triggersに、{"selector": "source.js", "characters": "."}と追記することで、jsファイルの入力中にドット(.)を入れると自動的に補完候補が表示されるようになります。

上の画像の例だと、変数configに入っているインスタンスには

  • String型のメンバ host
  • Number型のメンバ port
  • (型が確定できないけど) pwd
  • (型が確定できないけど) user

というメンバーがいることを解析して候補に表示してくれています。

下記のように設定しておくと、HTMLタグ入力中は<シンボルでタグの候補が、JavaScriptのコーディング時にはドット(.)でコードの候補が表示されるようになります。

例:

なお、これらの補完表示はPreferenceのauto_completetrueに設定されている前提です。
(デフォルトではauto_completetrueになっている筈なのでたぶん大丈夫)

(2) tern_argument_hints / 引数ヒントの表示可否

引数のヒントを表示させるかの設定です。デフォルトはfalseですが、 これをtrueにすると関数内部にカーソルがある時にステータスバーに引数のリストが表示されます。

上の画像の例だと、関数makeKeyword()の引数paramにはnamevalueというメンバーがあって、関数の戻り値はString型の配列ということが分かります。

解析した結果の情報が表示されますので、「この関数の引数の型はなんだっけ?」「戻り値はどんな形で返すんだっけ?」がひと目で解ります。すごい!
ただし、低スペックのPCや巨大なプロジェクトでは、PCにかなりの負担がかかってしまいますのでご注意ください。

例:

(3) tern_command / Ternサーバの実行コマンド

スクリプト解析のためのTernサーバの実行コマンドを指定します。デフォルトは["node", "/path/to/Packages/tern_for_sublime/node_modules/tern/bin/tern"]です。Package Controlからインストールした場合は特に何も書かずに、この項目自体を無視していいかと思います。下手にさわんないほうが良さそう…。

(4) tern_arguments / Ternサーバの引数指定

前述のTernサーバに渡す引数を指定します。デフォルトは空っぽ[]かなたぶん。例えば['--no-port-file']と指定すると、.tern-portファイルの自動生成を抑止するみたいです。
上記と同じく、よくわからない人は何もしないほうが良さそう?。Ternの仕様について理解している人だけさわりましょう。

尚、.tern-projectファイルにTernサーバの設定を書いて配置しておけば、自動的に読み取って実行してくれるようです。Ternサーバについては、詳しくはTernのドキュメントを参照してください。


【その他の機能】

キーボードショートカットの便利機能

(※osxの場合)

  • option + .(ドット)
    • 関数や変数上にカーソルがある場合、定義元へジャンプ
  • option + ,(カンマ)
    • ジャンプから元のカーソル位置へ戻る
  • option + space
    • 変数上にカーソルがある場合、現在開いているファイル上の同変数を全て選択する

【類似プラグイン】

他にもSublime Ternというプラグインもあるみたいです。
tern_for_sublimeと異なる情報が表示されてたりしますが、それはTernサーバを実行するのにNode.jsを使うのかPyV8(V8 JavaScript EngineのPythonラッパー)を使っているのかの違いらしいです。ヘェーヘェー(;゚Д゚)


Michael Kuroneko

Written by Michael Kuroneko. Follow me on twitter, github.