VSCode で kebab-case から camel Case への変換が失敗するも GitHub Copilot でどうにかなった話
HTML の属性名を kebab-case から camelCase に変換する需要が発生
とあるクライアント Web アプリケーションを実装中のある日、とある事情から、以下のような Web Components によるカスタム要素を記述した HTML について、
<foo-component
font-size="20px"
export-type="csv"
maximum-data-chunk="100"
data-url="https://jsonplaceholder.typicode.com/posts"
></foo-component>
上記、kebab-case で記述されている属性名をすべて、camel Case に変換する必要が発生しました。
VSCode には標準でそのための機能があるのだが...
作業は Visual Studio Code (VSCode) 上で行なっていたのですが、幸い、VSCode には、この用途で使える、変換機能が備わっています。VSCode 上で、まずは変換したい部分を選択しておき、続けて Ctrl + Shift + P を押してコマンドパレットを開き、"Transform to Camel Case" を実行すれば、それで camel Case に変換できます。
下記リンク先の記事にも詳しく説明があります。
ところがどういうわけか、今回、この手順を実行してみると、camel Case (先頭は小文字で始まる) ではなく、Pascal Case (先頭は大文字で始まる) に変換されてしまいました。
変換が期待どおりでないことに加えて、インデントも崩れてしまっています。
また、単語単位で選択して camel Case 変換するぶんにはちゃんと camel Case になりましたし、あるいは、同じくまるっと選択した状態から snake_case に変換を実施するとそれはうまく動作しました。なので、この VSCode の標準機能による変換処理に何か潜在的な不具合があってそれを今回踏み抜いてしまったのか、あるいはこのようなまるっと選択した状態からの変換はサポート外なのか、と想像しています。
さておき、他の方法として、先のリンク先の記事に依れば、"change-case" という VSCode 拡張 (下記リンク先) をインストールする方法もあるようなのですが、
今ちょうどの、このちょっとの変換作業に、わざわざ拡張を追加でインストールしなければならないと思うと、気が重たくなってしまいました。なんだかあほらしいけど、これくらいなら手作業でちまちま書き換えるかー、と一瞬思ったりもしました。
GitHub Copilot にお願いしてみよう
そこで、ふと、「GitHub Copilot にやってもらったらいいのでは?」 と思いつきました。幸い、自分は、GitHub Copilot にサインアップしていて、VSCode 上で利用可能です。
ということで、変換したい箇所を選択した状態で、Ctrl + I を押して GitHub Copilot のプロンプトウィンドウを開き、camel Case への変換を依頼すると...
無事、期待どおりに camel Case に変換されました!
おわりに
VSCode の標準機能で変換する場合に比べると、変換を依頼するプロンプトを入力する手間がありますし、GitHub Copilot へのサインアップも必要ですから、コスト的には高くついています。とはいえ、標準機能の代替手段として、このような GitHub Copilot の活用も、その選択肢のひとつとして覚えておいても悪くはないな、と思える体験でした。
なお、プロンプトの入力ですが、今回はキーボードから手打ちしましたけれども、今は音声でも指示できるので、音声であればプロンプト入力の手間も軽減されるかもしれませんね。
Discussion