VSCode Extension 개발 3 - Clock Extension, Status Bar Item createStatusBarItem context.subscriptions.push

Visual Studio Code의 Status Bar(상태 표시줄)에 시계를 만들어 추가하겠습니다.

 

 

시계 Extension 개발

 

1. Visual Studio Code의 메뉴 Terminal(터미널)에서 yo code 명령어로 개발할 시계 Extension 정보를 입력하여 Node 프로젝트를 생성합니다. (yo code 명령어에 대한 자세한 설명은 https://carrotweb.tistory.com/277를 참고하시기 바랍니다.)

PS C:\workspaces\webstudys\extension1> yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? Clock
? What's the identifier of your extension? clock
? What's the description of your extension? Clock
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? No
? Which package manager to use? npm

 

2. package.json 파일을 오픈하여 "command"를 "clock.helloWorld"에서 "clock.MyClock"으로 변경하고 "title"를 "Hello World"에서 "My Clock"으로 변경하고 저장합니다. 그러면 명령 팔레트(Command Palette)에서 "My Clock"으로 실행할 수 있습니다.

"contributes": {
  "commands": [{
    "command": "clock.MyClock",
    "title": "My Clock"
  }]
},

 

3. extension.js 파일을 오픈하여 "vscode.commands.registerCommand"의 "clock.helloWorld"를 "clock.MyClock"으로 변경합니다.

// The command has been defined in the package.json file
// Now provide the implementation of the command with  registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('clock.MyClock', function () {

그리고 메시지가 노출되는 부분은 주석처리합니다.

// Display a message box to the user
//vscode.window.showInformationMessage('Hello World from Clock!');

 

Status Bar(상태 표시줄)에 아이템을 추가하기 위해서는 StatusBarItem(상태 표시줄 아이템)를 생성해야 합니다.

StatusBarItem은 createStatusBarItem 함수로 생성할 수 있습니다.

createStatusBarItem(alignment?: StatusBarAlignment, priority?: number): StatusBarItem

createStatusBarItem 함수의 첫 번째 파라미터는 Status Bar(상태 표시줄)에서의 StatusBarItem(상태 표시줄 아이템)의 위치를 설정합니다. 위치는 왼쪽(vscode.StatusBarAlignment.Left) 또는 오른쪽(vscode.StatusBarAlignment.Right)으로 설정할 수 있습니다. 두 번째 파라미터는 StatusBarItem(상태 표시줄 아이템)의 우선순위입니다. 우선순위는 값이 클수록 왼쪽에 위치하게 됩니다.

 

StatusBarItem(상태 표시줄 아이템)을 왼쪽으로 우선순위 값을 크게 줄 경우

StatusBarItem(상태 표시줄 아이템)을 왼쪽으로 우선순위 값을 낮게 줄 경우

StatusBarItem(상태 표시줄 아이템)을 오른쪽으로 우선순위 값을 크게 줄 경우

StatusBarItem(상태 표시줄 아이템)을 오른쪽으로 우선순위 값을 낮게 줄 경우

 

우리는 StatusBarItem(상태 표시줄 아이템)을 오른쪽으로 맨 마지막에 위치하게 우선순위 값을 낮게 주겠습니다.

// 상태 표시줄 아이템 생성 - 오른쪽 마지막으로 배정
const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 0);

그리고 생성된 statusBarItem에 시간과 분이 표시되게 하고 말풍선(ToolTip, 툴팁)에는 시간, 분, 초가 표시되게 합니다.

statusBarItem.text = "12:00";
statusBarItem.tooltip = "12:00:00";

그리고 Status Bar(상태 표시줄)에 StatusBarItem(상태 표시줄 아이템)이 표시되게 합니다.

// 상태 표시줄 아이템 표시
statusBarItem.show();

// 상태 표시줄에 추가
context.subscriptions.push(statusBarItem);

 

4. Visual Studio Code의 메뉴 Run(실행) > Start Debugging(디버깅 시작)를 클릭하거나 기능키 F5 버튼을 누릅니다. 그리고 새로운 Visual Studio Code의 메뉴 View > Command Palette... 를 클릭하거나 Ctrl + Shift + P를 눌러 명령 팔레트(Command Palette)를 실행시킨 후 입력란에서 "My Clock"를 입력하고 검색된 결과에서 "My Clock를 선택합니다.

그러면 Status Bar(상태 표시줄)의 오른쪽에 시간과 분이 표시되는 것을 확인할 수 있습니다.

 

오픈된 Visual Studio Code를 닫습니다.

 

 

StatusBarItem(상태 표시줄 아이템)에는 현재 시간의 시간과 분이 표시되게 하고 말풍선(ToolTip, 툴팁)에는 현재 시간의 시간, 분, 초가 표시되게 처리하겠습니다.

 

5. 현재 시간을 표시하는 함수를 생성합니다.

function clock(statusBarItem) {
	// 현재 날짜/시간
	let today = new Date();

	// 현재 시
	let todayHours = today.getHours();
	// 현재 분
	let todayMinutes = today.getMinutes();
	// 현재 초
	let todaySeconds = today.getSeconds();

	let todayString = "";
	if (todayHours < 10) {
		todayString += "0";
	}
	todayString += todayHours + ":";

	if (todayMinutes < 10) {
		todayString += "0";
	}
	todayString += todayMinutes;
	
	statusBarItem.text = todayString;
	
	todayString += ":";
	if (todaySeconds < 10) {
		todayString += "0";
	}
	todayString += todaySeconds;
	
	statusBarItem.tooltip = todayString;
}

그리고 현재 시간을 표시하는 함수가 호출되게 변경합니다.

// 상태 표시줄 아이템 생성 - 오른쪽 마지막으로 배정
const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 0);

// 현재 시간 적용
clock(statusBarItem);

// 상태 표시줄 아이템 표시
statusBarItem.show();

// 상태 표시줄에 추가
context.subscriptions.push(statusBarItem);

 

위의 4번과 같이 디버깅하면 Status Bar(상태 표시줄)의 오른쪽에 현재 시간이 표시되는 것을 확인할 수 있습니다.

 

오픈된 Visual Studio Code를 닫습니다.

 

6. 현재 시간으로 StatusBarItem(상태 표시줄 아이템)에 시간과 분이 표시되게 하고 말풍선(ToolTip, 툴팁)에는 시간, 분, 초가 표시되게 1초마다 현재 시간을 표시하는 함수를 호출하게 변경합니다.

// 상태 표시줄 아이템 생성 - 오른쪽 마지막으로 배정
const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 0);

// 현재 시간 적용
clock(statusBarItem);

// 상태 표시줄 아이템 표시
statusBarItem.show();

// 1초 마다 현재 시간 적용
setInterval(() => {
	clock(statusBarItem);
	}, 1000);

// 상태 표시줄에 추가
context.subscriptions.push(statusBarItem);

위의 4번과 같이 디버깅하면 Status Bar(상태 표시줄)의 오른쪽에 현재 시간이 1초마다 변경되면서 표시되는 것을 확인할 수 있습니다.

 

오픈된 Visual Studio Code를 닫습니다.

 

 

7. StatusBarItem(상태 표시줄 아이템)이 Status Bar(상태 표시줄)에서 구분되게 색상과 배경색을 설정합니다. 테마 색상은 https://code.visualstudio.com/api/references/theme-color를 참고하시기 바랍니다.

// 상태 표시줄 아이템 색상
statusBarItem.color = new vscode.ThemeColor('statusBarItem.warningForeground');
statusBarItem.backgroundColor = new vscode.ThemeColor('statusBarItem.warningBackground');

위의 4번과 같이 디버깅하면 StatusBarItem(상태 표시줄 아이템)의 색상이 변경된 것을 확인할 수 있습니다.