Quantcast
Channel: DECONCEPTER » TypeScript
Viewing all articles
Browse latest Browse all 3

TypeScriptのシンタックスをSublimeTextで使う

$
0
0

mainsublimetsmain TypeScriptのシンタックスをSublimeTextで使う

オンラインエディタも割と高機能

話題のMicrosoft製JavaScriptコンパイル言語のTypeScriptのコードを試すには下記リンクのオンラインエディタで気軽にコードが書いて結果を見ることができる。型を指定すれば、型に合ったコードヒントが表示される上、コンパイルエラーがあれば、赤い波線で教えてくれ、なかなかの高機能エディタとして使うことができる。

 TypeScriptのシンタックスをSublimeTextで使うTypeScript – Playground TypeScriptのシンタックスをSublimeTextで使う

でもSublime Text 2で書きたい

トップページを見ると、なにやら「Visual Studio 2012 Developers can install the TypeScript editor plugin to get rich TypeScript tooling」まさかVisual Studio用のプラグインしか無いのか?と一瞬焦ったが、よ〜く見るとother editors availableと書いてある。期待してリンクを除くと。。あった。良かった。Sublime Text 2 / Emacs / Vimのサポートが用意されている。

mainsublimeisnothing1 TypeScriptのシンタックスをSublimeTextで使う

mainsublimeemacvim TypeScriptのシンタックスをSublimeTextで使う

なんだかMicrosoftがモダン

トップページで雲がプカプカしていたり、インストールをnpmで提供したり、パララックスのサンプルを用意したり、Sublime Text 2をサポートしたり、ドキュメントをWordファイルで用意したり。
Windows 8 のUIといい、最近中にお洒落さんがいるに違いない。

Sublime Text 2にTypeScriptのシンタックスを認識させる

 TypeScriptのシンタックスをSublimeTextで使うSublime Text, Vi, Emacs: TypeScript enabled! – Interoperability @ Microsoft – Site Home – MSDN Blogs TypeScriptのシンタックスをSublimeTextで使う

上記のリンクからSublime Text 2のアイコンをクリックすると.tmlangageというファイルが入っているzipが落とせる。ちなみにこのページはmsdnだ。解凍したフォルダ名をTypeScriptにして下記の場所に入れて、Sublime Text 2を再起動する。

~/Library/Application Support/Sublime Text 2/Packages/

TypeScriptコードがしっかりカラーリングされる

Cmd + Shift + PでCommand Paletteを出して(出ない場合はTools > Command Palette)、syntax TypeScriptと入力してみると見事カラーリングされる。

mainsublimetsnosyntax TypeScriptのシンタックスをSublimeTextで使う
mainsublimetssyntax  TypeScriptのシンタックスをSublimeTextで使う

保存時に自動で拡張子をつけてくれる

Sublime Text 2は新規ファイルを各言語用のSyntaxをセットすると、保存時にセットした言語の拡張子を自動で付記してくれる、TypeScriptも例外ではなく、上記の通りインストールが完了していれば.ts拡張子を付記してくれる。

せっかくなのでTypeScriptをコンパイルする

なんの意味もないが、せっかくなのでSublime Text 2で書いたgreeter.tsをコンパイルする。任意の場所に置いたGreeterディレクトリでコンパイルする前提とする。

cd Greeter
tsc greeter.ts

tsファイルと同名のgreeter.jsが吐き出された。後はこのjsを読み込むHTMLを用意しておしまい。

maintsexportedjs TypeScriptのシンタックスをSublimeTextで使う


Viewing all articles
Browse latest Browse all 3

Trending Articles