【VSCode,LWC】lwc-builderをインストールして使ってみる

2022/09/13 追記

マーケットプレイスからインストールできるようになってました！
https://marketplace.visualstudio.com/items?itemName=ninoish.lwc-builder

lwc-builderをインストールして使ってみる

twitterでふと流れてきたlwcを冠したツール。気になったので使えるようにしてみた。
https://twitter.com/ch_sz_knapp/status/1391739929147977731
https://github.com/developerforce/lwc-builder

vsixファイルをダウンロード

まずは以下のサイトからvsixファイルというvscodeへのインストーラをDLしよう。
https://github.com/developerforce/lwc-builder/tree/main/generated-assets

vsixファイルをインストール（失敗ケース）

vsixファイルをダブルクリックしてインストール、、、と思ったが
エラーで終了してインスールできない

コマンドプロンプトからインストール

どうやらコマンドプロンプトからインストールする必要があるらしい。
VSCodeのインストールフォルダにあるbinフォルダへ移動して、"Code.cmd"を使い、先程のvsixファイルのパスを渡してやればインストール完了。

C:\WINDOWS\system32>cd C:\Program Files\Microsoft VS Code\bin

C:\Program Files\Microsoft VS Code\bin>Code.cmd --install-extension "Z:\TEMP\lwc-builder-0.1.4.vsix"

VSCodeを起動して確認してみる

lwc-builderがインストール済みになっていることを確認

起動の仕方は？

Open the command palette and find "Open LWC Builder" command
Right click on your "lwc" folder and click on "Open LWC Builder"

DeepL翻訳にかけてみる、、

コマンドパレットを開き、「LWC Builderを開く」コマンドを見つける。

lwc "フォルダを右クリックし、"Open LWC Builder "をクリックします。

使い方は？

フィールドを順番に入力していくと、、

メタデータがどういう風に生成されるかプレビューされるみたい

最後にCreateボタンを押せば、プレビューの内容のままにコンポーネントフォルダとファイルが作成される！

これがあればメタデータの設定内容記憶しなくても生成されるからちょっと便利かも！