Table of Contents
VSCode – VS Code Extension 개발하기
프로젝트 초기화 툴 설치
아래 명령을 통해 프로젝트 템플릿을 생성하는 툴을 설치한다.
npm install -g yo generator-code
프로젝트 초기화
yo code
몇가지 질문에 답해주면 템플릿이 자동생성된다.
사이드바 생성
VSCode 의 탐색기가 표시되는 위치에 뷰를 생성할 수 있다.
아래와 같이 뷰컨테이너와 뷰를 생성한다.
browseclipboard-history
컨테이너에 대해, browseclipboard.history
뷰를 생성한다.
package.json
{
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "browseclipboard-history",
"title": "Browse Clipboard",
"icon": "resources/browseclipboard-icon.png"
}
]
},
"views": {
"browseclipboard-history": [
{
"id": "browseclipboard.history",
"name": "Browse Clipboard"
}
]
}
}
}
데이타 생성
browseclipboard.history
뷰를 초기화한다.
아직 데이타를 초기화하는 코드가 없다.
extension.ts
import * as vscode from 'vscode';
import { commands, ExtensionContext, TreeItem, TreeItemCollapsibleState, window } from 'vscode';
var clipboardList: Clipboard[] = [];
export function activate(context: vscode.ExtensionContext) {
function createTreeView() {
vscode.window.createTreeView('browseclipboard.history', {
treeDataProvider: new ClipboardProvider()
});
}
}
export class ClipboardProvider implements vscode.TreeDataProvider<Clipboard> {
constructor() { }
getTreeItem(element: Clipboard): TreeItem {
return element;
}
getChildren(element?: Clipboard): Thenable<Clipboard[]> {
const temp = Object.assign([], clipboardList);
return Promise.resolve(temp.reverse());
}
}
class Clipboard extends TreeItem {
constructor(
public readonly label: string,
public readonly collapsibleState: TreeItemCollapsibleState
) {
super(label, collapsibleState);
this.contextValue = "browseClipboardItem:";
}
}
커맨드 및 단축키 생성
browseclipboard.copy
커맨드를 생성한다.
export function activate(context: vscode.ExtensionContext) {
const config = vscode.workspace.getConfiguration("browseclipboard");
let maximumClips = config.get('maximumClips', 200);
function createTreeView() {
vscode.window.createTreeView('browseclipboard.history', {
treeDataProvider: new ClipboardProvider()
});
}
async function addClipboardItem() {
let copied = await vscode.env.clipboard.readText();
copied = copied.replace(/\n/gi, "↵");
const item = new Clipboard(copied, TreeItemCollapsibleState.None);
if (clipboardList.find(c => c.label === copied)) {
clipboardList = clipboardList.filter(c => c.label !== copied);
}
clipboardList.push(item);
if (maximumClips > 0) {
clipboardList = clipboardList.reverse().slice(0, maximumClips).reverse();
}
}
commands.registerCommand('browseclipboard.copy', () => {
commands.executeCommand("editor.action.clipboardCopyAction").then(() => {
addClipboardItem().then(() => {
createTreeView();
});
});
});
}
browseclipboard.copy
커맨드를 등록하고, 단축키를 설정한다.
{
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "browseclipboard-history",
"title": "Browse Clipboard",
"icon": "resources/browseclipboard-icon.png"
}
]
},
"views": {
"browseclipboard-history": [
{
"id": "browseclipboard.history",
"name": "Browse Clipboard"
}
]
},
"commands": [
{
"command": "browseclipboard.copy",
"title": "Copy"
}
],
"keybindings": [
{
"command": "browseclipboard.copy",
"key": "ctrl+alt+c",
"mac": "cmd+alt+c",
"when": "editorTextFocus"
}
]
}
}
배포 툴 설치
npm i vsce -g
배포 패키징
vsce package