日付入力して書式を選べるVSCode機能拡張をつくりました #JavaScript

この記事は「Visual Studio Code Advent Calendar 2023」に参加している記事です。

はじめに

VSCodeの機能拡張作ったけど、ダウンロード数が全然いかないから、アドベントカレンダーで他の人に知らせなさい、という指令をいただいた気がしたので書かせていただきます。

こちらの機能拡張です。

Smart Insert Date - Visual Studio Marketplace

機能の説明

日付と時刻をテキストに追加することができます。

キーボードのショートカットキーで Ctrl + Alt + ; を押すと

2023-12-15 Fri

このような文字が追加されて、この文字が選択されているので、そのまま、同じショートカットキーを押すと、

Fri, Dec 15, 2023

に変化しますので、ショートカットキー1つで、複数の日付時刻のフォーマットを切り替えることができます。

これで、1回ショートカットキーで機能拡張を呼び出したら、デフォルトの日付フォーマット。2回、3回と、ショートカットキー押すと別の日付フォーマットが出力されます。

選択を切り替えると、回数がリセットされる、という感じになります。

また、
Smart Insert Date | Select Format
のコマンドを選ぶと、フォーマットをプルダウンから選べます。

また、
Smart Insert Date | Select Date
このコマンドを選ぶと、日付を、週や月や年の単位でどこか選び、その日に対して、書式付きの日付を出力することができます。

リンク先に画像載せてるので雰囲気的にわかると思います。

機能が至らなかったところ

至らなかったので、将来作りたい、って思ってます。

1:
日本の曜日には対応しているのですが、日本の元号に対応するの忘れてました。いずれやりたいです。

2:
また、チャイニーズにも対応したいので、曜日設定を外部にもたせて、曜日定義を変えたら中国語/台湾語とかにも対応したいです。

国際交流感を感じたいと思っています。

参考
星期天・星期日・禮拜天・禮拜日のなぜを解説【中国語の曜日】 | （株）台湾トーク日本中国語センターオフィシャルサイト
https://taiwan-talk.co.jp/xingqitian-xingqiri/

3:
選択文字列が
YYYY-MM-DD ddd
とか書かれていたら、それに対応して現在時刻の値とかで出力したいところです。

4:
[3:]を発展させて、
YYYY-MM-DD+1 ddd
とか書かれてあれば、翌日の日付をフォーマット付きで出力したいです。

YYYY-MM
  DD ddd
  DD+1 ddd
  DD+2 ddd

こんなテキストを選択して実行したら、今日、明日、明後日、の日付が挿入されると、いいのではないかなと思ったりするのです。

実行すると、こんな感じのテキストに変換されるってことです。

2023-12
  20 Wed
  21 Thu
  22 Fri

5:
過去日付の文字列をフォーマット変えれたらいいかも。
2020/11/03
を、選択して実行したら、
03 Nov 2020 x曜日
みたいなのに変更できたら、ちょっといいかなと。

1,2,3は、難易度はたぶん高くないのですが、4は結構いろいろ考えることがあり、だいたい実装イメージできてきているのですが、実際作ってみないとできるかどうかわからずです。

5は、結構面倒かなあと思ったりしています。
読み取れたりしても、動作が、今も高速ではないのですが、読み取りフォーマットをいろいろやると、動作が遅いかもしれないかなと思ったりします。

3,4は、自分が使いたいので実装したい気持ちあるのですが、1はさほどでもなく、2も別にいらなくて、

5は、あったらいいかも、程度の思いつきだけですが、過去日付に対して、曜日を記入したいとか、そういう機能なんて誰も、自分ですら、求めていないのではないかと、そんな迷いもあります。

そもそも、実装できるかな...

そんな思いで日々過ごしています。

コードのちょっとした説明

コードの中から、ちょっとこうやったらうまくいった、ということを書いておきます。

関数化していて、再利用バッチリ、読みやすさバッチリのコードになっている気がしているので、何か参考になる方は参考にしてください。

insertText とか registerCommand とか getEditor とか commandQuickPick など、コードを読みやすくする工夫しています。日付系とか他ライブラリ系はそれなりにまとまっています。

肝というか、今回の機能拡張のコツの部分は、出力した文字列を選択し、次に機能拡張したときに、出力した文字と同じものが選択されていたら、別の文字列を出力する、というところ

const insertBuffer = {
  text: ``,
  formatIndex: -1,
  dateType: ``,
  date: new Date(),
}

ここで、出力した文字列を保持し、その時に選択していたフォーマットのIndexとタイプ(日付か時刻か日時か)と
その時の時刻をバッファに保持しています。

それを次のコードで、判定していて
選択テキストが、前回出力内容と同じだったら、次のフォーマットを選んで出力してね

と書いています。

  const insertDateTime = (dateType) => {
    if (!([`Date`, `DateTime`, `Time`].includes(dateType))) {
      throw new Error(`insertDateTimeCommand insertType`);
    }
    const editor = getEditor(); if (!editor) { return; }
    const dateFormatArray = getDateFormatArray(`${dateType}Format`);
    if (dateFormatArray.length === 0) { return; }

    const selectedText = getSelectedText(editor)[0] ?? ``;
    if (
      insertBuffer.dateType === dateType
      && insertBuffer.text === selectedText
    ) {
      insertBuffer.formatIndex += 1;
      if (dateFormatArray.length === insertBuffer.formatIndex) {
        insertBuffer.formatIndex = 0;
      }
    } else {
      insertBuffer.formatIndex = 0;
      insertBuffer.date = new Date();
    }

    _insertDateTime(
      dateType, insertBuffer.date, insertBuffer.formatIndex,
      dateFormatArray[insertBuffer.formatIndex]
    )
  }

function activate の外側に変数を持たせるだけで、前回機能拡張起動時の状態ってバッファできるんですね。いろいろ応用効きそう。

例えば、最近、よく紹介される、change-case の機能拡張とか、メニューでフォーマット選ぶタイプですが、これを、1ショートカットキーだけでどんどん切り替わるようにしておくと、ショートカットキーを複数設定しなくても、いろんな形式で文字列変換できるんじゃないかな、

そういう機能拡張つくるのもいいかもなあ、と、そんなことを思ったりしている日々を過ごしています。

終わりに

この機能拡張とか、別の機能拡張でもいいんですが、

「何かこういうのがあったら便利なのに、誰か作ってくれねーかな」と思ったら、要望ください。

ピンときたら作りますが、ピンとこなかったら作りません、😛

が、
ピンと来なくても、お金を十分にくれたら、遠慮なく作ります。😅

お金はないけど、要望がある人は、いろいろ学んで自分で機能拡張つくると楽しいですよ。