CDK LSP がリリースされたので、VS Code拡張を自作してLSPの挙動を検証してみた

CDK LSP がリリースされたので、VS Code拡張を自作してLSPの挙動を検証してみた

CDK LSPについて、その機能と実際の動作をVS Code拡張で検証してみました。CDKコードとCloudFormation対応関係を可視化し、Synth時のエラーを即座に検出する仕組みを紹介します。
2026.07.20

はじめに

CDK LSP(language Server Protocol)がリリースされました!このリリースは先日開催された AWS CDK Conference Japan 2026https://jawsug-cdk.com/cdkconf2026/) の中で、来日したCDKコア開発者のMomo(mrgrain)氏からも発表されました。

https://x.com/konokenj/status/2078328629747187889

リリースバージョンとPRは以下になります。

https://github.com/aws/aws-cdk-cli/releases/tag/aws-cdk%40v2.1132.0

https://github.com/aws/aws-cdk-cli/pull/1681

CDK LSPがあると、例えば以下のようにsynthの結果を即時フィードバックし、エラーを早期発見する機能を作れたりします。

lsp-move-error.gif

発表当日は、どのような機能なのか理解できず十分に反応できなかったため、こちらで紹介します。本記事では、CDK LSPが出力したデータをVS Code上で描画して、CDKリソースからCfnリソースへのリンクを出したり早期にエラーを表示するデモプログラムも用意しています。

CDK LSPとは

CDKでは大規模な機能はRFCとして、提案された後合意された後に実装が開始されます。今回のCDK LSPも同様にRFCが出されています。

https://github.com/aws/aws-cdk-rfcs/pull/923

上記のRFCのtext/0920-lsp-server-and-web-explorer.mdファイルを確認すると、RFC内では主に2つの機能の実現について書かれています

  1. cdk explorer: CDKが生成するCloudFormationリソースをエディタ上で直感的に把握できる
  2. cdk lsp: cdk synthで得られる検証の違反をコード行へ即座にフィードバックする

最終的には、LSPで得たフィードバックを、explorerという独自のエディタ画面に描画し、CDK Appを分析しやすくすることを目的としています。RFC内の画像を以下に記載します。なお、このexplorerの方はまだ実装がリリースされていません。

image.png

LSPは、explorerへの情報伝達だけでなく、Claude Codeへのフィードバックも提供する予定です。AIエージェントに即時にフィードバックすることで、決定論的なガードレールも作ることができます。

現在の実装としては、ファイル保存時に内部的にcdk synthを並行で実行して、synth時に出力されるエラーを即時送信するような動きになっていました。この動きを後ほど自作のVS Code拡張で追っていきます。

VS Code拡張を自作して動かしてみた

CDK LSPは、以下のCDK CLIバージョン以上ならpnpm cdk lspなどで実行できます。ただ、cdk lspコマンドを実行しただけでは、 VS CodeなどのLSPクライアントと標準入出力経由で通信するLanguage Server プロセスが立ち上がるだけです。別途VS Codeなどで受け取るクライアントの実装が必要になります。今回は人間が見てもわかりやすいように、VS Code拡張として試しに実装してみます。

注意点として、RFC内では、VS Code拡張のAWS Toolkitへの統合が検討されています。詳細はRFCを参照してください。ですので、今回のコードはあくまでCDK LSPの挙動を確認するための散布つです。公式対応が出るまでの繋ぎとして認識してください。

コードは以下に公開しています。手元で動かすことも可能なので、気になる人は試してみてください。なお、コードは勉強用なので、説明用のコメントが大量に書かれています。

https://github.com/tomoki10/vscode-cdk-lsp

こちらのブログでは読むだけでもある程度の動作を確認できるように記載します。

まず、先に実行方法だけ紹介します。以下のコマンドでVS Code拡張機能をコンパイルします。

pnpm install
pnpm run compile

コンパイル後、CDK Synthを先に実行してCloudFormation(Cfn)テンプレートを作成しておきます。

cd examples/cdk-lsp-test
pnpm install
pnpm cdk synth

これで準備はできたので、F5で拡張機能を実行してみます。実行すると新しいVS Codeのウインドウが開くので、開いた先でexamples/cdk-lsp-test/lib/cdk-lsp-test-stack.tsのファイルを開くと、以下のようにCDKの実装がどのCfnテンプレートのリソースと関連するのか分かります。

image.png

また以下のように、Synth時にエラーとなるようなコードを入れると早期にエラーを確認できるようになります。ここでは、S3にpublicReadAccess: trueをつけると、Synth時にエラーになるので試してみます。

image.png

エラーがエディタ画面上でも見えますし、VS CodeのProblemタブでもエラーを確認できます。

スクリーンショット 2026-07-20 18.40.56.png

現状の動きとしては、ファイル保存時に裏でcdk synthを実行してそこで発生したエラーをCDK LSP経由で早期フィードバックしています。

VS Code上に情報は連携されるので、Claude Codeだと、 ide - getDiagnostics(MCP) を使って情報を連携できます。以下はClaude Codeの実行例です。

claude

 cdk lsp 経由で現在のエラーを取得できる?

  Read 2 files, called ide

はい、取得できました。lib/cdk-lsp-test-stack.ts の診断結果です。

Error(cdk lsp = cdk synth 由来)1件

lib/cdk-lsp-test-stack.ts:32 DemoBucket2

CannotPublicReadAccessProperty
Cannot use 'publicReadAccess' property on a bucket without allowing
bucket-level public access through 'blockPublicAccess' property.

Relates to construct:
<.> (aws-cdk-lib.App)
└─ CdkLspTestStack (aws-cdk-lib.Stack)
   └─ DemoBucket2 (aws-cdk-lib.aws_s3.Bucket)

おまけ:VS Code拡張の中身

VS Code拡張の中身を少しだけ解説します。実際どんな動きをするのかだけ気になる方は、この節は飛ばして読んでください。

おおまかには以下のようなソースの構造になっています。

.
├── .vscode
│   └── launch.json # VS Code で デバッグ実行する際の構成 
├── examples
│   └── cdk-lsp-test # CDK LSPを試すためのサンプルコード
├── src
│   └── extension.ts # CDK LSP 用の VS Code Client 実装
...

"type": "extensionHost" が拡張起動用であることを示す部分で、通常の Node アプリではなく Extension Development Host(拡張機能を読み込んだ別ウィンドウの VS Code)を起動します。argsの部分で実行パスや、テスト用の拡張機能を動かす場所を設定します。ここではサンプルコードが"${workspaceFolder}/examples/cdk-lsp-test"で設定しています。

https://github.com/tomoki10/vscode-cdk-lsp/blob/7f82e563bba7f8f773b1e9f0e172b5944a49d810/.vscode/launch.json#L8-L10

おおまかにはserverOptionsclientOptionsを設定します。

serverOptionsを設定することで子プロセスとしてコマンドが実行されます。ここで、cdkから提供されているcdk lspコマンドを実行して、Language Serverプロセスを立ち上げます。

https://github.com/tomoki10/vscode-cdk-lsp/blob/7ed4e0df228cefd6b44498490bea65334c405103/src/extension.ts#L87-L101

clientOptionsでは、documentSelectorでどのファイルを対象とするか選択できます。今はテスト用なので幅広くTS/Pythonを対象にしてます。initializationOptionsでは受け取ったディレクトリをCDK Appと認識して実行されます。

middlewareでは、 Problems パネルに反映される手前で割り込めるフックを書きます。Problemに含めたくない余分なエラーを除外する処理が入っています。

https://github.com/tomoki10/vscode-cdk-lsp/blob/7f82e563bba7f8f773b1e9f0e172b5944a49d810/src/extension.ts#L134-L143

上記2つをセットして、clientを作成し、後ほどのclient.start();で起動します。

https://github.com/tomoki10/vscode-cdk-lsp/blob/7f82e563bba7f8f773b1e9f0e172b5944a49d810/src/extension.ts#L208-L209

最後の vscode.commands.registerCommand('cdkExplorer.openResource', ...) の部分では、CodeLens がクリックされたときに、CDK のコンストラクトから生成された CloudFormation テンプレートの該当リソースへジャンプする処理を実装しています。サーバーはエディタ操作ができないため、リンク先の情報だけを渡してきて、実際に開く処理はクライアント側が担当します。

https://github.com/tomoki10/vscode-cdk-lsp/blob/7f82e563bba7f8f773b1e9f0e172b5944a49d810/src/extension.ts#L259-L276

所感

CDK LSPの発表を聞いた時に何ができるのかいまいち分からなく、動作確認もしにくかったのでCDK LSPを使うサンプルを作ってみました。

実際に使ってみて分かった利点として、CDK→Cfnのリソースの関連性がすぐに分かるので、どういう風に反映されるのかの理解や、デバッグも捗りそうです。

また実装途中でCDK LSPから早期フィードバックできることで、人間もAIエージェントもSynthするよりも前に気づいて早期な問題解決に繋げられます。後に、人間向けのCDK Explorerが出る予定なので、それが出ると人間側の理解も捗りそうです。

今のところはSynthの結果だけですが、ほかの情報も今後早期フィードバックできると、より便利になりそうで楽しみです!

この記事をシェアする

関連記事