キャレット位置にランダムなIDを挿入するVSCodeマクロ

この記事は公開から3年以上経過しています。

VSCode Macros拡張を使い、エディター上のキャレット位置にランダム文字列の挿入を行うシンプルなマクロ関数サンプルを作ってみましたので紹介します(npmライブラリ使用版とjavascriptのみ版の2本)。

VSCode Macros拡張の導入方法や使い方についてはこちらをご参照ください。

動作イメージ

マクロを実行すると現在のカーソル位置に英語+数字の8桁のランダムIDを挿入します。
javascriptのみ版は疑似乱数の精度が低く、大量のランダムIDを生成するとIDが衝突する確率が高くなるため注意が必要です。

仕様：

マルチカーソルには非対応です(マルチカーソル対応方法は後述)。
エラー処理などは殆ど行っていません。

＜npmライブラリ使用版＞

＜javascriptのみ版＞

マクロのサンプルソースコード

npmライブラリ使用版

ランダムIDの生成にnpmライブラリを使用します。パラメータ設定によりIDで使用する文字や文字数が指定できます。

npmライブラリのインストール手順

マクロディレクトリにpackage.jsonが存在しない場合は、カレントをマクロディレクトリに移動して以下のコマンドでVSCodeMacrosで利用するプライベートnpmライブラリ用のpackage.jsonを生成します(npmライブラリをグローバルインストールする場合は不要)。
```
echo '{"private":true}'  >> package.json
```
※Windowsのコマンドプロンプト(cmd.exe)の場合はシングルクォート'は不要。
以下のコマンドでcrypto-random-stringモジュールをインストールします。
```
npm i crypto-random-string
```

インストールしたモジュールを使いマクロを記述します。

const vscode = require('vscode');
const crptrndstr = require('crypto-random-string');

/**
 * マクロコンフィギュレーション(環境に合わせてお好みで設定)
 */
module.exports.macroCommands = {
  ランダムID: {
    no: 1,
    func: insertRandomId,
  },
};

function insertRandomId() {
  const editor = vscode.window.activeTextEditor;
  if (!editor) {
    return 'Editor is not opening.';
  }

  const rndStr = crptrndstr({
    length: 8,
    type: 'alphanumeric',
  });

  editor.edit((editBuilder) => {
    editBuilder.insert(editor.selection.active, rndStr);
  });
}

GitHub Gist

javascriptのみ版

javascriptのMath.random()を使用してランダムIDを生成します。乱数の範囲が狭いため生成されるランダムIDの衝突に注意が必要です。

const vscode = require('vscode');

module.exports.macroCommands = {
  ランダムID: {
    no: 1,
    func: insertRandomId,
  },
};

function insertRandomId() {
  const editor = vscode.window.activeTextEditor;
  if (!editor) {
    return 'Editor is not opening.';
  }

  const rndStr = Math.random().toString(36).slice(-8);

  editor.edit((editBuilder) => {
    editBuilder.insert(editor.selection.active, rndStr);
  });
}

GitHub Gist

マクロサンプルはシングルカーソルですが、マルチカーソルで挿入を行いたい場合は

editor.edit((editBuilder) => {
  for (const selection of editor.selections) {
    editBuilder.insert(selection.active, /* ランダム文字列 */);
  }
})

のようにselectionsを反復処理することで対応可能です。

参考ウェブサイトなど

npm
crypto-random-string
stackoverflow
Generate random password string with requirements in javascript

以上です。