{"id":8169,"date":"2023-12-30T18:06:09","date_gmt":"2023-12-30T09:06:09","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=8169"},"modified":"2023-12-26T09:58:07","modified_gmt":"2023-12-26T00:58:07","slug":"vscode-vs-code-extension-%ea%b0%9c%eb%b0%9c%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=8169","title":{"rendered":"VSCode &#8211; VS Code Extension \uac1c\ubc1c\ud558\uae30"},"content":{"rendered":"<h1>VSCode &#8211; VS Code Extension \uac1c\ubc1c\ud558\uae30<\/h1>\n<p><a href=\"https:\/\/medium.com\/frontend-developers\/vs-code-extension-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0-ae933343d2b5\">\ucc38\uc870<\/a><\/p>\n<p><a href=\"https:\/\/github.com\/Digoro\/vscode.clipboard\">\ucc38\uc870<\/a><\/p>\n<p><a href=\"https:\/\/github.com\/skyer9\/vscode-clipboard-history-extension\">\ucc38\uc870<\/a><\/p>\n<h2>\ud504\ub85c\uc81d\ud2b8 \ucd08\uae30\ud654 \ud234 \uc124\uce58<\/h2>\n<p>\uc544\ub798 \uba85\ub839\uc744 \ud1b5\ud574 \ud504\ub85c\uc81d\ud2b8 \ud15c\ud50c\ub9bf\uc744 \uc0dd\uc131\ud558\ub294 \ud234\uc744 \uc124\uce58\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-bash\">npm install -g yo generator-code<\/code><\/pre>\n<h2>\ud504\ub85c\uc81d\ud2b8 \ucd08\uae30\ud654<\/h2>\n<pre><code class=\"language-bash\">yo code<\/code><\/pre>\n<p>\uba87\uac00\uc9c0 \uc9c8\ubb38\uc5d0 \ub2f5\ud574\uc8fc\uba74 \ud15c\ud50c\ub9bf\uc774 \uc790\ub3d9\uc0dd\uc131\ub41c\ub2e4.<\/p>\n<h2>\uc0ac\uc774\ub4dc\ubc14 \uc0dd\uc131<\/h2>\n<p>VSCode \uc758 \ud0d0\uc0c9\uae30\uac00 \ud45c\uc2dc\ub418\ub294 \uc704\uce58\uc5d0 \ubdf0\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n<p>\uc544\ub798\uc640 \uac19\uc774 \ubdf0\ucee8\ud14c\uc774\ub108\uc640 \ubdf0\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n<p><code>browseclipboard-history<\/code> \ucee8\ud14c\uc774\ub108\uc5d0 \ub300\ud574, <code>browseclipboard.history<\/code> \ubdf0\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n<p>package.json<\/p>\n<pre><code class=\"language-json\">{\n  &quot;contributes&quot;: {\n    &quot;viewsContainers&quot;: {\n            &quot;activitybar&quot;: [\n                {\n                    &quot;id&quot;: &quot;browseclipboard-history&quot;,\n                    &quot;title&quot;: &quot;Browse Clipboard&quot;,\n                    &quot;icon&quot;: &quot;resources\/browseclipboard-icon.png&quot;\n                }\n            ]\n        },\n    &quot;views&quot;: {\n            &quot;browseclipboard-history&quot;: [\n                {\n                    &quot;id&quot;: &quot;browseclipboard.history&quot;,\n                    &quot;name&quot;: &quot;Browse Clipboard&quot;\n                }\n            ]\n        }\n    }\n}<\/code><\/pre>\n<h2>\ub370\uc774\ud0c0 \uc0dd\uc131<\/h2>\n<p><code>browseclipboard.history<\/code> \ubdf0\ub97c \ucd08\uae30\ud654\ud55c\ub2e4.<br \/>\n\uc544\uc9c1 \ub370\uc774\ud0c0\ub97c \ucd08\uae30\ud654\ud558\ub294 \ucf54\ub4dc\uac00 \uc5c6\ub2e4.<\/p>\n<p>extension.ts<\/p>\n<pre><code class=\"language-ts\">import * as vscode from &#039;vscode&#039;;\nimport { commands, ExtensionContext, TreeItem, TreeItemCollapsibleState, window } from &#039;vscode&#039;;\n\nvar clipboardList: Clipboard[] = [];\n\nexport function activate(context: vscode.ExtensionContext) {\n\n    function createTreeView() {\n        vscode.window.createTreeView(&#039;browseclipboard.history&#039;, {\n            treeDataProvider: new ClipboardProvider()\n        });\n    }\n}\n\nexport class ClipboardProvider implements vscode.TreeDataProvider&lt;Clipboard&gt; {\n    constructor() { }\n\n    getTreeItem(element: Clipboard): TreeItem {\n        return element;\n    }\n\n    getChildren(element?: Clipboard): Thenable&lt;Clipboard[]&gt; {\n        const temp = Object.assign([], clipboardList);\n        return Promise.resolve(temp.reverse());\n    }\n}\n\nclass Clipboard extends TreeItem {\n    constructor(\n        public readonly label: string,\n        public readonly collapsibleState: TreeItemCollapsibleState\n    ) {\n        super(label, collapsibleState);\n        this.contextValue = &quot;browseClipboardItem:&quot;;\n    }\n}<\/code><\/pre>\n<h2>\ucee4\ub9e8\ub4dc \ubc0f \ub2e8\ucd95\ud0a4 \uc0dd\uc131<\/h2>\n<p><code>browseclipboard.copy<\/code> \ucee4\ub9e8\ub4dc\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-ts\">export function activate(context: vscode.ExtensionContext) {\n    const config = vscode.workspace.getConfiguration(&quot;browseclipboard&quot;);\n    let maximumClips = config.get(&#039;maximumClips&#039;, 200);\n\n    function createTreeView() {\n        vscode.window.createTreeView(&#039;browseclipboard.history&#039;, {\n            treeDataProvider: new ClipboardProvider()\n        });\n    }\n\n    async function addClipboardItem() {\n        let copied = await vscode.env.clipboard.readText();\n        copied = copied.replace(\/\\n\/gi, &quot;\u21b5&quot;);\n        const item = new Clipboard(copied, TreeItemCollapsibleState.None);\n\n        if (clipboardList.find(c =&gt; c.label === copied)) {\n            clipboardList = clipboardList.filter(c =&gt; c.label !== copied);\n        }\n\n        clipboardList.push(item);\n        if (maximumClips &gt; 0) {\n            clipboardList = clipboardList.reverse().slice(0, maximumClips).reverse();\n        }\n    }\n\n    commands.registerCommand(&#039;browseclipboard.copy&#039;, () =&gt; {\n        commands.executeCommand(&quot;editor.action.clipboardCopyAction&quot;).then(() =&gt; {\n            addClipboardItem().then(() =&gt; {\n                createTreeView();\n            });\n        });\n    });\n}<\/code><\/pre>\n<p><code>browseclipboard.copy<\/code> \ucee4\ub9e8\ub4dc\ub97c \ub4f1\ub85d\ud558\uace0, \ub2e8\ucd95\ud0a4\ub97c \uc124\uc815\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-json\">{\n  &quot;contributes&quot;: {\n    &quot;viewsContainers&quot;: {\n            &quot;activitybar&quot;: [\n                {\n                    &quot;id&quot;: &quot;browseclipboard-history&quot;,\n                    &quot;title&quot;: &quot;Browse Clipboard&quot;,\n                    &quot;icon&quot;: &quot;resources\/browseclipboard-icon.png&quot;\n                }\n            ]\n        },\n    &quot;views&quot;: {\n            &quot;browseclipboard-history&quot;: [\n                {\n                    &quot;id&quot;: &quot;browseclipboard.history&quot;,\n                    &quot;name&quot;: &quot;Browse Clipboard&quot;\n                }\n            ]\n        },\n    &quot;commands&quot;: [\n      {\n        &quot;command&quot;: &quot;browseclipboard.copy&quot;,\n        &quot;title&quot;: &quot;Copy&quot;\n      }\n    ],\n    &quot;keybindings&quot;: [\n            {\n                &quot;command&quot;: &quot;browseclipboard.copy&quot;,\n                &quot;key&quot;: &quot;ctrl+alt+c&quot;,\n                &quot;mac&quot;: &quot;cmd+alt+c&quot;,\n                &quot;when&quot;: &quot;editorTextFocus&quot;\n            }\n        ]\n  }\n}<\/code><\/pre>\n<h2>\ubc30\ud3ec \ud234 \uc124\uce58<\/h2>\n<pre><code class=\"language-bash\">npm i vsce -g<\/code><\/pre>\n<h2>\ubc30\ud3ec \ud328\ud0a4\uc9d5<\/h2>\n<pre><code class=\"language-bash\">vsce package<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>VSCode &#8211; VS Code Extension \uac1c\ubc1c\ud558\uae30 \ucc38\uc870 \ucc38\uc870 \ucc38\uc870 \ud504\ub85c\uc81d\ud2b8 \ucd08\uae30\ud654 \ud234 \uc124\uce58 \uc544\ub798 \uba85\ub839\uc744 \ud1b5\ud574 \ud504\ub85c\uc81d\ud2b8 \ud15c\ud50c\ub9bf\uc744 \uc0dd\uc131\ud558\ub294 \ud234\uc744 \uc124\uce58\ud55c\ub2e4. npm install -g yo generator-code \ud504\ub85c\uc81d\ud2b8 \ucd08\uae30\ud654 yo code \uba87\uac00\uc9c0 \uc9c8\ubb38\uc5d0 \ub2f5\ud574\uc8fc\uba74 \ud15c\ud50c\ub9bf\uc774 \uc790\ub3d9\uc0dd\uc131\ub41c\ub2e4. \uc0ac\uc774\ub4dc\ubc14 \uc0dd\uc131 VSCode \uc758 \ud0d0\uc0c9\uae30\uac00 \ud45c\uc2dc\ub418\ub294 \uc704\uce58\uc5d0 \ubdf0\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4. \uc544\ub798\uc640 \uac19\uc774 \ubdf0\ucee8\ud14c\uc774\ub108\uc640 \ubdf0\ub97c \uc0dd\uc131\ud55c\ub2e4. browseclipboard-history \ucee8\ud14c\uc774\ub108\uc5d0 \ub300\ud574, browseclipboard.history\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=8169\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-8169","post","type-post","status-publish","format-standard","hentry","category-devops"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/8169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8169"}],"version-history":[{"count":8,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/8169\/revisions"}],"predecessor-version":[{"id":8183,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/8169\/revisions\/8183"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}