, , 2014年4月28日

TypeScriptはMicrosoftが開発しただけあって、VisualStudioとの親和性が素晴らしいです。しかし「何とかMacでも同等の環境は得られないか?」ということで、今回はMac+SublimeTextを使って開発環境を整える方法をご紹介します。

具体的には、以下の事ができるようになります。

  • シンタックスハイライト
  • シンタックスエラーの表示
  • 保存時自動ビルド

用意するもの

以下の記事を参考にさせて頂きました。

TypeScriptの入力補完・エラーチェックができるSublimeプラグイン

Sublime Text 3 + TypeScriptで自動補完(候補検索)やSyntax Highlightを実現する

以下のものが必要になります。

  • typescript
  • typescript-tools
  • T3S
  • SublimeOnSaveBuild

上記2つはnpmでインストールし、T3Sはgithubから入手します。SublimeOnSaveBuildはPackageControlからインストールできます。

今回、npmとgit、PackageControlはすでに使えること前提で話を進めます。

インストール

npmを使って、typescriptとtypescript-toolsをインストールします。

sudo npm -g install typescript typescript-tools

次にSublimeTextにT3Sパッケージを導入します。Preferences > Browse Packages…の位置にT3Sをgit cloneします(おそらく ~/Library/Application Support/Sublime Text 3/Packages あたり)。

git clone https://github.com/Railk/T3S.git

SublimeText2を使用している方は、加えて以下のコマンドを入力します。

git checkout ST2

T3Sの設定ファイルを確認します。Preferences > Package Settings > T3S > Settings – Defaultは最初、以下のようになっています。

{
    "local_tss":true,
    "error_on_save_only":false,
    // ビルドパラメータ
    "build_parameters":{
        "pre_processing_commands":[],
        "post_processing_commands":[],
        "output_dir_path":"none",
        "concatenate_and_emit_output_file_path":"none",
        "source_files_root_path":"none",
        "map_files_root_path":"none",
        "module_kind":"none",
        "allow_bool_synonym":false,
        "allow_import_module_synonym":false,
        "generate_declaration":false,
        "no_implicit_any_warning":false,
        "skip_resolution_and_preprocessing":false,
        "remove_comments_from_output":false,
        "generate_source_map":false,
        "ecmascript_target":"ES3"
    }
}

とりあえず、変更する可能性があるのは以下の2つです。

  • error_on_save_only: trueにすると保存した時のみエラーを表示する
  • output_dir_path: jsファイルの展開先。noneの場合は同一ディレクトリに展開される。プロジェクトの構成に合わせて変更(例えば”../js”)

Defaultは変更せず、「Settings – User」にコピーしてから編集して下さい。

最後に自動ビルドを仕上げます。これはPackage ControlからSublimeOnSaveBuildをインストールするだけ。

これは保存時に自動ビルドを行うパッケージですが、初期はtsファイルが含まれていないので、「Settings – User」を以下のように変更します。

{
    "filename_filter": "\.(ts|css|js|sass|less|scss)$",
    "build_on_save": 1
}

これで保存した際に自動でビルドが走り、指定した場所へjsファイルが展開されます。Cmd+bでもビルドできるので、その辺はお好みで。

動作確認

こんな感じで、美しくシンタックスハイライトされます。

pic20140428-1

補完機能もバッチリ。

pic20140428-2

エラーがあると、赤く知らせてくれます。これは文字列型に数値を入れているエラーです。

pic20140428-3

javascriptで型のエラーが出るのは、なかなか新鮮ですね!

まとめ

いかがだったでしょうか?Macでもかなり本格的な開発環境を整えることができました。

Mac+SublimeText+TypeScriptで、快適なJavascriptライフをどうぞ!

CATEGORIES