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