Visual Studio Online과 원격 개발 지원

Visual Studio Code 원격 개발 을 통해 소스 코드와 다른 머신의 (가상이던 아니던) 런타임 환경에서 투명하게 상호작용 할수 있습니다. Visual Studio Online 은 VS Code와 브라우전 기반에서 모두 액세스 할 수 있는, 클라우드 호스팅 이나 자체 호스팅 환경에서 이를 사용 가능한 프리뷰 서비스 입니다.

퍼포먼스를 보장하기 위해, 원격 개발과 Visual Studio Online은 둘 다 특정 VS Code 익스텐션을 원격으로 실행 합니다. 그러나 이는 익스텐션이 작동하는 방식에 있어 작은 영향을 줄 수 있습니다. 많은 익스텐션이 수정 없이 삭동하지만, 모든 환경에서 익스텐션이 원하는 대로 작동하려면 적더라도 변경을 해야 할 수 있습니다.

이 글은 익스텐션 작성자가 익스텐션 구조, 원격 작업공간이나 VS Online에서의 익스텐션 디버그, 그리고 익스텐션이 작동하지 않은 경우에 관한 도움을 포함한 VS Code 원격 개발과, VS Online에 대하여 알아야 하는 것을 요약한 것입니다.

구조와 익스텐션

원격 개발이나 VS Online이 사용자에게 투명하게 작동하기 위해서, VS Code는 2종류의 익스텐션을 구분 짓습니다:

UI 익스텐션: 이 익스텐션은 VS Code 사용자 인터페이스를 작성하며, 사용자의 로컬 머신에서 실행됩니다. UI 익스텐션은 원격 작업공간의 파일에 직접 액세스 하거나, 해당 작업공간 혹은 머신에 설치된 도구/스크립트를 실행할 수 없습니다. 예시 UI 익스텐션으로는 : 테마, snippet, language grammars, keymap이 포함 됩니다.

사용자가 익스텐션을 설치하면, VS Code는 자동적으로 그 익스텐션의 종류에 따라 올바른 위치에 설치할것 입니다. 만약 익스텐션이 두 종류에서 모두 실행 가능하다면, VS Code는 상황에 따른 최적의 선택을 시도 할 것입니다. UI 익스텐션은 VS Code의 로컬 익스텐션 호스트에서 실행되며, 작업 공간 익스텐션은 VS Code 서버에 있는 원격 익스텐션 호스트에서 실행됩니다. 최신 VS Code 클라이언트의 기능을 사용하기 위해, 서버는 VS Code 클라이언트의 버전과 일치 해야합니다. 그러므로 서버는 VS Online 환경, 원격 SSH 호스트, 컨테이너의 폴더 혹은 Linux용 Windows 하위 시스템에서 열었을 때, 원격 개발 혹은 VS Online 익스텐션에 의해 자동으로 설치(혹은 업데이트) 될 것입니다. (VS Code는 자동으로 서버의 시작과 중지를 관리하므로, 사용자는 그 존재를 알 지 못합니다)

Architecture diagram

VS Code API는 UI 혹은 작업 공간 익스텐션으로 부터 호출 되었을때 올바른 머신(로컬 혹은 원격)에서 자동으로 실행되도록 디자인 되어있습니다. 그러나 익스텐션이 VS Code에서 지원되지 않는 API를 사용한 경우 — Node API나 쉘 스크립트를 실행 — 원격에서 실행했을때 정상적으로 작동 하지 않을 수도 있습니다. 익스텐션의 모든 기능이 로컬이나 원격 작업공간 모두에서 제대로 작동하는지 테스트 해보는 것을 추천합니다.

익스텐션 디버그

원격 작업 공간에서의 테스트를 위해 여러분은 익스텐션의 개발 버전을 설치 할 수 있지만, 만약 문제가 발생 했을 경우 원격 작업 공간에서 직접 익스텐션을 디버그 할 수 있습니다. 이번 주제에서는, Visual Studio Online, 로컬 컨테이너, SSH Host 혹은 WSL에서 익스텐션을 편집, 실행 그리고 디버그 하는 방법을 다룰 것입니다.

일반적으로, 이러한 작업 공간에서 작동하는 익스텐션은 WSL처럼 덜 제한적인 곳에서도 작동 하기 때문에, 익스텐션 테스트를 위한 좋은 시작 방법은 포트 액세스를 제한하는(예를 들어 VS Online, 컨테이너, 혹은 원격 방화벽을 가진 SSH 호스트) 원격 작업 공간을 사용하는 것입니다.

Visual Studio Online으로 디버그

테스트와 트러블 슈팅을 위해 VS Code와 VS Online의 브라우저 기반 에디터를 둘 다 사용할 수 있으므로, Visual Studio Online 프리뷰에서 익스텐션을 디버그 하는 것은 좋은 시작 방법입니다. 주의 할 것은, 서비스의 클라우드 기반 작업 환경은 비용이 발생 하기 때문에, 여러분은 데스크탑/랩탑을 직접 호스팅하는 환경으로 비용 없이 사용할 수 있습니다.

다음과 같이 따라하십시오:

Visual Studio Online 익스텐션을 설치하고 가입하십시오
새 클라우드 호스팅 작업 환경 (유료)을 생성하거나 여러분의 데스크톱을 셀프 호스팅 작업환경으로 등록 하십시오(무료).
주의: 셀프 호스팅 작업 환경을 사용하는 경우 버그로 인해 재시작이나 네트워크 오류 발생시 작업 환경을 복원을 위해 VS Online: Restore Local Environment 커맨드를 사용해야 할 수도 있습니다. 자세한 내용은 MicrosoftDocs/vsonline#5, MicrosoftDocs/vsonline#14을 참조하십시오.
환경에 연결되지 않았다면, VS Code의 Command Palette(kbstyle(F1))에서 VS Online: Connect to Environment를 선택하여 연결하십시오.
연결 된 이후에, File > Open… / Open Folder… 를 사용하여 익스텐션 소스 코드가 위치한 작업 공간 폴더를 선택하거나, Command Palette (kbstyle(F1))에서 Git: Clone를 선택하여 환경에 클론한 다음 여십시오.
VS Online의 클라우드 기반 환경이 대부분의 익스텐션의 요구사항을 충족 하지만, 다른 필요 디펜던시를 (예를 들어 yarn install이나 apt-get을 사용하여 ) 새 VS Code 터미널 창 (kb(workbench.action.terminal.new)) 에서 설치 할 수 있습니다.
마지막으로, kb(workbench.action.debug.start)를 누르거나 Debug view를 사용하여 Visual Studio Online 환경 내에서 익스텐션을 실행 하십시오.
주의: 표시되는 창에서 익스텐션의 소스 코드 폴더를 열 수는 없지만, 환경의 하위 폴더나 다른 곳을 열 수 있습니다.

나타나는 익스텐션 개발 호스트 창에는 디버거가 연결된 VS Online 환경에서 실행중인 익스텐션이 포함 될 것입니다.

VS Online 브라우저 기반 에디터

익스텐션 소스코드를 환경에 포함시키고 난 다음, VS Online의 브라우저 기반 에디터를, 포털로 이동하여 연결하거나, 로컬 VS Code의 Command Palette (kbstyle(F1))에서 VS Online: Open in Browser를 선택하여 사용 할 수 있습니다. 환경에 연결되고 나면, VS Code에서와 동일하게 브라우저에서 익스텐션을 편집, 디버그 할 수 있습니다.

개발 컨테이너에서 디버그

다음을 따라 하십시오:

원격 - 컨테이너 익스텐션을 설치, 구성 한 다음, File > Open… / Open Folder… 를 사용하여 로컬 VS Code에서 소스 코드를 여십시오.
Command Palette (kbstyle(F1))에서 Remote-Containers: Add Development Container Configuration Files… 를 선택하고, Node.js 8 & TypeScript (타입스크립트를 사용 하지 않는 경우 Node.js 8)를 골라 필요한 컨테이너 구성 파일을 추가 하십시오.
[선택] 이 커맨드의 실행 후, .devcontainer 폴더의 내용을 수정하여 추가 빌드 혹은 런타임 요구사항을 포함 시킬 수 있습니다. 원격 - 컨테이너문서를 통해 자세한 내용을 확인 하십시오.
Remote-Containers: Reopen Folder in Container를 실행한뒤, VS Code는 컨테이너를 설정하고 연결 할 것입니다. 이제 로컬에서와 동일하게 소스 코드를 컨테이너에서 개발 할 수 있습니다.
yarn install 이나 npm install를 새 VS Code 터미널 창 (kb(workbench.action.terminal.new))에서 실행하여 Linux 버전의 Node.js 의존성이 설치 되게 하십시오. 다른 OS나 런타임 의존성을 설치 할 수 있지만, 이를 .devcontainer/Dockerfile에도 추가하여 컨테이너를 다시 빌드 했을때도 사용 가능하게 할 수 있습니다.
마지막으로 kb(workbench.action.debug.start)를 누르거나, Debug view를 사용하여 동일한 컨테이너내에서 익스텐션을 실행하고 디버거를 연결하십시오.

주의: 표시되는 창에서 익스텐션의 소스 코드 폴더를 열 수는 없지만, 환경의 하위 폴더나 다른 곳을 열 수 있습니다.

나타나는 익스텐션 개발 호스트 창에는 2번째 단계에서 정의한 컨테이너에서 디버거가 연결된 익스텐션이 포함됩니다.

SSH에서 디버그

다음을 따라 하십시오:

원격 - SSH 익스텐션을 설치, 구성 한 이후에, VS Code의 Command Palette (kbstyle(F1))에서 Remote-SSH: Connect to Host… 를 선택하여 호스트에 연결하십시오.
연결되고 나면, File > Open… / Open Folder… 중 하나를 사용하여 익스텐션 소스 코드가 포함된 원격 폴더를 선택하거나 Command Palette (kbstyle(F1))에서 Git: Clone을 선택, 클론하여 원격 호스트에서 여십시오.
새 VS Code 터미널 창에서 설치되지 않은 의존성 패키지를 (예를 들어 yarn install 이나 apt-get을 이용하여) 설치 하십시오.
마지막으로, kb(workbench.action.debug.start)를 누르거나 디버그 뷰를 사용하여 원격 호스트에서 익스텐션을 시작하고 디버거를 연결 하십시오.
주의: 표시되는 창에서 익스텐션의 소스 코드 폴더를 열 수는 없지만, 환경의 하위 폴더나 다른 곳을 열 수 있습니다.

나타나는 익스텐션 개발 호스트 창에는 디버거가 연결된 SSH 호스트에서 실행중인 익스텐션이 포함되어 있습니다.

WSL로 디버그

다음을 따라 하십시오:

원격 - WSL 익스텐션 설치 및 구성 이후, VS Code의 Command Palette (kbstyle(F1))에서 Remote-WSL: New Window를 선택하십시오.
나타나는 새 창에서, File > Open… / Open Folder… 를 사용하여 익스텐션 소스코드가 포함된 원격 폴더를 선택하거나, Command Palette (kbstyle(F1))에서 Git: Clone 를 사용하여 클론한뒤 WSL에서 여십시오.
팁: /mnt/c 폴더를 선택하여 윈도우쪽에서 클론된 소스코드에 액세스 할 수 있습니다.
새 VS Code 터미널 창(kb(workbench.action.terminal.new))에서 필요한 의존성 패키지 (예로 apt-get을 사용하여) 를 설치하십시오. 리눅스 버전의 Node.js 의존성을 사용하기 위해 최소한 yarn install이나 npm install을 설치해야 할 것입니다.
마지막으로, kb(workbench.action.debug.start)를 누르거나 디버그 뷰를 사용하여, 익스텐션을 실행하고 디버거를 로컬에서와 같이 연결하십시오.

> **주의:** 나타나는 창에서 익스텐션 소스 코드 폴더를 열 수는 없지만 하위 폴더나 다른 WSL의 다른 곳을 열 수 있습니다. 

<!-- > **Note:** You will not be able to open the extension source code folder in the window that appears, but you can open a sub-folder or somewhere else in WSL. -->

나타나는 익스텐션 개발 호스트 창에는 디버거가 연결된 WSL에서 실행중인 익스텐션이 포함되어 있습니다.

익스텐션의 개발 버전 설치

VS Code가 SSH 호스트, 컨테이너 내부, WSL, 혹은 VS Online을 통해 익스텐션을 자동으로 설치 할때마다, 마켓플레이스 버전이 사용 됩니다. (로컬 머신에 이미 설치된 버전 아님).

이는 일반적인 상황에서는 문제가 없지만, 아직 게시 되지 않은 버전의 익스텐션을 사용 (혹은 공유) 하여 디버깅 환경을 설치 하지 않고 테스트 하려 할 수 있습니다. 익스텐션의 게시 되지 않은 버전을 설치 하기 위해서는, 익스텐션을 VSIX로 패키징하고, 이미 실행중인 원격 환경에 연결된 VS Code 윈도우를 통해 수동으로 익스텐션을 설치 하십시오.

다음을 따라 하십시오:

만약 게시된 익스텐션이라면, settings.json에 "extensions.autoUpdate": false를 추가하여 최신의 마켓플레이스 버전으로 자동 업데이트 하는것을 방지하십시오.
다음으로, vsce package를 사용하여 익스텐션을 VSIX로 패키징 하십시오.
Visual Studio Online 환경, 개발 컨테이너, SSH 호스트, 혹은 WSL 환경에 연결 하십시오.
익스텐션 뷰의 More Actions 메뉴 에 있는 Install from VSIX… 커맨드를 이용하여 익스텐션을 해당 창에 설치 하십시오 (로컬 아님).
프롬프트가 표기되면 다시 로드 하십시오.

팁: 설치 된 이후, Developer: Show Running Extensions 커맨드를 사용하여 VS Code가 익스텐션을 로컬에서 실행하는지 혹은 원격에서 실행하는제 확인 할 수 있습니다.

일반적인 문제들

VS Code의 API는 익스텐션의 위치에 관계 없이 올바른 위치에서 자동으로 실행되게 디자인 되었습니다. 이를 염두하여, 예기치 않은 행동을 예방하는 몇가지 API가 있습니다.

잘못된 실행 위치

익스텐션이 예상대로 작동하지 않는 경우, 이는 잘못된 위치에서 실행중일 수 있습니다. 일반적으로, 이는 익스텐션이 로컬에서 실행되게 기대했지만 원격으로 실행되는 경우 발생합니다. Command Palette (kbstyle(F1))에서 Developer: Show Running Extensions 커맨드를 사용하여 익스텐션이 어디에서 실행되는지 확인 할 수 있습니다.

만약 Developer: Show Running Extensions 커맨드를 통해 UI 익스텐션을 작업공간 익스텐션으로 취급하거나, 그 반대의 경우를 확인 했을때 익스텐션의 package.json의 extensionKind 속성을 설정하십시오:

VS Code 1.40을 기준으로, 이 값은 여러 종류를 담을수 있는 어레이 형태 입니다. 예를 들면:

{
    "extensionKind": ["ui", "workspace"]
}

주의: 이전 릴리스에서는 익스텐션에서 하나의 위치를 문자열의 형태로 허용했지만, 다중 위치 (어레이)를 지원하기 위해 더 이상 사용 되지 않습니다.

다음 위치들의 조합이 지원됩니다:

"extensionKind": ["workspace"] — 익스텐션이 작업공간 컨텐츠에 액세스를 요구하여, 원격 작업 공간에 연결된 VS Code Server나 VS Online에서 실행되는 지를 표기합니다. 대부분의 익스텐션이 이 범위에 속합니다.
"extensionKind": ["ui"] — 익스텐션이 로컬 자산, 장치 또는 기능에 액세스 해야하므로 반드시 UI 익스텐션으로 실행되어야 하는지를 표기합니다. 그러므로 VS Code의 로컬 익스텐션 호스트 에서만 실행 될수 있으며 VS Online의 브라우저 기반 에디터에서는 실행 되지 않습니다. (사용 가능한 로컬 익스텐션 호스트가 없음)
"extensionKind": ["ui", "workspace"] — 익스텐션이 UI 익스텐션으로 실행되 는것을 선호 하지만, 로컬 자원, 장치, 기능에 대한 높은 요구사항이 없습니다. VS Code를 사용할때, 익스텐션은 포콜에 존재한다면, VS Code의 로컬 익스텐션 호스트에서 실행될 것이며 그 외의 경우 존재하는 VS Code의 작업공간 익스텐션 호스트에서 실행 될 것입니다. VS Online의 브라우저 기반 에디터를 사용할경우, 익스텐션은 항상 원격 익스텐션 호스트에서 실행 될것입니다 (사용가능한 로컬 익스텐션 호스트 없음). 이전의 "ui" 값 (문자열)이 이전 버전과의 호환성을 위해 이 유형에 매핑 되지만 더 이상 사용 되지 않는 것으로 간주 됩니다.
"extensionKind": ["workspace", "ui"] — 익스텐션이 작업공간 익스텐션으로 실행 되는것을 선호 하지만, 작업공간 컨텐츠에 대한 높은 요구상항이 없습니다. VS Code를 사용할때 만약 원격 작업공간에 존재한다면 익스텐션은 VS Code의 작업공간 익스텐션 호스트에서 실행 될것이며, 그 외의 경우 로컬에 존재 한다면, VS Code의 로컬 익스텐션 호스트 에서 실행될 것입니다. VS Online의 브라우저 기반 에디터를 사용할때, 익스텐션은 항상 원격 익스텐션 호스트에서 실행 될 것입니다. (사용가능한 로컬 익스텐션 호스트 없음)

remote.extensionKind 설정을 사용하여 익스텐션의 종류 변경의 효과를 빠르게 확인 할 수 있습니다. 이 설정은 익스텐션의 ID를 익스텐션 종류에 매핑하는 것입니다. 예를 들어, 만약 Azure Cosmos DB익스텐션을 UI 익스텐션으로 설정하고자 할 경우 (기본값인 작업공간 익스텐션 대신)나 Debugger for Chrome 익스텐션을 작업공간 익스텐션으로 설정하려는 경우( 기본값인 UI 익스텐션 대신), 다음과 같이 설정 하십시오:

{
  "remote.extensionKind": {
      "ms-azuretools.vscode-cosmosdb": ["ui"],
      "msjsdiag.debugger-for-chrome": ["workspace"]
  }
}

remote.extensionKind를 사용하여 익스텐션의 게시된 버전을 package.json을 수정하고 재작성하지 않고 테스트 할 수 있습니다.

익스텐션의 데이터와 상태 유지

경우에 따라 익스텐션은 settings.json에 포함되지 않거나 분리된 작업공간 구성 파일에 (예로 .eslintrc) 속하지 않은 상태 정보를 유지 해야 할 수도 있습니다. 이를 해결하기 위해, VS Code는 활성화 중인 익스텐션에 전달된 vscode.ExtensionContext 오브젝트에 유용한 저장 속성 세트를 제공합니다.

그러나, 익스텐션이 현재 VS Code의 경로 지정 규칙 (예로, ~/.vscode)이나 특정 OS 폴더 (예로 리눅스의 ~./config/Code)에 의존하여 데이터를 유지 하는 경우, 문제가 발생 할 수 있습니다. 다행히 익스텐션을 업데이트 하여 이런 문제를 해결하는 것은 간단합니다.

단순한 key-value 쌍을 유지하는 경우, 각각 vscode.ExtensionContext.workspaceState 과 vscode.ExtensionContext.globalState를 사용하여 작업공간의 특정 혹은 전체 상태 정보를 저장 할 수 있습니다. 데이터가 이보다 Key-value 쌍보다 복잡한 경우, globalStoragePath 와 storagePath 속성은 파일에서 전역 작업공간에서 특정 정보를 읽고 쓰는데 사용 할 수 있는 “안전한” 경로를 제공합니다.

이러한 API는 VS Code 1.31 에서 추가 되었습니다. 시작하기 위해, package.json의 engines.vscode값을 이 버전 이상으로 업데이트 한 뒤, correct VS Code API typings 가 설치 되어 있는지 확인 하십시오:

{
    "engines": {
        "vscode": "^1.31.0"
    }
}

이제 익스텐션을 게시 할 경우, VS Code 1.31 이상의 사용자만이 업데이트 된 버전을 사용 할 수 있습니다.

API를 사용하기 위해서:

import * as vscode from 'vscode';
import * as fs from 'fs';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('myAmazingExtension.persistWorkspaceData', () => {

        // Create the extension's workspace storage folder if it doesn't already exist
        if (!fs.existsSync(context.storagePath)) {
            fs.mkdirSync(context.storagePath);
        }

        // Write a file to the workspace storage folder
        fs.writeFileSync(
            path.join(context.storagePath, 'workspace-data.json'),
            JSON.stringify({ now: Date.now() }));
    }));

    context.subscriptions.push(
        vscode.commands.registerCommand('myAmazingExtension.persistGlobalData', () => {

        // Create the extension's global (cross-workspace) folder if it doesn't already exist
        if (!fs.existsSync(context.globalStoragePath)) {
            fs.mkdirSync(context.globalStoragePath);
        }

        // Write a file to the global storage folder for the extension
        fs.writeFileSync(
            path.join(context.globalStoragePath, 'global-data.json'),
            JSON.stringify({ now: Date.now() }));
    }));
}

기밀사항 유지

익스텐션이 패스워드나 다른 기밀 사항을 유지해야 하는 경우, 원격 머신의 환경이 아닌 로컬 운영체제의 비밀 저장소 (Windows Cert Store, macOS KeyChain, Linux의 libsecret기반 keyring, 혹은 브라우저 기반의 동등한 것)를 사용하는 것도 고려할 수 있습니다. 추가로, Linux에서는 libsecret과 gnome-keyring 익스텐션을 사용하여 기밀 사항을 저장 할 수 있으며, 이는 일반적으로 서버 배포판이나 컨테이너에서 잘 작동하지 않습니다.

Visual Studio Code는 비밀 유지 메커니즘을 자체 제공 하지 않지만, 많은 익스텐션 작성자는 이 목적으로 keytar node module를 사용하도록 선택 했습니다. 이러한 이유로, VS Code는 keytar를 포함하며 작업공간 익스텐션에서 참조한 경우, 자동으로, 투명하게 로컬에서 실행됩니다. 이렇게 하면 로컬 OS / keychain / keyring / cert store 의 장점을 활용하면서 위의 문제를 피할 수 있습니다.

예를 들어:

import * as vscode from 'vscode';

function getCoreNodeModule(moduleName) {
    try {
        return require(`${vscode.env.appRoot}/node_modules.asar/${moduleName}`);
    }
    catch (err) { }
    try {
        return require(`${vscode.env.appRoot}/node_modules/${moduleName}`);
    }
    catch (err) { }
    return undefined;
}

// Use it
const keytar = getCoreNodeModule('keytar');
await keytar.setPassword('my-service-name','my-account','iamal337d00d');
const password = await keytar.getPassword('my-service-name','my-account');

클립보드 사용

역사적으로, 익스텐션 작성자는 클립보드와 상호 작용 하기 위해 clipboardy 같은 Node.js 모듈을 사용 했습니다. 불행하게도, 이러한 모듈을 작업공간 익스텐션에서 사용 할 경우, 사용자의 로컬 클립보드가 아닌 원격 클립보드를 사용 할 것입니다. VS Code 클립보드 API는 이러한 문제를 해결 합니다. 이는 호출 하는 익스텐션의 유형에 관계 없이 항상 로컬에서 실행 됩니다.

이 API는 VS Code 1.30에서 추가 되었습니다. 시작하기 위해 package.json의 engines.vscode값을 이 버전 이상으로 업데이트 한 다음, correct VS Code API typings가 설치 되어 있는지 확인하십시오:

"engines": {
    "vscode": "^1.30.0"
}

이제 익스텐션을 게시 하면, VS Code 1.30 이상의 버전을 사용하는 사용자만 업데이트 된 버전을 사용 할 수 있습니다.

익스텐션에서 VS Code 클립보드 API를 이용하려면:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(vscode.commands.registerCommand('myAmazingExtension.clipboardIt', async () => {
        // Read from clipboard
        const text = await vscode.env.clipboard.readText();

        // Write to clipboard
        await vscode.env.clipboard.writeText(`It looks like you're copying "${text}". Would you like help?`);
    }));
}

로컬 브라우저, 어플리케이션에서 열기

프로세스를 생성하거나 opn같은 모듈을 사용하여 로컬에서 브라우저를 실행하거나 특정 URI를 사용 어플리케이션을 실행하면 로컬에서는 잘 작동하지만, 작업공간 익스텐션은 원격으로 실행되므로 어플리케이션이 다른 방향으로 작동 될 수 있습니다. VS Code 원격 개발은 부분적으로 기존 익스텐션의 작동을 위해 opn 노드 모듈을 사용합니다. URI를 사용하여 모듈을 호출 하면, VS Code는 URI에 해당하는 기본 어플리케이션이 클라이언트 쪽에서 나타나게 할 것입니다. 그러나 이는 옵션이 지원되지 않고 child_process 오브젝트가 반환되지 않기 때문에, 완전한 구현은 아닙니다.

써드파티 노드 모듈에 의존하는 대신, 익스텐션이 주어진 URI에 대해 vscode.env.openExternal메소드를 사용하여 로컬 운영체제에 등록된 기본 어플리케이션을 실행하기를 추천 합니다. 추가로 vscode.env.openExternal은 자동 로컬호스트 포트포워딩을 실행합니다. 이를 사용하여 원격 머신이나 환경에서 로컬 웹서버를 가리키고 해당 포인트가 외부에서 막힌 경우에도 컨텐츠를 제공할 수 있습니다.

주의: 현재 VS Online의 브라우저 기반 에디터의 포워딩 메커니즘은 http 와 https 요청만 지원합니다. 포워드 된 웹 컨텐츠에 제공되거나 자바스크립트 코드에서 사용 되는 경우 웹소켓은 작동 하지 않습니다. 그러나 VS Code를 위한 원격 개발과 VS Code Online 익스텐션은 이러한 제한이 없습니다. 자세한 내용은 MicrosoftDocs/vsonline#19를 참조하십시오.

이 API는 VS Code 1.31에서 추가 되었습니다. 시작하기 위하여 package.json의 engines.vscode값을 이 버전 이상으로 업데이트 하고 correct VS Code API typings 가 설치 되어 있는지 확인하십시오:

"engines": {
    "vscode": "^1.31.0"
}

이제 익스텐션을 게시 하면, VS Code 1.31 이상의 버전을 사용하는 사용자만 업데이트 된 버전을 사용 할 수 있습니다.

vscode.env.openExternal API를 사용하려면 :

import * as vscode from 'vscode';

export async function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(vscode.commands.registerCommand('myAmazingExtension.openExternal', () => {

        // Example 1 - Open the VS Code homepage in the default browser.
        vscode.env.openExternal(vscode.Uri.parse('https://code.visualstudio.com'));

        // Example 2 - Open an auto-forwarded localhost HTTP server.
        vscode.env.openExternal(vscode.Uri.parse('http://localhost:3000'));

        // Example 3 - Open the default email application.
        vscode.env.openExternal(vscode.Uri.parse('mailto:vscode@microsoft.com'));
    }));
}

로컬호스트 포워딩

vscode.env.openExternal의 로컬호스트 포워딩 메커니즘은 유용하지만, 새 브라우저 창이나 어플리케이션을 실제로 실행하지 않고 무언가를 포워드하려는 경우도 있을 수 있습니다. 이를 위해 vscode.env.asExternalUri API를 사용하십시오.

주의: 현재 VS Online의 브라우저 기반 에디터의 포워딩 메커니즘은 http 와 https 요청만 지원합니다. 포워드 된 웹 컨텐츠에 제공되거나 자바스크립트 코드에서 사용 되는 경우 웹소켓은 작동 하지 않습니다. 그러나 VS Code를 위한 원격 개발과 VS Code Online 익스텐션은 이러한 제한이 없습니다. 자세한 내용은 MicrosoftDocs/vsonline#19를 참조하십시오.

이 API는 VS Code 1.40에서 추가 되었습니다. 시작하기 위하여 package.json의 engines.vscode값을 이 버전 이상으로 업데이트 하고 correct VS Code API typings 가 설치 되어 있는지 확인하십시오:

"engines": {
    "vscode": "^1.40.0"
}

이제 익스텐션을 게시 하면, VS Code 1.31 이상의 버전을 사용하는 사용자만 업데이트 된 버전을 사용 할 수 있습니다.

vscode.env.openExternal API를 사용하려면:

import * as vscode from 'vscode';
import { getExpressServerPort } from './server';

export async function activate(context: vscode.ExtensionContext) {

    const dynamicServerPort = await getWebServerPort();

    context.subscriptions.push(vscode.commands.registerCommand('myAmazingExtension.forwardLocalhost', async () =>

        // Make the port available locally and get the full URI
        const fullUri = await vscode.env.asExternalUri(
            vscode.Uri.parse(`http://localhost:${dynamicServerPort}`));

        // ... do something with the fullUri ...

    }));
}

API에 의해 전달된 URI는 로컬호스트를 전혀 참조 하지 않을 수 있으므로, 전체의 값을 사용해야 합니다. 이는 로컬호스트를 사용 할 수 없는 VS Online의 브라우저 기반 에디터에서 특히 중요합니다.

콜백과 URI 핸들러

vscode.window.registerUriHandler API를 사용하여 익스텐션에서 브라우저를 열면 콜백 함수를 실행하는 커스텀 URI를 등록할 수 있습니다. URI 핸들러를 등록하는 일반적인 경우는 OAuth 2.0 인증 공급자 (예 Azure AD)로 서비스 로그인을 구현 하는 경우 입니다. 하지만 외부 어플리케이션이나 브라우저가 익스텐션에 정보를 보내는 모든 경우에도 사용 할 수 있습니다.

원격 개발과 VS Code의 VS Online 익스텐션은 실행 중인 위치에 관계 없이 (로컬 혹은 원격) 익스텐션에 URI를 전달하는 것을 투명하게 처리 합니다. 그러나 vscode:// URI는 이러한 URI를 브라우저에서 여는 것은 브라우저 기반의 에디터가 아닌 로컬 VS Code 클라이언트에 전달 하기 때문에, VS Online의 브라우저 기반 에디터에서는 작동하지 않습니다. 다행히 이는 vscode.env.asExternalUri API를 사용하여 쉽게 해결 할 수 있습니다.

vscode.enve.asExternalUri API는 VS Code 1.40에서 추가 되었습니다. 시작하기 위하여 package.json의 engines.vscode값을 이 버전 이상으로 업데이트 하고 correct VS Code API typings 가 설치 되어 있는지 확인하십시오:

"engines": {
    "vscode": "^1.40.0"
}

이제 익스텐션을 게시 하면, VS Code 1.40 이상의 버전을 사용하는 사용자만 업데이트 된 버전을 사용 할 수 있습니다.

다음으로 vscode.window.registerUriHandler와vscode.env.asExternalUri를 조합하여 예제 OAuth 인증 콜백을 연결해보겠습니다.

import * as vscode from 'vscode';

// This is ${publisher}.${name} from package.json
const extensionId = 'my.amazing-extension';

export async function activate(context: vscode.ExtensionContext) {

    // Register a URI handler for the authentication callback
    vscode.window.registerUriHandler({
        handleUri(uri: vscode.Uri): vscode.ProviderResult<void> {

            // Add your code for what to do when the authentication completes here.
            if (uri.path === '/auth-complete') {
                vscode.window.showInformationMessage('Sign in successful!');
            }

        }
    });

    // Register a sign in command
    context.subscriptions.push(vscode.commands.registerCommand(`${extensionId}.signin`, async () => {

        // Get an externally addressable callback URI for the handler that the authentication provider can use
        const callbackUri = await vscode.env.asExternalUri(vscode.Uri.parse(`${vscode.env.uriScheme}://${extensionId}/auth-complete`));

        // Add your code to integrate with an authentication provider here - we'll fake it.
        vscode.env.clipboard.writeText(callbackUri.toString());
        await vscode.window.showInformationMessage('Open the URI copied to the clipboard in a browser window to authorize.');
    }));
}

VS Code에서 이 예시를 실행하면, 인증 공급자의 콜백으로 사용 될수 있는 vscode:// 나 vscode-insiders:// URI로 연결 됩니다. VS Online의 브라우저 기반 에디터에서 실행하면, 어떤 코드 변경이나 특정 조건 없이 https://*.online.visualstudio.com URI를 연결 합니다.

OAuth는 이 문서의 범위를 벗어나지만, 예시를 실제 인증 공급자에 적용 하는 경우, 공급자 이전에 프록시 서비스를 작성해야 할 수도 있음을 유념하십시오. 이는 모든 제공자가 vscode:// 콜백 URI를 허용하는 것은 아니며, 또 다른 공급자는 HTTPS를 통한 콜백에 와일드카드 호스트 이름을 허용 하지 않기 떄문입니다. 콜백의 보안을 개선하기 위해서 가능하면 (예 PKCE를 지원하는 Azure AD) OAuth 2.0 Authorization Code with PKCE flow를 사용하는것을 추천합니다.

원격 또는 VS Online의 브라우저 에디터 사용시 다양한 동작

경우에 따라, 작업공간 익스텐션은 원격으로 실행 할때 동작을 변경 해야 할 수도 있습니다. 마찬가지로, VS Online의 브라우저 기반 에디터에서 실행 할때 동작을 변경 해야 할 수도 있습니다. VS Code는 이 상황을 위한 3가지 API를 제공합니다 : vscode.env.uiKind, extension.extensionKind, 그리고 vscode.env.remoteName.

vscode.env.uiKind API 는 VS Code 1.40에서, extension.extensionKind 와 vscode.env.remoteName는 1.36 에서 추가 되었습니다. 시작하기 위하여 package.json의 engines.vscode값을 이 버전 이상으로 업데이트 하고 correct VS Code API typings 가 설치 되어 있는지 확인하십시오:

"engines": {
    "vscode": "^1.40.0"
}

이제 익스텐션을 게시 하면, 해당하는 버전을 사용하는 사용자만 업데이트 된 버전을 사용 할 수 있습니다.

3개의 API를 다음과 같이 사용하십시오:

import * as vscode from 'vscode';

export async function activate(context: vscode.ExtensionContext) {

    // extensionKind returns ExtensionKind.UI when running locally, so use this to detect remote
    const extension = vscode.extensions.getExtension('your.extensionId');
    if (extension.extensionKind === vscode.ExtensionKind.Workspace) {
        vscode.window.showInformationMessage('I am running remotely!');
    }

    // VS Online's browser-based editor will return UIKind.Web for uiKind
    if (vscode.env.uiKind === vscode.UIKind.Web) {
        vscode.window.showInformationMessage('I am running in the VS Online browser editor!');
    }

    // VS Code will return undefined for remoteName if working with a local workspace
    if (typeof(vscode.env.remoteName) === 'undefined') {
        vscode.window.showInformationMessage('Not currently connected to a remote workspace.');
    }

}

익스텐션과 커뮤니케이션을 위한 커맨드

일부 익스텐션은 다른 익스텐션의 활성화에 쓰이기 위한 API를 반환합니다 (vscode.extension.getExtension(extensionName).exports를 통해). 관련된 모든 익스텐션이 같은 쪽 (전부 UI 익스텐션 혹은 전부 작업공간 익스텐션) 에 있으면 작동하지만 그렇지 않은 경우에는 작동하지 않습니다.

다행히도, VS Code는 위치에 관계 없이 실행된 모든 커맨드를 올바른 익스텐션으로 자동라우팅 합니다. 영향에 걱정하지 않고 모든 명령 (다른 익스텐션에서 제공된 것 포함)을 자유롭게 실행 할 수 있습니다.

만약 서로 상호작용해야 하는 익스텐션 그룹이 있는 경우, 프라이빗 커맨드를 이용하여 기능을 노출시키는 것이 예상치 못한 영향을 피할 수 있습니다.그러나 파라미터로 전달된 오브젝트는 전달 되기 이전에 “문자열” 화 될 것입니다 (JSON.stringify), 그러므로 오브젝트는 순환 참조를 가질 수 없으며 다른 쪽에서는 “plain old 자바스크립트 오브젝트”가 됩니다.

예시로:

import * as vscode from 'vscode';

export async function activate(context: vscode.ExtensionContext) {
    // Register the private echo command
    const echoCommand = vscode.commands.registerCommand('_private.command.called.echo',
        (value: string) => {
            return value;
        }
    );
    context.subscriptions.push(echoCommand);
}

커맨드 API 가이드를 참조하여 커맨드 사용에 대한 자세한 정보를 확인하십시오.

웹뷰 API

클립보드 API처럼, 웹뷰 API는 작업공간 익스텐션에서 사용 된다고 해도 항상 사용자의 로컬머신이나 브라우저에서 사용됩니다. 이는 다수의 웹뷰 기반 익스텐션이 원격 작업공간이나 VS Online 환경에서도 작동한다는 것을 의미합니다. 그러나 웹뷰 익스텐션이 원격에서 잘 작동하기 위해 고려해야할 것이 몇가지 있습니다.

asWebviewUri 사용

VS Code 1.39 에서는 익스텐션 리소스 관리를 위해 asWebviewUri API를 새로 추가했습니다. vscode-resource:// URI 대신 이 API를 사용해야만 VS Online 브라우저 기반 에디터가 익스텐션과 작동 합니다. 웹뷰 API를 참조하여 자세한 정보를 얻을 수 있지만 아래는 간단한 예시입니다.

시작하기 위해, package.json의 engines.vscode값을 1.39 버전 이상으로 업데이트 한 뒤, correct VS Code API typings 가 설치 되어 있는지 확인 하십시오:

"engines": {
    "vscode": "^1.39.0"
}

이제 익스텐션을 게시 하면, VS Code 1.39 이상의 버전을 사용하는 사용자만 업데이트 된 버전을 사용 할 수 있습니다.

컨텐츠에서 API를 다음과 같이 사용 할 수 있습니다:

// Create the webview
const panel = vscode.window.createWebviewPanel(
    'catWebview',
    'Cat Webview',
    vscode.ViewColumn.One);

// Get the content Uri
const catGifUri = panel.webview.asWebviewUri(vscode.Uri.file(
        path.join(context.extensionPath, 'media', 'cat.gif')));;

// Reference it in your content
panel.webview.html = `<!DOCTYPE html>
<html>
<body>
    <img src="${catGifUri}" width="300" />
</body>
</html>`;

동적 웹뷰 컨텐츠를 위한 메세지 전달 API

VS Code 웹뷰는 로컬 웹 서버를 사용하지 않고 웹뷰 컨텐츠를 동적으로 업데이트하는 메세지 전달 API를 포함합니다. 상호작용을 통해 웹뷰 컨텐츠를 업데이트 하려는 익스텐션이 어떤 로컬 웹서비스에서 실행중인 경우에도 HTML 컨텐츠에서 직접 하기보다 익스텐션을 통해서 실행 할 수 있습니다.

이는 원격 개발과 VS Online에 있어 웹뷰 코드 작업이 VS Code와 VS Online의 브라우저 기반 에디터에서 둘다 작동하기 위한 중요한 패턴입니다.

로컬 웹서버 대신 메세지 전달인 이유

다른 패턴으로는 ifram에서 웹 컨텐츠를 제공하거나, 웹뷰 컨텐츠가 로컬호스트 서버와 직접 상호작용 하게 하는 것입니다. 불행히도, 기본적으로 웹뷰의 localhost는 개발자의 로컬머신으로 해석됩니다 이는 원격에서 실행중인 작업공간 익스텐션의 경우, 웹뷰는 익스텐션에 의해 생성된 로컬 서버에 액세스 할 수 없음을 의미합니다. 머신의 IP를 사용한다해도 cloud VM이나 컨테이너의 기본설정에 의해 연결 포트는 차단 됩니다. VS Code에서 작동한다고 해도 VS Online의 브라우저 기반 에디터에서는 작동 하지 않습니다.

다음은 원격 - SSH 익스텐션을 사용할때의 문제에 대한 설명이지만, 원격 - 컨테이너 와 Visual Studio Online을 사용 하는 경우에도 동일한 문제가 발생 합니다.

Webview problem

가능하다면 익스텐션을 상당히 복잡하게 하기 때문에 이 작업은 하지 말아야 합니다. 메세지 전달 API는 이러한 유형의 문제 없이 사용자 경험을 가능하게 합니다. 익스텐션 자체는 VS Code Server에서 원격으로 실행 되므로, 웹뷰에서 전달된 메세지의 결과로 익스텐션이 시작되는 모든 웹 서버와 투명하게 상호작용 할 수 있습니다.

웹뷰에서 로컬호스트 사용

어떤 이유로 메세지 전달 API를 사용 할 수 없는 경우,VS Code에서 원격 개발과 Visual Studio Online 익스텐션을 실행하는 방법은 2가지가 있습니다. 불행히도 두 방법 모두 VS Online 브라우저 기반 에디터에서는 MicrosoftDocs/vsonline#11로 인해 현재 작동 하지 않습니다.

각 방법은 웹뷰 컨텐츠가 VS Code가 VS Code Server와 통신하는데 사용하는 채널을 통해 라우팅 할 수 있게 합니다. 예를 들어, 이전 섹션의 원격 - SSH에 대한 그림을 업데이트 하면, 다음과 같은 결과가 나타납니다:

Webview Solution

방법 1 - asExternalUri 사용

VS Code 1.40에서는 익스텐션으로 로컬 http와 https 요청을 프로그래밍 방식으로 전달 할 수 있는 vscode.env.asExternalUriAPI를 추가하였습니다. 이 API를 사용하여 익스텐션이 VS Code에서 실행 될때 웹뷰 에서 로컬 호스트 웹 서버로 요청을 전달 할 수 있습니다. 추후에는, iframe 에서만 컨텐츠를 제공하는 경우 이 API를 사용하여 VS Online 의 브라우저 기반 에디터를 지원 할 수 있지만 MicrosoftDocs/vsonline#11로 인해 현재는 불가능 합니다.

주의: 위 이슈에 더하여, VS Online의 브라우저 기반 에디터의 포워딩 메커니즘은 오직 http와 https요청만 지원합니다. 포워드 된 웹 컨텐츠에 제공되거나 자바스크립트 코드에서 사용 되는 경우 웹소켓은 작동 하지 않습니다. 그러나 VS Code를 위한 원격 개발과 VS Code Online 익스텐션은 이러한 제한이 없습니다. 자세한 내용은 MicrosoftDocs/vsonline#19를 참조하십시오.

시작하기 위해, package.json의 engines.vscode값을 1.40 버전 이상으로 업데이트 한 뒤, correct VS Code API typings 가 설치 되어 있는지 확인 하십시오:

"engines": {
    "vscode": "^1.40.0"
}

이제 익스텐션을 게시 하면, VS Code 1.40 이상의 버전을 사용하는 사용자만 업데이트 된 버전을 사용 할 수 있습니다.

다음으로, API를 사용하여 iframe을 위한 전체 URI를 얻어 HTML에 추가 하십시오. 또한 웹뷰에서 스크립트를 허용하는것과 HTML 컨텐츠에 CSP를 추가해야 합니다.

// Use asExternalUri to get the URI for the web server
const dynamicWebServerPort = await getWebServerPort();
const fullWebServerUri = await vscode.env.asExternalUri(
        vscode.Uri.parse(`http://localhost:${dynamicWebServerPort}`)
    );

// Create the webview
const panel = vscode.window.createWebviewPanel(
    'asExternalUriWebview',
    'asExternalUri Example',
    vscode.ViewColumn.One, {
        enableScripts: true
    });

const cspSource = panel.webview.cspSource;
panel.webview.html = `<!DOCTYPE html>
        <head>
            <meta
                http-equiv="Content-Security-Policy"
                content="default-src 'none'; frame-src ${fullWebServerUri} ${cspSource} https:; img-src ${cspSource} https:; script-src ${cspSource}; style-src ${cspSource};"
            />
        </head>
        <body>
        <!-- All content from the web server must be in an iframe -->
        <iframe src="${fullWebServerUri}">
    </body>
    </html>`;

위의 예시에서 iframe에 제공된 모든 HTML 컨텐츠는 localhost를 하드 코딩 하는 대신 상대 경로를 사용해야 하는것에 주의하십시오.

방법 2 - 포트 매핑 사용

Option 2 - Use a port mapping

VS Online의 브라우저 기반 에디터를 지원하지 않는 경우, 웹뷰 API에서 portMapping 옵션을 허용십시오. (이는 VS Code 클라이언트의 VS Onlie에서도 작동하지만, 브라우저에서는 작동하지 않습니다.)

포트 매핑 API는 VS Code 1.34 에서 추가 되었습니다. 시작하기 위해, package.json의 engines.vscode값을 이 버전 이상으로 업데이트 한 뒤, correct VS Code API typings 가 설치 되어 있는지 확인 하십시오:

"engines": {
    "vscode": "^1.34.0"
}

이제 익스텐션을 게시 하면, VS Code 1.34 이상의 버전을 사용하는 사용자만 업데이트 된 버전을 사용 할 수 있습니다.

포트 매핑을 사용하려면, 웹뷰를 생성할때 portMapping 오브젝트를 전달 하십시오:

const LOCAL_STATIC_PORT = 3000;
const dynamicServerPort = await getWebServerPort();

// Create webview and pass portMapping in
const panel = vscode.window.createWebviewPanel(
    'remoteMappingExample',
    'Remote Mapping Example',
    vscode.ViewColumn.One, {
        portMapping: [
            // This maps localhost:3000 in the webview to the web server port on the remote host.
            { webviewPort: LOCAL_STATIC_PORT, extensionHostPort: dynamicServerPort }
        ]
    });

// Reference the port in any full URIs you reference in your HTML.
panel.webview.html = `<!DOCTYPE html>
    <body>
        <!-- This will resolve to the dynamic server port on the remote machine -->
        <img src="http://localhost:${LOCAL_STATIC_PORT}/canvas.png">
    </body>
    </html>`;

이 예제에서, 원격과 로컬 모든 경우, http://localhost:3000에 대한 모든 요청은 자동적으로 Express.js 웹 서버가 실행중인 동적 포트에 매핑 됩니다.

네이티브 Node.js 모듈 사용

VS Code 익스텐션과 함께 번들된 ( 혹은 동적으로 얻은 ) 네이티브 모듈은 반드시 Electron의 electron-rebuild를 사용하여 다시 컴파일해야 합니다. 그러나 VS Code 서버는 표준 (non-Electron) 버전의 Node.js를 사용하므로, 원격으로 실행시 바이너리로 실패 할 수 있습니다.

이 문제를 해결하기 위해:

VS Code가 제공하는 Node.js의 “모듈” 버전을 위한 두 바이너리를 (Electron과 표준 Node.js)를 모두 포함 (혹은 동적으로 획득)하십시오.
vscode.extensions.getExtension('your.extensionId').extensionKind === vscode.ExtensionKind.Workspace인지 확인하여 익스텐션이 원격이나 로컬에서 실행되는지에 따라 올바른 바이너리를 설정하십시오.
유사 로직에 따라 non-x86_64 타겟과 Alpine Linux에 대한 지원을 추가 할 수 있습니다.

콘솔에서 Help > Developer Tools로 이동한뒤, process.versions.modules를 입력하여 “모듈”의 버전을 확인 할 수 있습니다. 그러나 네이티브 모듈이 다른 Node.js 환경에서 원활하게 작동 하도록, 지원 하려는 모든 가능한 Node.js “모듈” 버전과 플랫폼 ( Electron Node.js, Official Node.js Windows/Darwin/Linux, 모든 버전)에 대해 컴파일 할 수도 있습니다. node-tree-sitter모듈은 이를 수행하는 좋은 예시입니다.

non-x86_64 호스트 혹은 Alpine Linux 컨테이너 지원

익스텐션이 순수하게 자바스크립트/타입스크립트로 작성된 경우, 익스텐션을 다른 프로세서 아키텍쳐나 musl 기반의 Alpine Linux에서 지원되기 위해 어느것도 추가 하지 않아도 됩니다.

그러나 익스텐션이 Debian 9+, Ubuntu 16.04+, 혹은 RHEL / CentOS 7+ 원격 SSH 호스트, 컨테이너 혹은 WSL에서 작동하지만 non-x86_64 호스트 (예로 ARMv71) 나 Alpine Linux 컨테이너에서 작동하지 않는 경우, 익스텐션은 x86_64 glibc 의 네이티브 코드나 런타임이 포함되어 이러한 아키텍쳐 / 운영체제에서 작동 하지 않습니다.

예를 들어, 익스텐션은 네이티브 모듈 혹은 런타임의 x86_64 컴파일 버전만 포함 할 수 있습니다. Alpine Linux의 경우 포함된 네이티브 코드 또는 런타임이 libc가 Alpine Linux (musl)과 다른 배포판에서 (glibc) 구현된 기본적 차이에 따라 작동 하지 않을 수 있습니다.

이 문제를 풀기 위해:

컴파일 된 코드를 동적으로 획득한 경우, process.arch를 사용하여 non-x86_64 타겟을 감지하고, 올바른 아키텍쳐를 위해 컴파일된 버전을 다운로드 받아 지원할 수 있습니다. 대신 익스텐션 내에서 지원되는 모든 아키텍처에 대한 바이너리를 포함하는 경우, 올바른 것을 사용하기 위해 이 로직을 사용 할 수 있습니다.

Alpine Linux의 경우, await fs.exists('/etc/alpine-release')를 통해 운영체제를 감지하고, 다시 다운로드 하거나 musl기반의 운영체제에 대한 올바른 바이너리를 사용 할 수 있습니다.

이러한 플랫폼을 지원하지 않으려는 경우, 대신 좋은 에러 메세지를 제공 할 수 있습니다.

일부 써드파티 npm 모듈은 이러한 문제를 일으키는 네이티브 코드가 포함 되어 있을수 있음을 주의하십시오. 경우에 따라 npm 모듈 작성자와 같이 추가 컴파일 타겟을 작업 해야 할 수도 있습니다.

Electron 모듈 비사용

익스텐션 API에 노출 되지 않은 빌트인 Electron이나 VS Code 모듈에 의존하는 것이 편리 할 수 있지만, VS Code 서버가 표준 (non-Electron) 버전의 Node.js를 실행 하는 것에 주의 하십시오. 이러한 모듈은 원격에서 실행될때 누락됩니다. keytar 와 같은 몇가지 예외가 있는데, 이 경우 작동하게 하는 특정한 코드가 포함 되어 있습니다.

익스텐션 VSIX에서 기본 Node.js 모듈을 사용하여 이러한 문제를 피하십시오. Electron 모듈을 반드시 사용해야 하는 경우 모듈이 없는 경우에 대한 폴백을 사용해야 합니다.

아래의 예시는 Electron original-fs 노드 모듈이 있는 경우 이를 사용하며, 그렇지 않은 경우 기본 Node.js의 fs모듈로 폴백 합니다.

function requireWithFallback(electronModule: string, nodeModule: string) {
    try {
        return require(electronModule);
    }
    catch (err) { }
    return require(nodeModule);
}

const fs = requireWithFallback('original-fs', 'fs');

가능한 위와 같은 상황을 피하십시오.

알려진 이슈

작업공간 익스텐션의 일부 추가 기능으로 해결 될 수 있는 몇몇 익스텐션 문제가 있습니다. 아래의 테이블은 고려중인 알려진 이슈의 목록입니다:

문제	설명
웹뷰 HTML 컨텐츠가 VS Online의 브라우저 기반 에디터에서 포트포워드 된 서버에 직접 액세스 불가	현재 이는 MicrosoftDocs/vsonline#11에 의해 차단 되었습니다. (이는 VS Code 클라이언트를 위한 원격개발 이나 VS Online 익스텐션에는 적용 되지 않는것에 주의하십시오) 일반적으로 웹뷰 컨텐츠와 익스텐션이 서버와 상호작용 하는것에 대해서 문제를 피하기 위해 메세지 전달 API를 참조하길 권장합니다. 추후에는, 로컬 웹서버 컨텐츠가 iframe 에서 내장되어웹뷰에서 작동하도록 고려중입니다.
VS Online의 브라우저 기반 에디터에서 포트포워드된 웹소켓이 작동 불가	현재 VS Online의 브라우저 기반 포워딩 메커니즘에선, http와 https 프로토콜만 지원합니다. 웹 컨텐츠에서 제공되는 경우에도 웹소켓과 다른 프로토콜은 작동 하지 않습니다. 자세한 내용은 MicrosoftDocs/vsonline#19를 참조하십시오. (이는 VS Code 클라이언트를 위한 원격개발 이나 VS Online 익스텐션에는 적용 되지 않는것에 주의하십시오)
원격 작업공간에서 로컬 머신으로 액세스 / 전달 불가	외부 어플리케이션에서 작업공간 파일을 여는 익스텐션은 외부 익스텐션이 원격 파일에 직접 액세스 할 수 없기 때문에 에러를 발생 할 수도 있습니다. 이 문제를 해결 하기 위해 익스텐션이 원격 작업공간에서 파일을 전송하는 방법에 대한 선택지를 조사중입니다.
작업공간 익스텐션에서 연결된 장치에 액세스 불가	로컬에 연결된 장치에 액세스 하는 익스텐션은 원격으로 실행할때 연결 될수 없습니다. 이를 해결하기 위한 최적의 방법을 조사중입니다.

질문과 피드백

Tips and Tricks 이나 FAQ를 참조하십시오.
스택 오버플로우에서 답변을 검색하십시오.
기능 지원 혹은 새로운 기능 요청하거나, 기존 이슈를 검색하거나, 혹은 문제를 리포트하십시오.
다른 사람이 사용 할 수 있도록 개발자 컨테이너 정의에 기여하십시오.
우리의 문서 또는 VS Code에 기여하십시오.
자세한 것은 기여가이드를 참조하십시오.