Javascriptのコード補完エンジンTern.js

インストールの参考: LIG – Sublime Textにjavascriptの自動補完機能を付けようというお話。

Sublime Text版のパッケージの置きフォルダーは、macOSだと/Users/${USER}/Library/Application Support/Sublime Text 3/Packages/tern_for_sublime
になっている。
※/Users/${USER}/Library/Application Support/Sublime Text 3/Packages/User/tern_for_sublime
にはならない。

補完の定義ファイルは、
/Users/${USER}/Library/Application Support/Sublime Text 3/Packages/tern_for_sublime/node_modules/tern/defs
に置く。

ドキュメントにある補完の定義ファイルの例

{
  "!name": "mylibrary",
  "!define": {
    "point": {
      "x": "number",
      "y": "number"
    }
  },
  "MyConstructor": {
    "!type": "fn(arg: string)",
    "staticFunction": "fn() -> bool",
    "prototype": {
      "property": "[number]",
      "clone": "fn() -> +MyConstructor",
      "getPoint": "fn(i: number) -> point"
    }
  },
  "someOtherGlobal": "string"
}

ここでは置くファイルは、
/Users/${USER}/Library/Application Support/Sublime Text 3/Packages/tern_for_sublime/node_modules/tern/defs/example_def.json
にする。

次にtern.jsのサーバーがこの定義ファイルを読み込むよう、
/Users/${USER}/.tern-project
のlibsに定義ファイルのベース名を書く。

{
  "libs": [
      "browser",
      "jquery",
      "example_def",
      "underscore"
    ],
  "loadEagerly": [
    "importantfile.js"
  ],
  "plugins": {
    "node": {},
    "es_modules": {},
    "paths": {}
  }
}

これでsublime textを再起動してhtmlファイルか、jsファイルを開いて
var x = new MyConstructor();
x.g
までタイプしてCtrl+スペースを入力すると、example_def.jsonの定義にあるプロパティgetPointが補完候補にポップアップする。