SwissknifeというVSCode拡張機能の紹介

個人ブログを開発してたら拡張機能が欲しくなりました。

日付や Lorem Ipsum を挿入したり、VS Code のスクリーンショットを撮影したい。なんならある程度カスタマイズできたらいいなぁ。

調べたらいいかんじの拡張機能が提供されていたのでご紹介いたします。

https://marketplace.visualstudio.com/items?itemName=luisfontes19.vscode-swissknife

https://github.com/luisfontes19/vscode-swissknife?tab=readme-ov-file

対象者

• テキスト生成系の拡張機能を探してる人
• VS Code 使ってる
• npm 使える
• JavaScript なんとなくわかる
• Windows11

痒いところに手が届く機能がたくさん

Ctrl+Shift+9を押すと Swissknife のコマンドパレットが開きます。

• Swissknife のコマンドパレットを開くのはCtrl+Shift+9
• VS Code のコマンドパレットを開くのはCtrl+Shift+P

コマンドを選択してからEnterを押して実行します。以下はコマンドの一部です。

• テキスト生成
  • パスワード
  • UUID
  • Lorem Ipsum
  • 日付
• コードの変換
  • RGB（a）<-> Hex
  • JSON <-> YAML
• コードのスクリーンショット
• 機能追加 🔗
• ほかにも 🔗

好きに機能を追加できる

スクリプトを指定のフォルダーに置くことで機能を拡張できます。機能は Swissknife のコマンドパレットに追加されます。

指定のフォルダーは%APPDATA%\Code\User\globalStorage\luisfontes19.vscode-swissknife\scriptsです。

VS Code 上でCtrl+Shift+P -> Swissknife: Open Swissknife user scripts folderと入力すると、自動で開きます。

VS Code API を使える

Swissknife にはNew Swissknife Script (JS)およびNew Swissknife Script (TS)コマンドがあります。

これらのコマンドで、Swissknife を拡張するためのテンプレートスクリプトを入力できます。

以下はテンプレートスクリプト内の一部コメントを、DeepL で日本語翻訳したものです。

拡張するときは、cb（コールバック）関数引数のcontextを通して、あなたを助けるいくつかのメソッドを提供します。
・insertRoutine(cb)は コールバック関数で返された文字列をエディターのカーソル位置に挿入します。

・replaceRoutine(cb)はコールバック関数で返された文字列をエディターに送信します。
テキストが選択されていなければすべてのコードを置き換えます。
複数のテキストが選択されていれば、それぞれのカーソル位置に送信し、
コールバック関数で返された文字列に変換します。

・informationRoutine(cb)はコールバック関数で返された文字列をエディターに送信します。
テキストが選択されていなければ、文字列を一回送信します。
複数のテキストが選択されていれば、複数回文字列を送信し、
コールバック関数で返された文字列をインフォメーションボックスで表示します。

・vscode はVS Code の API です。

・modules は、scripts および lib フォルダー内のすべての JS モジュールの配列です。
これを使って組み込みのスクリプトから関数を呼び出せます。
つまり、コードロジックを再利用できます。
使用例: context.modules.passwords.generateSecureCharCode()

コールバック関数のテンプレート

exports.insertRoutineCallback = async (context) => {
  return new Promise((resolve, reject) => {
    resolve("カーソル位置に文字列を挿入");
  });
};

exports.replaceRoutineCallback = async (data, context) => {
  return new Promise((resolve, reject) => {
    resolve(`
    ・範囲選択された文字列を置き換える
    ・選択がなければファイル全体を置き換える
    ・引数の data は範囲選択中の文字列
    ・選択がなければ引数の data は呼び出したファイルの全文
    `);
  });
};

exports.informationRoutineCallback = async (data, context) => {
  return new Promise((resolve, reject) => {
    resolve(`
    ・インフォメーションボックスで文字列を表示する
    ・引数は replaceRoutineCallback と一緒
    `);
  });
};

令和何年かを表示するコマンドを追加してみる（JS）

指定のフォルダーを VS Code で開き、scripts.js ファイルをつくります。ファイル名は何でもいいです。

以下は、今年が令和何年かをインフォメーションボックスで表示するコードです。

scripts.js

Object.defineProperty(exports, "__esModule", { value: true });

exports.showJPYear = async (context) => {
  return new Promise((resolve, reject) => {
    resolve(`今年は令和${new Date().getFullYear() - 2018}年です。`);
  });
};

const scripts = [
  {
    title: "Show year in Japanese",
    detail: "Show year in Japanese by information box.",
    cb: (context) => context.informationRoutine(exports.showJPYear),
  },
];

exports.default = scripts;

コードを追加したらCtrl+Shift+P -> Reload Swissknife scriptsと入力し、新コマンドを登録する必要があります。

コマンド登録後にCtrl+Shfit+9 -> Show year in Japaneseと入力します。エディター右下にインフォメーションボックスが表示され、今年が令和何年かを教えてくれます。

令和何年かが表示される

ブラウザを検索するコマンドを追加してみる（TS）

TypeScript を使う場合は、コンパイルして JavaScript ファイルにする必要があります。

ここでは VS Code からブラウザ検索をするコマンドを追加します。以下は作業手順です。

ワークスペースをつくる

1. Ctrl+Shift+P -> Swissknife: Open Swissknife user scripts folderと入力してフォルダーを開く
2. 開いたフォルダーを VS Code で開く
3. Ctrl+@でターミナルを開く
4. 以下のコマンドを入力。フォルダー名の「swissknife-extension」は任意

npm を初期化

mkdir swissknife-extension && cd swissknife-extension && npm init

package.json

{
  "name": "swissknife-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

型定義ファイルをインストール

1. 以下のコマンドを入力

TypeScript と VS Code の型定義ファイルをインストール

npm i -D typescript @types/vscode && touch index.ts

2. Swissknife の型定義ファイル 🔗をダウンロード

3. ダウンロードした型定義ファイルを swissknife-extension フォルダー下に配置
   

4. コンパイル設定を tsconfig.json で定義するため、以下のコマンドを入力

   tsconfig.json をつくる

   ./node_modules/.bin/tsc --init
   

5. 設定を更新

   tsconfig.json

   {
   + "files": ["index.ts"],
     "compilerOptions": {
       "target": "ES2016",
   +   "lib": ["ES2022", "DOM"],
       "module": "commonjs",
   +   "outDir": "../",
       "esModuleInterop": true,
       "forceConsistentCasingInFileNames": true,
       "strict": true,
       "skipLibCheck": true
     }
   }
   

コードを書く

1. index.ts を開き、Ctrl+Shift+9 -> New Swissknife Script (TS)と入力
2. import を修正

index.ts

- import { IScript, ISwissKnifeContext } from '../Interfaces';
+ import type { IScript, ISwissKnifeContext } from './Interfaces';

3. 以下は、ブラウザ検索をするコード

index.ts

import type { IScript, ISwissKnifeContext } from "./Interfaces";

export const webSearch = async (context: ISwissKnifeContext) => {
  const pickedSearchEngines = await context.vscode.window.showQuickPick(
    ["google", "bing"],
    {
      title: "検索エンジン",
      placeHolder: "検索エンジンを選択",
      canPickMany: true,
    }
  );

  const searchWord = await context.vscode.window.showInputBox({
    title: "検索",
    placeHolder: "検索する語句を入力してください",
    prompt: "Insert a search word",
  });

  if (pickedSearchEngines && searchWord) {
    pickedSearchEngines.forEach((searchEngine) => {
      const terminal = context.vscode.window.activeTerminal;

      const url = new URL("search", `https://www.${searchEngine}.com`);
      url.searchParams.append("q", searchWord.trim());

      if (terminal) {
        terminal.sendText(`start ${url}`, true);
      } else {
        context.vscode.window
          .createTerminal("search")
          .sendText(`start ${url}`, true);
      }
    });
    context.vscode.window.showInformationMessage("検索しました");
  } else {
    context.vscode.window.showErrorMessage("検索しませんでした");
  }
};
const scripts: IScript[] = [
  {
    title: "Web Search",
    detail: "Search web by selected engine and input word.",
    cb: webSearch,
  },
];
export default scripts;

コンパイルして指定のフォルダーに置く

1. 以下のコマンドを入力

TypeScript をコンパイル

./node_modules/.bin/tsc --build

2. 親階層に index.js ファイルが生成される
3. Ctrl+Shift+P -> Reload Swissknife scriptsと入力して、新コマンドを登録する

Ctrl+Shfit+9 -> Web Searchと入力します。エディター上に入力欄が表示され、進めるとブラウザ検索をしてくれます。

ブラウザ検索をする

機能追加手順の振り返り

コールバック関数については以下のとおりです。[]の中は自身で決めます。

• cb:(context) => context.[insertRoutine|replaceRoutine|informationRoutine](exports.[doSomething])
  • insertRoutine(context)はカーソル位置に文字列を挿入する
  • replaceRoutine(text, context)は範囲選択中の文字列を置換する
  • informationRoutine(context)はインフォメーションボックスを表示する
• 上記以外の処理をする場合はcb:(context) => exports.[doSomething]などする

参考

• Swissknife を機能拡張する 🔗
• VS Code API 🔗