Sublime Textにjavascriptの自動補完機能を付けようというお話。

こんにちは。フロントエンドエンジニアのじぇしーです。

前回は、BracketsでJavaScript（以下、js）の自動補完機能（オートコンプリート）を使用してみました↓が、

Bracketsにいつの間にかJavaScriptの自動補完機能が付いていたというお話。

じぇしー

2016.09.29

今回の記事では、Sublime Textでjsを自動補完できるようにしたいと思います。
というのも、document.querySelectorAll(); といちいち書くのは面倒臭いから。Web制作に関わる皆さんの健康（=腱鞘炎予防）のためです。

ちなみに、Sublime Textは一時開発が停滞していましたが、今年に入って開発再開していますから、皆さん安心して課金していきましょう。

動作イメージ

設定をする前に、設定完了後の動作イメージを見てみましょう。
……といっても、内部ではBracketsと同じツール(Tern.js)が動いているので、動作イメージは前回の記事を参考にしていただければと思います。

Brackets同様、きっちりと docum と打たずに dcmnt と間の文字を抜いて打った場合でも補完機能が働いてくれます。

ちなみに、今回の記事では、Sublime TextはもちろんGit、Node.jsをガンガン利用していくので、前回の記事に比べて圧倒的に導入難易度が高くなっています。
まだそれぞれの使い方がわからない方は、以下の記事も参考にしてみてください。

“恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！

王

2012.10.29

Node.js完全初心者向けチュートリアル用モジュール「learnyounode」を使ってみよう

エリカ

2014.10.06

本当の初心者向け！Git入門のための概念から基本用語まで

ほりでー

2016.03.01

それでは早速設定をしていきましょう！ （Macで設定・動作確認しています）

1. Tern for Sublime Textをインストールする

Sublime Textに自動補完機能を提供してくれるのは、Tern for Sublime Textです。
Tern for Sublime Textは、内部でTern.js※を呼び出し、JavaScriptを解析して自動補完をはじめとした機能を提供します。

これを公式のReadmeに従ってインストールしていきます。このプラグインは、 Package controlでは配布されていません。 そのため、直接GitHubからSublime Textのプラグインディレクトリに git clone して設置します。

ターミナルから以下のコマンドを実行し、Sublime TextのプラグインディレクトリにTern for Sublime Textを直接配置します。プラグインディレクトリは Preferences -> Browse Packages… から場所を確認できます。

# 例: cd /Users/myname/Library/Application\ Support/Sublime\ Text 3/
$ cd <プラグインディレクトリ>
$ git clone git@github.com:ternjs/tern_for_sublime.git
 
プラグインを配置できたら、プラグインのディレクトリ内に移動して、Tern.jsをはじめとしたNodeモジュールをインストールします。
$cd tern_for_sublime
$ node install
 
これでプラグインのインストールは完了です。次はTern.js自体の設定をします。

Tern for Sublime Textは、あくまでTern.jsとSublime Textの橋渡し役でしかないので、Tern.jsの設定が別途必要です。

2. Fix Mac Pathをインストールする（Macのみ）
Tern.jsはNode.js上で動くモジュールですが、Macの場合Sublime TextがNode.jsを探し出せるようにするために、Fix Mac Pathをインストールする必要があります。
こちらはPackege Controlから「 Fix Mac Path 」と検索して、普通にインストールすれば大丈夫です。
3. Tern for Sublime Textの設定をする
ここまでの作業でプラグインのインストールは終了しました。次は自分好みにプラグインを設定していきます。
Preferences > Package Settings > Tern > Settings - User

を選択してプラグインの設定ファイルを開きます。プラグイン自体の設定はここで行っていきます。ちなみに参考までに、私の設定は以下のようになっています。
{
    "tern_argument_hints": true,
    "tern_output_style": "status",
    "tern_argument_completion": true,
    "auto_complete": true,
    "auto_complete_triggers": [
        {"selector": "text.html", "characters": "<"},
        {"selector": "source.js", "characters": "."}
    ]
}
3-1. 自動的に補完候補を表示する（必須）
auto_complete_triggers
初期値: [ {"selector": "text.html", "characters": "<"}, {"selector": "source.js", "characters": "."} ]
インストールされた段階で自動的に設定されているはずですが、もしも設定されていないようなら設定しておきます。

これをしないと自動補完を実現できませんので、必ず設定しましょう。
3-2. 引数のヒントを出す
tern_argument_hints
初期値: false
大きなプロジェクトになるとSublime Textが重くなることがあります。
3-3. 関数の説明などを表示する場所を設定する
tern_output_style
初期値: tooltip
tooltip, status, panel があります。私の設定している status は説明が全部表示されないからおすすめではないらしいです…
3-4. 引数まで自動補完する
tern_argument_completion
初期値: false
document.addEventListener(type, listener) のように、メソッド名(関数名)だけでなく引数まで補完してくれます。
（上級者向け）実行するTern.jsを変更する
tern_command
初期値: ["node", "<プラグインディレクトリ内>/node_modules/tern/bin/tern"]
これを変更すれば、グローバルにインストールしたTern.jsを使用するということも可能です。Tern.jsはSublime Textだけでなく、Vimなどの他のエディタでもプラグインが提供されているので、各エディタでTern.jsの設定を共有したいときなどに便利です。

後述しますが、プラグインの設定とは別に、Tern.jsにも別に設定が設けられています。表示の方法や補完のタイミングはプラグインの方で、それ以外はTern.js本体の設定で行うと思っておけば良いかと思います。

（上級者向け）Tern.js実行時につける引数を設定する
tern_arguments
Tern for Sublime Textは内部でNode.js経由でTern.jsモジュールを呼び出すことでコード補完を実現していますが、Tern.jsを呼び出す際につける引数を指定できます。

つけることができる引数は Tern公式ドキュメント（英語）を参照してください。
実際に使ってみる
以上で使う準備が整いましたので、実際に使ってみましょう。

既存のjsファイルを開いて dcmt.addEvtLisr のようにタイプすると、自動的に補完候補が表示されるはずです。デフォルトでjQueryも補完されます。

一度保存してからでないと自動補完は機能しないのでご注意ください。

（上級者向け）JQuery以外のライブラリも自動補完させる
Tern.jsが補完してくれるのは、デフォルトではJQueryとブラウザに用意されているオブジェクトです。

Tern.jsはjson形式の型定義ファイルを参照して補完候補を提供しています。Ternの開発者の方がデフォルトでメンテナンスしている型定義ファイルは、GitHubのソースから確認できます。
記述時点で、mapやfilterのような便利な関数を提供してくれる Underscrore.js が含まれているので、今回はUnderscore.jsの自動補完を有効化してみましょう。

その他の型定義ファイルは、GitHub上で tern と検索するといくつか見つけることができます。

 
Tern.jsは、Tern for Sublime Textのデフォルトでは、Macの場合 /Users/<ユーザー名>/.tern-project を参照しています（Ternの設定ファイルの読み込み順などは公式ドキュメントを参照してください）。

この設定ファイルに以下のように "underscrore" を追記します。
{
  "libs": [
      "browser",
      "jquery",    <- 行末にカンマを忘れずに追加してください
      "underscore"
    ],
  "loadEagerly": [
    "importantfile.js"
  ],
  "plugins": {
    "node": {},
    "es_modules": {},
    "paths": {}
  }
}
 
編集して保存したら、Sublime Textを再起動します（Macの場合はウィンドウを閉じるだけではなく、 Command + q で完全に終了してから再度開いてください）。

再起動するとUnderscore.jsが自動補完できるようになっているはずです。
その他のJavaScript自動補完プラグイン
Tern.jsは自分自身で型定義を追加できたり、エディタ以外でも利用できたりと利用範囲が広いことが利点ですが、一方で設定がコマンドラインに親しみのない方にとっては煩雑であることが欠点です。
もしSublime Textで簡単に自動補完を実現したい場合は、以下のプラグインも検討してみるといいかもしれません。JQueryの自動補完にも対応しています。

Java​Script Completions
これからもSublime Textを使い倒して、楽しいフロントエンジニアライフを送りましょう！
         
                         
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る