2023年10月17日ごろ公開されてたSalesforce Developers Blogの「Build Lightning Web Components Faster with Code Snippets」という記事で紹介されていたコードスニペットをつかったLightning Web コンポーネントの開発を試してみました。
Build Lightning Web Components Faster with Code Snippets | Salesforce Developers Blog
Salesforce Extension Pack for Visual Studio Code (v58.6.2)から利用可能になるようです。自分の環境をチェックしてみたら「v59.3.1」となっていたので全然OKでした。
バージョン確認する際に最初にインストール中になっていたので勝手にアップデートされていると思います。
コードスニペットとは
そもそもコードスニペットとはというところで、コードを書いてるときの保管機能という感じ。
コードスニペットの使い方
使い方は二種類。コマンドパレットから起動する方法とHTMLファイルにコードを書いているときの自動起動。
実際に動かしてみました。まずはLWCを新規作成。
「cmd + p」でコマンドパレットを起動。「>」を最初に入力。それからスニペットと入力するとスニペットを挿入と出てきました。
スニペットを挿入を選択すると候補がでてきます。
今回は記事と同じように「pill」を入力。
ポチポチと進めるとコード挿入がうまくいきました。「lightning-pill」の「lightning-avatar」という感じで必要なタグがひとまとめになって挿入できる感じ。
上記がコマンドパレットからスニペット機能を利用する方法の利用イメージです。もうひとつHTMLファイルにコードを書いているときの自動起動の方は次のような感じでした。
「<」とタグの先頭部分の記号を書くと候補が出てきます。(※ちょっと間違えてた。後で少し下に補足書きます。)
先程と同じく「pill」と入力。候補が絞り込まれます。
使いたいのが表示されないなってときにはやり直すと解決するかも。
これでコードスニペットの機能を使ってコードの挿入ができました。
実行結果はコマンドパレットの手順のときと同じ。・・・と思ったのですが、先頭に余計な「<」がついてました。
どうやら先頭の「<」はいらないみたいです。最初から「pill」と入力する形で反応しました。
Salesforce Developers Blogで紹介されていたLightning Web コンポーネントの開発が楽になるコードスニペット機能はだいたいこんな感じでした。lightningタグはけっこう覚えるのが大変なのでコードスニペットで補完してくれるようになるのはすごい便利そうでした。
コードスニペットの自作
ここは試しませんでしたが、「プロジェクトのディレクトリsnippets.code-snippetsにファイル」を作成する形で自作のコードスニペットを用意できるみたいです。
デフォルトでは作成されていないので、必要なら自分で用意する感じ。
配置場所は「.vscode」の中っぽい。
いまのところ自作するような場面は無いかなと思いましたが、会社の組織でよくでてくるキーワードとかコードスニペットに用意すると良いのかなと思います。
