Sublime Text 3 で TypeScript の開発環境を整える

Sublime Text 3 で TypeScript の開発環境を整理したときのメモです。

「Sublime Text TypeScript」でググると T3S というプラグインを入れる記事がヒットしますが、このプラグインはもう何年もメンテンナスされていません。 README にも以下のように書かれています。

STATUS : Not maintained

Due to a lack of time, the lack of will to continue working on it and the fact that i’ve changed my code editor, this plugin will no longer be maintained. I’ve created this plugin mainly so i could code with typescript on sublime text, it served me well and i hope it helped others too, luckily there’s other options right now for people using sublimetext :

. ArcticTypescript a fork of TS3 with lots of change and work to tackle performance issues : https://github.com/Phaiax/ArcticTypescript

. And microsoft official sublimetext typescript plugin : https://github.com/Microsoft/TypeScript-Sublime-Plugin

Thx to all the people who contributed to this plugin

See you space cowboys

上記の文にもあるように、このプラグインの代わりに Microsoft/TypeScript-Sublime-Plugin を使うことにします。

前提

• node がインストールされていること

プラグインのインストール

Sublime Text の Package Manager からではなく、Github からリポジトリを clone する方法でインストールします。

Sublime Text の Package ディレクトリに移動

Sublime Text の Package ディレクトリは、Mac だと /Users/hogehoge/Library/Application Support/Sublime Text 3/Packages のようにな場所にあります。 わからない場合は、Sublime Text を起動して Preferences > Browse Packages ... を選択すると Package ディレクトリの場所がわかります。

$ cd /Users/hogehoge/Library/Application\ Support/Sublime\ Text\ 3/Packages

Microsoft/TypeScript-Sublime-Plugin を clone

README にある通り、clone コマンドを叩きます。

$ git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript

node の PATH 設定 (※環境によっては不要)

このプラグインを使うためには node がインストールされている必要がありますが、インストール方法によっては作業が必要になります。 まずは node のパスを確認します。

$ which node
/Users/hogehoge/.nodebrew/current/bin/node

ここで、 /usr/local/bin だった場合は 作業不要 です。

nodebrew を使って node をインストールしていると、上のようなパスになっているので、追加で作業が必要になります。 というのも、プラグインは /usr/local/bin を見に行くようになっているからです。

node の PATH 設定は、 Preferences > Setting (⌘ + , でも可) で Preferences.sublime-setting - User を開きます。 設定は json 形式で記述するようになっているので、以下の設定を追記します。

{
    "node_path": "/Users/hogehoge/.nodebrew/current/bin/node"
}

Tips and Known Issues ? Microsoft/TypeScript-Sublime-Plugin Wiki ? GitHub の 7 を参照

Sublime Text を再起動

あとは Sublime Text を再起動すれば完了です。 Syntax Highlight や 補完、エラー表示、ビルドなどが行えるようになります。