Sublime Textを「最強のTypeScript IDE」へ変貌させる――LSP-TypeScriptの深淵
こんにちは。日々、数百万行規模のコードベースと格闘し、開発効率を0.1秒単位で削り出しているエンジニアです。
皆さんは「Sublime Textは軽量で速いけれど、TypeScriptの型チェックや補完はVS Codeに任せるしかない」と諦めていませんか？それは大きな誤解です。Sublime Textの真価は、LSP（Language Server Protocol）の制御下に置くことで、「VS Code並みの知能」と「Sublime特有の圧倒的なレスポンス」を両立できる点にあります。
今回は、単なる設定手順の羅列ではなく、TypeScriptの型システムがSublime内でどう循環しているのか、その「本質」を解説します。
—
1. なぜ「LSP-TypeScript」なのか？：IDEの解体と再構築
VS Codeが重く感じるのは、エディタ自体が巨大なアプリケーションとしてメモリを食うからです。一方、Sublime TextでLSPを使うということは、「エディタ（UI）」と「TypeScriptコンパイラ（頭脳）」を分離して疎結合にするというアーキテクチャを採用することです。
LSP-TypeScriptは、Microsoftが提供する `tsserver` という心臓部を、Sublime Textに直接接続します。これにより、型定義の誤りや未定義のプロパティを、タイピングした瞬間にSublimeのバッファへフィードバックさせることが可能になります。
—
2. 構築の鉄則：LSPのインストールと初期設定
まずは、Package Controlから以下の二つをインストールしてください。
1. LSP: プロトコルの基盤となるクライアント。
2. LSP-typescript: TypeScript固有のロジックを処理するブリッジ。
インストール後、最も重要なのは「プロジェクトごとの制御」です。`.sublime-project` ファイルを活用し、プロジェクト単位で設定をカプセル化しましょう。
推奨されるプロジェクト設定（.sublime-project）
{
“folders”: [
{ “path”: “.” }
],
“settings”: {
“lspConfigs”: {
“typescript”: {
“enabled”: true,
// プロジェクトルートのtsconfig.jsonを明示的に認識させるための設定
“initializationOptions”: {
“tsserver”: {
“logVerbosity”: “verbose” // 診断用：型チェックが止まった際にログを確認するために必須
}
}
}
}
}
}
なぜこれが必要か： `tsserver` はルートディレクトリを基準に型定義を探します。Sublimeがプロジェクトのルートを正しく認識していないと、`node_modules` の型定義が読み込まれず、補完が死にます。必ずプロジェクトファイルを作成してください。
—
3. 型定義が効かない？「深淵」を覗くトラブルシューティング
「補完が効かない」「型エラーが赤線で出ない」といったトラブルは、9割が `tsconfig.json` との不整合です。
診断のステップ
1. ステータスバーを確認する: Sublimeの画面左下にLSPの状態が表示されます。ここで「TypeScript: 0」となっていれば、LSPが起動していません。
2. LSPのログを覗く: `Ctrl+Shift+P` (macOS: `Cmd+Shift+P`) から `LSP: Toggle Log Panel` を選択してください。ここで `tsserver` からのエラーログが流れていれば、コンパイラは動いています。
よくあるハマりポイント：プロジェクトの階層
モノレポ（Monorepo）構造や、フロントエンドとバックエンドが同居している場合、サブディレクトリに `tsconfig.json` があると親ディレクトリのLSPが混乱します。その際は、`LSP-typescript` の設定で `rootPatterns` を明示的に指定してください。
—
4. HelloWorld的な動作確認：型安全を体感する
設定が正しく完了したか確認するために、以下のテストコードを書いてみてください。
// 型安全のテスト
interface User {
id: number;
name: string;
}
const user: User = {
id: 1,
// ここでキーを一つ削除するか、nameを数値に変えてみてください
// 即座にSublimeのgutter（左端）に赤いマーカーが表示されるはずです
};
console.log(user.name); // ここで.を入力し、補完が出るか確認
この瞬間、Sublime Textは単なるテキストエディタではなく、型安全を保証するインテリジェントな開発環境へと進化しました。
—
最後に：なぜSublimeなのか
VS Codeにはない「極限のカスタマイズ性」と「起動速度」。そして、LSPを通じて得られる「正確な型推論」。これらを組み合わせた時、あなたは他のエディタには戻れない「心地よいコーディング体験」を手にすることになります。
もし、特定の大規模プロジェクトで型チェックが重いと感じたら、`initializationOptions` で `tsserver` のメモリ制限を調整することも可能です。
あなたのコーディング体験が、今日からより速く、より正確になることを願っています。何か詰まったら、いつでもログを確認する癖をつけてください。それが、プロのアーキテクトへの第一歩です。