【VSCode】ドラッグ&ドロップで画像ファイルをリサイズ・保存する拡張機能を作る

# yo、generator-codeのインストール
npm install -g yo generator-code

# テンプレート作成
yo code

# npxコマンドで実行する場合
npx --package yo --package generator-code -- yo code

# 今回は以下のような形で作成
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? image-resizer
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? image-resizer
# ? What's the description of your extension? Image Resize Tool.
# ? Initialize a git repository? Y
# ? Which bundler to use? unbundled
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

	console.log('Congratulations, your extension "image-resizer" is now active!');

	// Register Command.
	const disposable = vscode.commands.registerCommand('image-resizer.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from image-resizer!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}

・・・略・・・
  "contributes": {
    "commands": [
      {
        "command": "image-resizer.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  ・・・略・・・

import sharp from "sharp";
import * as path from "path";

/**
 * 画像情報
 */
export interface ImageInfo {
    path: string;
    name: string;
    extension: string;
    width: number;
    height: number;
    ratio: number;
}

/**
 * 画像関連ヘルパークラス
 */
export class ImageHelper {
    /**
     * バッファから画像情報取得
     */
    static async loadImageInfo(
        imageBuffer: Buffer,
        filePath: string
    ): Promise<ImageInfo> {
        const fullName = path.basename(filePath);
        const ext = path.extname(fullName).replace(".", "").toLowerCase();
        const name = path.basename(fullName, path.extname(fullName));

        const metadata = await sharp(imageBuffer).metadata();
        if (!metadata.width || !metadata.height) {
            throw new Error("画像サイズ取得に失敗しました");
        }

        return {
            path: filePath,
            name,
            extension: ext,
            width: metadata.width,
            height: metadata.height,
            ratio: metadata.width / metadata.height,
        };
    }

    /**
     * 横幅から比率固定で高さを計算
     */
    static calcHeightByWidth(
        targetWidth: number,
        ratio: number
    ): number {
        return Math.round(targetWidth / ratio)
    }

    /**
     * リサイズしてファイルとして保存
     */
    static async resizeAndSave(options: {
        imageBuffer: Buffer,
        outputPath: string,
        width: number,
        height: number
    }): Promise<void> {
        const { imageBuffer: buffer, outputPath, width, height } = options;

        await sharp(buffer)
            .resize({
                width,
                height: height ?? undefined,
            })
            .toFile(outputPath);
    }
}

import * as vscode from 'vscode';
import * as path from "path";
import { ImageHelper } from './helper/image-helper';

・・・略・・・

/**
 * アクティベート時処理
 * @param context 
 */
export function activate(context: vscode.ExtensionContext) {

	const provider: vscode.DocumentDropEditProvider = {
		async provideDocumentDropEdits(document, _position, dataTransfer, _token) {

・・・略・・・

			// D&Dされたファイルを抽出
			const files: vscode.DataTransferFile[] = [];
			dataTransfer.forEach((item) => {
				const f = item.asFile?.();
				if (f) files.push(f);
			});
			if (files.length === 0) {
				return;
			}

			// 1つ目の画像ファイルを処理対象とする
			const file = files[0];
			if (!file || !file.uri) {
				return;
			}
			const extname = path.extname(file.uri.fsPath || "").toLowerCase();
			if (![".png", ".jpg", ".jpeg", ".gif", ".webp"].includes(extname)) {
				return;
			}

・・・略・・・

			// テキスト挿入
			const insertText = expandTemplate(insertTextFormat, {
				filename: imageInfo.name,
				extension: imageInfo.extension,
				width: getInsertTextWidth(newWidth).toString(),
			});
			return new vscode.DocumentDropEdit(insertText);
		}
	};

	// Providerを登録
	const selector: vscode.DocumentSelector = {
		scheme: "file",
		language: "markdown",
	};
	const disposable = vscode.languages.registerDocumentDropEditProvider(
		selector,
		provider
	);
	context.subscriptions.push(disposable);
}

export function deactivate() { }

{

・・・略・・・

          // VSCode Image Resizer Settings
          "imageResizer.outputImageDir": "c:\\blog\\public\\content",
          "imageResizer.insertTextFormat": "![${filename}{width:${width}px}](/content/${filename}.${extension} \"${filename}\")"
  }
  

・・・略・・・

  "contributes": {
    "title": "Image Resizer",
    "configuration": {
      "properties": {
        "imageResizer.outputImageDir": {
          "type": "string",
          "default": "",
          "description": "Output directory for resized images."
        },
        "imageResizer.insertTextFormat": {
          "type": "string",
          "default": "![${filename}](${filepath})",
          "description": "Format for inserting resized image markdown."
        }
      }
    }
  },

・・・略・・・

・・・略・・・

			// 設定の取得
			const config = vscode.workspace.getConfiguration("imageResizer");
			const outputImageDir = config.get<string>("outputImageDir");
			const insertTextFormat = config.get<string>("insertTextFormat");
			if (!outputImageDir) {
				vscode.window.showErrorMessage("出力先フォルダ 'imageResizer.outputImageDir' を設定してください。");
				return;
			}
			if (!insertTextFormat) {
				vscode.window.showErrorMessage("挿入テキスト形式 'imageResizer.insertTextFormat' を設定してください。");
				return;
			}

・・・略・・・

・・・略・・・

			// 画像情報の取得
			let imageInfo;
			try {
				imageInfo = await ImageHelper.loadImageInfo(
					imageBuffer,
					file.uri.fsPath || file.uri.path
				);
				console.log("[Size] width: ", imageInfo.width, " height: ", imageInfo.height);

			} catch (e) {
				vscode.window.showErrorMessage("画像サイズの取得に失敗しました。");
				console.error(e);
				return;
			}

			// 幅入力メッセージの表示
			const inputWidthString: string | undefined = await vscode.window.showInputBox({
				prompt: "リサイズ後の幅 (px) を入力",
				placeHolder: "例: 600",
				value: imageInfo.width.toString(),
				validateInput: (value: string) => {
					const n = Number(value);
					if (value.trim() === "" || !Number.isInteger(n) || n <= 0) {
						return "正の整数を入力してください";
					}
					return null;
				},
			});
			if (inputWidthString === undefined) {
				return;
			}

・・・略・・・

・・・略・・・

			// 画像リサイズ・保存
			const newWidth: number = Number(inputWidthString);
			const newHeight: number = ImageHelper.calcHeightByWidth(
				newWidth,
				imageInfo.ratio
			);
			try {
				const outputPath = path.join(outputImageDir, imageInfo.name + extname);
				ImageHelper.resizeAndSave({
					imageBuffer: imageBuffer,
					outputPath,
					width: newWidth,
					height: newHeight,
					extension: imageInfo.extension
				});
				console.log("[ReSize] width: ", newWidth, " height: ", newHeight);
				console.log(`[Output] ${outputPath}`);

			} catch (e) {
				vscode.window.showErrorMessage("画像ファイルの保存に失敗しました。");
				console.error(e);
				return;
			}

・・・略・・・