Y.A.M の雑記帳: Sublime Text 2 で TypeScript の開発環境を整える

このエントリは Sublime Text 2 Advent Calendar 2012 用です。

---

TypeScript については公式サイトなどを見てください。

Sublime Text 2 で TypeScript を開発するためのこまごましたチップスをブログに書いてきたので、一旦まとめたいと思います。

1. TypeScript ファイル（.ts）をシンタックスハイライトするようにする

「Y.A.M の雑記帳 - Sublime Text 2 に TypeScript の syntax highlighting を入れる」を見よう！

2. TypeScript の補完がでるようにする

「Y.A.M の雑記料 - Sublime Text 2 で TypeScript の補完を出すプラグイン作った」を見よう！

補完は以下のコマンドで出ます（標準機能）。

Linux : alt + /
Mac : command + space

3. TypeScript ファイルをビルドできるようにする

「Y.A.M の雑記帳 - Sublime Text 2 で TypeScript をビルドする」を見よう！

ビルドは以下のコマンドで実行できます。

Linux : ctrl + b
Mac : command + b

4. ファイル保存時に自動でビルドさせる

「Y.A.M の雑記帳 - Sublime Text 2 でファイル保存時に自動でビルドさせる」を見よう！

5. ctrl + / (Mac は command + /）でコメントをトグルさせる

「Y.A.M の雑記帳 - Sublime Text 2 で .ts ファイルでも Ctrl + / でコメントをトグルできるようにする」を見よう！

6. TypeScript 用のスニペットを作る

JavaScript 用にあらかじめ用意されているスニペットがいくつかあります。

([Preferences] - [Browse packages...])/JavaScript/ の中をみると .sublime-snippet ファイルがこれだけあります。

for-()-{}.sublime-snippet
for-()-{}-(faster).sublime-snippet
function.sublime-snippet
function-(fun).sublime-snippet
Get-Elements.sublime-snippet
if.sublime-snippet
if-___-else.sublime-snippet
Object-key-key-value.sublime-snippet
Object-Method.sublime-snippet
Object-Value-JS.sublime-snippet
Prototype-(proto).sublime-snippet
setTimeout-function.sublime-snippet

例えば、for-()-{}.sublime-snippet の中身は次のようになっています。



    
    for
    source.js
    for (…) {…}

scope で指定されている拡張子のファイルで、tabTrigger で指定されている単語の後に Tab を押すと、content で指定されているスニペットに置き換わります。Tab を押したときに候補が複数ある場合は、補完候補ウィンドウに description が表示されます。

tabTrigger に for を指定しているスニペットが
・for-()-{}.sublime-snippet
・for-()-{}-(faster).sublime-snippet
の２つあるため、次のように候補が２つ表示されます。

上部の候補を選ぶと次のように for 文のスニペットに置き換わります。

これらの補完を TypeScript でも使えるようにしてみます。

・for

せっかくなので、TypeScript の特徴である型情報を付加して、var i を var i : number にします。 scope タグを source.ts にするのを忘れずに。このファイルを ([Preferences] - [Browse packages...])/TypeScript/ に置きます。

TypeScript/for-()-{}.sublime-snippet


<snippet>
    <content><![CDATA[for (var ${20:i} : number = 0; ${20:i} < ${1:Things}.length; ${20:i}++) {
    ${100:${1:Things}[${20:i}]}$0;
}]]></content>
    <tabTrigger>for</tabTrigger>
    <scope>source.ts</scope>
    <description>for (…) {…}</description>
</snippet>

他のも TypeScript 用にします。

TypeScript/for-()-{}-(faster).sublime-snippet


<snippet>
    <content><![CDATA[for (var ${20:i} : number = ${1:Things}.length - 1; ${20:i} >= 0; ${20:i}--) {
	${100:${1:Things}[${20:i}]}$0;
}]]></content>
    <tabTrigger>for</tabTrigger>
    <scope>source.ts</scope>
    <description>for (…) {…} (Improved Native For-Loop)</description>
</snippet>

・function

TypeScript では無名関数は
(x) => x*x;
のように記述するので、function.sublime-snippet は次のようにしました。

TypeScript/function.sublime-snippet


<snippet>
    <content><![CDATA[($1) => {${0:$TM_SELECTED_TEXT}};]]></content>
    <tabTrigger>f</tabTrigger>
    <scope>source.ts</scope>
    <description>Anonymous Function</description>
</snippet>

TypeScript/function-(fun).sublime-snippet


<snippet>
    <content><![CDATA[function ${1:function_name} (${2:argument} : ${3:type}) : ${4:return_type} {
	${0:// body...}
}]]></content>
    <tabTrigger>fun</tabTrigger>
    <scope>source.ts</scope>
    <description>Function</description>
</snippet>

・get elements

TypeScript/Get-Elements.sublime-snippet


<snippet>
    <content><![CDATA[getElement${1/(T)|.*/(?1:s)/}By${1:T}${1/(T)|(I)|.*/(?1:agName)(?2:d)/}('$2')]]></content>
    <tabTrigger>get</tabTrigger>
    <scope>source.ts</scope>
    <description>Get Elements</description>
</snippet>

・if

TypeScript/if.sublime-snippet


<snippet>
    <content><![CDATA[if (${1:true}) {
    ${0:$TM_SELECTED_TEXT}
}]]></content>
    <tabTrigger>if</tabTrigger>
    <scope>source.ts</scope>
    <description>if</description>
</snippet>

TypeScript/if-___-else.sublime-snippet


<snippet>
    <content><![CDATA[if (${1:true}) {
    ${2:$TM_SELECTED_TEXT}
} else {
    ${3:$TM_SELECTED_TEXT}
}]]></content>
    <tabTrigger>ife</tabTrigger>
    <scope>source.ts</scope>
    <description>if … else</description>
</snippet>

Object-key-key-value.sublime-snippet, Object-Method.sublime-snippet, Object-Value-JS.sublime-snippet は JavaScript でもうまく動いていないのでスキップ。

・function

TypeScript/setTimeout-function.sublime-snippet


<snippet>
    <content><![CDATA[setTimeout(function() {$0}${2:}, ${1:10});]]></content>
    <tabTrigger>timeout</tabTrigger>
    <scope>source.ts</scope>
    <description>setTimeout function</description>
</snippet>

TypeScript では、class や module が使えます。
これら用のスニペットも用意しましょう（これらに置き換えるので Prototype-(proto).sublime-snippet はスキップ）

・class

"class" + tab

TypeScript/class.sublime-snippet


<snippet>
    <content><![CDATA[class ${1:className} extends ${2:superClass} implements ${3:interface} {

    ${4:varName} : ${5:varType};

    ${6:funcName}(${7:arg} : ${8:argType}) : ${9:returnType} {
        ${10}
    }

    constructor(${11:arg} : ${12:argType}) {
        ${13:super();}
    }

    static ${21:varName} : ${22:varType};

    static ${23:funcName}(${24:arg} : ${25:argType}) : ${26:returnType} {
        ${27}
    }
}]]></content>
    <tabTrigger>class</tabTrigger>
    <scope>source.ts</scope>
    <description>class</description>
</snippet>

・module

"module" + tab

TypeScript/module.sublime-snippet


<snippet>
    <content><![CDATA[module ${1:moduleName} {
    ${0:$TM_SELECTED_TEXT}
}]]></content>
    <tabTrigger>module</tabTrigger>
    <scope>source.ts</scope>
    <description>module</description>
</snippet>

・interface

"interface" + tab

TypeScript/interface.sublime-snippet


<snippet>
    <content><![CDATA[interface ${1:interface-name} {
    ${0:$TM_SELECTED_TEXT}
}]]></content>
    <tabTrigger>interface</tabTrigger>
    <scope>source.ts</scope>
    <description>interface</description>
</snippet>

・Index Signature

"index" + tab
で
var dic : { [index : string] : type; } = {};

TypeScript/index-signature.sublime-snippet


<snippet>
    <content><![CDATA[var dic : { [index : ${1:string}] : ${2:type}; } = {};]]></content>
    <tabTrigger>index</tabTrigger>
    <scope>source.ts</scope>
    <description>Index Signature</description>
</snippet>

・reference

"reference" + tab
で
/// <reference path="…"/>

TypeScript/reference.sublime-snippet



    ]]>
    reference
    source.ts
    reference

その他に以下も用意してみました。

・Array

"array" + tab
で
var array : type[] = [];

TypeScript/array.sublime-snippet


<snippet>
    <content><![CDATA[var array : ${0:type}[] = [];]]></content>
    <tabTrigger>array</tabTrigger>
    <scope>source.ts</scope>
    <description>Array</description>
</snippet>

これで

array
class
for
function
get
if
index
interface
module
reference
timeout

でスニペット補完がでます。

ここから全部のファイルをコピーするのは面倒だと思うので、TypeScript フォルダを zip にしました。
ここからどうぞ TypeScript.zip

Y.A.M の雑記帳

2012年12月24日月曜日

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

1 件のコメント: