このエントリは
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
