Zenn
📋

あなたのTypeScriptを華やかに彩るSublime Text構文定義

2020/09/25に公開
TypeScript
Sublime Text
tech

TypeScript 構文定義（JavaScript でも利用可能）

こんにちは。以前 Sublime Text の TypeScript 着色に不満があり拡張した構文定義を載せましたが、Microsoft 公式のものをベースに不足部分を拡張したため根本的な部分が修正できず、なんとも歯がゆい思いをしていました。

そして今回、TypeScript 構文の勉強、Sublime Text 構文定義ファイルの勉強も兼ねて「割と本格的に」構文定義ファイルを作成しました。すでに世界中で TypeScript 構文定義は作成されていて私もいくつか試してみましたが、拙作が最も着色精度が高いと自負しております。

全 3300 行を超えた構文定義ファイルで、あなたの TypeScript を華やかに彩ります!

##スクリーンショット

sublimetext_typescript.png

私の気に入りのカラースキーム Solarized による着色例です。見本ソースコードは TypeScript 公式にて公開されているtodos.tsです。

特長

徹底した構文解析

TypeScript は調べれば調べるほど変態的な構文であることが判り正確な解析には苦労させられました。変態的な例は以下のようなものです。

var o: { x: number; y: () => any } = <any>{
  x: 10,
  y: function () {
    if (a >= 10) {
      return;
    }
    return foo ? bar.barbar : baz.bazbaz();
  },
};

JavaScript 由来の Object 式、TypeScript の Object Type 宣言、if 文、三項演算子と入り乱れて要素が出現するのがこの言語の特徴で、終盤半泣きになりながら正規表現の修正を繰り返しましたが、

  • TypeScript 公式サイトに公開されている全ソースファイル
  • 言語仕様書(0.9.7)に掲載されたほぼ全ての例文
  • TypeScript クイックガイドの全ての例文
  • MDN 掲載の JavaScript 例文から複数のもの
  • GitHub にて検索し無作為に選択した.tsファイル、.jsファイル数十種類

といった計 100 を超えるサンプルによる検証を重ね、概ね使用に耐えうると判断したため公開に踏み切りました。

前作から大幅増! 豊富な着色スコープ

前作(Ver1 系)はデフォルトの JavaScript 構文定義に依存した Microsoft 公式の構文定義を用いていたため、依存部分の拡張が難しく更新の度に不自由していました。

今回、構文解析を一から書いたので着色可能なスコープを大幅に増やしています。

スコープ名 着色箇所の例
storage.modifier.extends.ts interface, classにおけるextends
entity.other.inherited-class extends以降に記述されるスーパークラス
storage.type.variable.ts 以前は着色不能だったvar
variable.other.property.ts object.propertyのproperty部分
meta.function.call.ts object.method()のmethod部分
variable.parameter.name.function.ts func()のfunc部分（利用時）

などなど、紹介しきれないほど細かく定義していますので、お手元のファイルにてご確認ください。Sublime Text 内でのスコープの確認には"Scope Hunter"や"ScopeAlways"といったパッケージが公開されています。スコープに対しての新たな着色や既存の設定色を変更したい場合は、TmTheme Editorがオススメです!

※上のスクリーンショットは細かく着色設定を変えているので初期状態ではもう少し使用色数は減ります。ご了承ください。

TypeScript 0.9.7 準拠 Generics にも対応

巷の多くの TypeScript 構文ファイルは（確認した限りでは）Generics に対応できていないものばかりです。今作は Generics, Casting といった構文にもしっかり対応しています。

variable.parameter.function.type.any.tsスコープにてany型のみ色を分けることも可能。Object Type や Function Type といった間延びしやすい記述の着色もバッチリ。もう any で妥協しない!

Object と Object Type を見分けます

{property: type}と{key: value}という非常によく似た構文も判別するように設計しました。前作では"key"と括らなければ Type であると誤認識していたのですが、この問題を解消しています。

また、クラスメソッドの解析も設計し直し、前作では必須だったpublicやprivateといった修飾子を付けずともクラスメソッドの宣言であると認識します。Sublime Text のCrtl+R（ファイル内のクラスとメソッド・関数を検索）にも対応。

それって足し算? 連結?

+に加算と文字列連結の両方を担わせている JavaScript を私はあまり好きでなく、文字列連結であると明示したい場合に両端のスペースを取る癖があります。（'foo'+'bar'と1 + 2というように）

コーディングスタイルにもよりますが、このスペースなし+とスペースあり+に別々のスコープを指定しています。スペースの有無で判別しているので加算のときもスペースを外すと文字列連結スコープとなりますが（今後改善予定）使い分けが便利になる場面もあると考えています。

おまけのサポートもあります

regexp

最低限ではありますが、regexpにも対応しました。今後拡張を考えています。

self

JavaScript のテクニックとして使われるselfや_thisといった一時変数にもスコープを割り当てています。お好みでthisと同じような彩色が可能。

Document 風

/** */形式のコメントには別スコープを割り当て@keyword形式の語句を区別するので、Document 風の記述が可能です。

外部ライブラリに一部対応

おなじみの jQuery$や Underscore.js_にも個別のスコープを割り当てました。個人的な欲求で AngularJS の$scopeにも対応しています。

JavaScript にも対応

TypeScript 自体が JavaScript のスーパーセットであるため、JavaScript ファイルも大半を正しく着色します。prototypeなど TypeScript では用いない記述は暫定対応ですが、十分に使えるレベルです。

お試し下さい!

ぜひ生まれ変わった新構文ファイルで、あなたの TypeScript に自在に彩ってください!

注: 多数のサンプルソースにて正しく着色できるよう検証していますが、もし着色漏れがありましたらご容赦ください。ご報告頂けましたら修正いたします。

ご意見、ご要望などお待ちしています。

履歴

14/06/07 v2.0.5

  • 即時関数(() => )()に関するバグを修正
  • AngularJS 利用時における$を含む変数名の着色に関する問題を解決

14/05/30 v2.0.4

  • 正規表現に関する着色漏れを修正

14/05/29 v2.0.3

  • オブジェクト（{key: value}）の空白に関する問題を解決
  • export moduleの着色漏れを修正

14/03/27 v2.0.1

  • staticクラス変数の着色漏れを修正
    • static, public static, private staticの表記に対応

14/03/23 v2.0

  • 安定版をリリースしました
  • newに関する着色の不具合を修正
  • ECMAScript 予約語へのサポートを拡充

14/03/19 v2.0b3

  • 以下の問題を修正
    • public staticとしたときに着色されない問題
    • module直下での関数呼び出しが着色されない問題
    • $から始まる Object Key が正しく着色されない問題
  • use strictのスコープを改善

14/03/19 v2.0b2

  • 特定条件下での() => {}の着色について修正

14/03/18 v2.0b1

  • Ver2 系を制作。Ver1 系との互換性はありません。

13/11/16 v1.0

  • Ver1 系を制作

Discussion