Mac で Sublime Text を使って TypeScript を始めるまでの手順

仕事では VisualStudio 使ってます。

VisualStudio 使えば TypeScript はサポートしてくれるけど、
ちょっとしたライブラリを書く程度なら Mac でオシャレに書きたい!
ということで Mac で開発環境を整えました。


エディタ

Sublime Text 2 を採用しました。


Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog

今まで使ったことなかったので、上の記事を参考にしました。


いくつかのパッケージはデフォルトでインストールされるようになっているらしく、
参考記事で紹介されていたもののうち、いくつかは見つかりませんでした。


インストール済みのパッケージ

  • HTML
  • CSS
  • jQuery(これは記憶が不確か)


「もう使うな、こっち使え!」って書いてあったパッケージ

  • CSScomb JS(CSScomb)


見つからなかったパッケージ

  • Tag


インストールと同時にパッケージ入れると、どこまでがエディタの標準機能なのかわからないのでほどほどにしておきます。


TypeScript のインストール

この記事 を参考にしました。


Node.js と TypeScript はインストールするだけ。
続いて TypeScript パッケージをインストール。
参考記事は英語だけど、順を追っていけばなんとかなるはず。


ビルドの設定までいったところで驚く。


Sublime Text に Build コマンドがついている!」


ただのエディタだと思ってなめてた。
もはやエディタと IDE の違いが私にはわからない。
言ったもん勝ちなのかな。


HelloWorld 書いてビルドすると、No Such File or Directory とエラー表示される。
どうやら tsc (TypeScript のコンパイラ)が見つからなかった模様。

{
    "cmd": ["tsc","$file"],
    "file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$",
    "line_regex": "\\((\\d+),(\\d+)\\)",
    "selector": "source.ts",
    "osx": {
       "path": "/usr/local/bin:/opt/local/bin:/usr/bin"
    }
}

私の環境では /usr/bin にインストールされていたので、
こんな感じで参考記事の path の設定だけ修正したところ、動作しました。


それにしても Sublime Text 軽いな〜。
設定もエディタで書かせたり、パッケージの概念が入ってたりと、今までのエディタの価値観が変わった。


Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ