【Visual Studio Code】Vscodeの拡張機能を作ってみた

はじめに

身近なところにVscodeの拡張機能がたくさんあったので、
自分でも作ってみようと思いました。

作り方

まず拡張機能の雛形を使います

$ npm install -g yo generator-code
$ yo code

? What's the name of your extension? 
# 拡張機能の表示名
? What's the identifier of your extension?
# 拡張機能のID
? What's the name of your extension?
# 拡張機能の説明
? Initialize a git repository? (Y/n)
# Gitのリポジトリを初期化するかどうか

src/extention.tsをこんな感じにしました

extention.ts

import { randomInt } from 'crypto';
import * as vscode from 'vscode';

function convertHandNameToInt(hand:string){
	if (hand === "グー"){
		return 0;
	}else if (hand === "チョキ"){
		return 1;
	}else if (hand === "パー"){
		return 2;
	}else{
		return null;
	}
}

function convertIntToHandName(hand:number){
	if (hand === 0){
		return "グー";
	}else if (hand === 1){
		return "チョキ";
	}else if (hand === 2){
		return "パー";
	}
}

function win(ennemy_hand:number){
	vscode.window.showInformationMessage(`勝ち！相手の手は ${convertIntToHandName(ennemy_hand)} でした！`);
}

function draw(ennemy_hand:number){
	vscode.window.showInformationMessage(`あいこ！相手の手は ${convertIntToHandName(ennemy_hand)} でした！`);
}

function lose(ennemy_hand:number){
	vscode.window.showInformationMessage(`負け！相手の手は ${convertIntToHandName(ennemy_hand)} でした！`);
}

/* 
	グー: 0
	チョキ:1
	パー:2
*/

export function activate(context: vscode.ExtensionContext) {
	let statusBarButton = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
	statusBarButton.text = '✊ジャンケン';
	statusBarButton.command = 'jankencode.doJanken';
	statusBarButton.show();

	const disposable = vscode.commands.registerCommand('jankencode.doJanken', () => {
		let ennemy_hand = randomInt(3);
		vscode.window.showQuickPick(["グー","チョキ","パー"])
		.then(selectedCommand => {
			if (selectedCommand){
				let my_hand = convertHandNameToInt(selectedCommand);
				if (my_hand === ennemy_hand){
					draw(ennemy_hand);
				}else{
					if (my_hand === 0){
						if (ennemy_hand === 1){
							win(ennemy_hand);
						}else{
							lose(ennemy_hand);
						}
					}else if (my_hand === 1){
						if (ennemy_hand === 0){
							lose(ennemy_hand);
						}else{
							win(ennemy_hand);
						}
					}else if (my_hand === 2){
						if (ennemy_hand === 0){
							win(ennemy_hand);
						}else{
							lose(ennemy_hand);
						}
					}
				}
			};
		});
	});

	context.subscriptions.push(statusBarButton);
	context.subscriptions.push(disposable);
}

export function deactivate() {}

じゃんけんのコードです。

おわりに

また他のものも作ってみようと思います。