익스텐션 매니페스트

모든 Visual Studio Code 익스텐션은 익스텐션 디렉토리의 루트에 package.json 이라는 매니페스트 파일을 필요로 합니다.

필드

또한 npm의 package.json 참조를 확인하십시오.

예시

아래는 완전한 package.json의 예시 입니다 .

{
  "name": "wordcount",
  "displayName": "Word Count",
  "version": "0.1.0",
  "publisher": "ms-vscode",
  "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",
  "author": {
    "name": "seanmcbreen"
  },
  "categories": ["Other"],
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  },
  "activationEvents": ["onLanguage:markdown"],
  "engines": {
    "vscode": "^1.0.0"
  },
  "main": "./out/extension",
  "scripts": {
    "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
    "compile": "node ./node_modules/vscode/bin/compile -watch -p ./"
  },
  "devDependencies": {
    "vscode": "0.10.x",
    "typescript": "^1.6.2"
  },
  "license": "SEE LICENSE IN LICENSE.txt",
  "bugs": {
    "url": "https://github.com/Microsoft/vscode-wordcount/issues",
    "email": "smcbreen@microsoft.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/Microsoft/vscode-wordcount.git"
  },
  "homepage": "https://github.com/Microsoft/vscode-wordcount/blob/master/README.md"
}

마켓플레이스 제출 팁

다음은 VS Code 마켓플레이스에 표시되는 익스텐션의 내용을 더욱 멋지게 보이게 하는 몇가지 팁과 권장사항입니다.

항상 최신 vsce를 사용하십시오. npm install -g vsce를 사용하여 이를 확인 할 수 있습니다.

익스텐션의 루트 폴더에 README.md markdown 파일이 있으면 익스텐션 세부 항목의 (마켓플레이스에서) 해당 내용이 포함 됩니다. README.md내부에 상대경로 이미지 링크를 제공 할 수 있습니다.

다음은 몇가지 예시 입니다:

1. Word Count
2. MD Tools

좋은 이름과 설명을 제공하십시오. 이는 마켓플레이스 및 제품 표시에 있어 중요합니다. 이 문자열은 또한 VS Code의 텍스트 검색에도 사용되며 관련 키워드를 사용하는 것은 큰 도움이 될 것입니다.

    "displayName": "Word Count",
    "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",

아이콘과 대조적인 배너 색상을 마켓플레이스 페이지 헤더에 사용하십시오. theme속성은 배너에 사용될 폰트인 dark 혹은 light를 나타냅니다.

{
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  }
}

설정할수 있는 다른 선택적 링크가 (bugs, homepage, repository) 가 있으며 이는 마켓플레이스의 Resources 섹션에서 표기 됩니다.

{
  "license": "SEE LICENSE IN LICENSE.txt",
  "homepage": "https://github.com/Microsoft/vscode-wordcount/blob/master/README.md",
  "bugs": {
    "url": "https://github.com/Microsoft/vscode-wordcount/issues",
    "email": "smcbreen@microsoft.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/Microsoft/vscode-wordcount.git"
  }
}

익스텐션의 category를 설정하십시오. 동일한 category를 같는 익스텐션은 마켓플레이스에서 같이 그룹화 되어 향상된 필터링과 검색을 갖습니다.

주의: 익스텐션에 적당한 값만을 사용하십시오. 허용 되는 값은 [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]입니다. 구문 강조 및 코드 완성과 같은 일반적인 언어 기능을 위해서는 Programming Languages를 사용하십시오. Language Packs는 언어 익스텐션 표시를 위한 것입니다 (예를 들면 현지화된 불가리아어).

{
  "categories": ["Linters", "Programming Languages", "Other"]
}

허용된 배지

보안 이슈로 인해, 신뢰할 수 있는 서비스의 배지만을 허용합니다.

다음 URL로 부터만 배지를 허용합니다.

• api.bintray.com
• api.travis-ci.com
• api.travis-ci.org
• app.fossa.io
• badge.buildkite.com
• badge.fury.io
• badge.waffle.io
• badgen.net
• badges.frapsoft.com
• badges.gitter.im
• badges.greenkeeper.io
• cdn.travis-ci.com
• cdn.travis-ci.org
• ci.appveyor.com
• circleci.com
• cla.opensource.microsoft.com
• codacy.com
• codeclimate.com
• codecov.io
• coveralls.io
• david-dm.org
• deepscan.io
• dev.azure.com
• docs.rs
• gemnasium.com
• githost.io
• gitlab.com
• godoc.org
• goreportcard.com
• img.shields.io
• isitmaintained.com
• marketplace.visualstudio.com
• nodesecurity.io
• opencollective.com
• snyk.io
• travis-ci.com
• travis-ci.org
• visualstudio.com
• vsmarketplacebadge.apphb.com
• www.bithound.io
• www.versioneye.com

만약 이 외의 배지를 사용하려는 경우, Github [issue]를 열어주시면, 기꺼이 도와드리겠습니다.\

익스텐션 Contribution 결합

yo code 생성기는 TextMate 테마, 컬러라이저, 그리고 Snippet을 쉽게 패키징하고 익스텐션을 생성 할 수 있게 합니다. 생성기가 실행되면, 생성기는 각 옵션에 대하여 완전히 독립된 익스텐션 패키지를 생성합니다. 그러나 여러 contribution을 결합한 한개의 익스텐션을 만드는 것이 더 편리합니다. 예를 들면, 새로운 언어에 대한 지원을 추가하려 할때, 사용자에게 언어 정의와 함께 색상, snippet 그리고 디버깅을 지원하려고 하는 경우입니다.

익스텐션 contribution을 결합하기 위해, 기존의 익스텐션 매니패스트 package.json파일을 편집하고 새로운 contribution과, 관련된 파일을 추가하십시오.

아래는 LaTeX 언어 정의(언어 식별 및 파일 익스텐션), 색상(grammar), snippet을 포함하는 익스텐션 매니페스트입니다.

{
  "name": "language-latex",
  "description": "LaTex Language Support",
  "version": "0.0.1",
  "publisher": "someone",
  "engines": {
    "vscode": "0.10.x"
  },
  "categories": ["Programming Languages", "Snippets"],
  "contributes": {
    "languages": [
      {
        "id": "latex",
        "aliases": ["LaTeX", "latex"],
        "extensions": [".tex"]
      }
    ],
    "grammars": [
      {
        "language": "latex",
        "scopeName": "text.tex.latex",
        "path": "./syntaxes/latex.tmLanguage.json"
      }
    ],
    "snippets": [
      {
        "language": "latex",
        "path": "./snippets/snippets.json"
      }
    ]
  }
}

이제 익스텐션 매니페스트 categories 속성은 마켓플레이스에서 쉽게 검색하고 필터링 될 수 있도록 Programming Languages와 Snippets를 모두 포함 합니다.

팁: 병합된 contribution이 동일한 식별자를 사용하는지 확인하십시오. 위의 예에서 세 가지 contribution은 “latex”라는 동일한 언어 식별자를 사용하고 있습니다. 이는 VS Code가 색상 (grammar) 과 snippet이 LaTeX 언어를 위한 것이며, LaTeX 파일을 편집할때 활성화 된다는 것을 알려줍니다.

익스텐션 팩

여러 익스텐션을 익스텐션 팩에 번들링 할 수 있습니다. 익스텐션 팩은 함께 설치되는 익스텐션 모음입니다. 이를 통해 선호하는 익스텐션을 다른 사용자와 쉽게 공유하거나 PHP 개발과 같이 특정 시나리오에 대한 익스텐션 모음을 만들어 PHP 개발자가 VS Code를 빠르게 시작 할 수 있습니다.

익스텐션 팩은 package.json파일의 extensionPack속성을 사용하여 다른 익스텐션을 번들링 할 수 있습니다.

예를 들어, 아래는 PHP 를 위한 익스텐션 팩으로 디버거, 언어 서비스, 포맷터를 포함합니다:

{
  "extensionPack": [
    "felixfbecker.php-debug",
    "felixfbecker.php-intellisense",
    "Kasik96.format-php"
  ]
}

익스텐션 팩을 설치할때, VS Code는 해당하는 익스텐션의 의존성들도 같이 설치 할 것입니다.

익스텐션 팩은 마켓플레이스에서 Extension Packs 카테고리로 분류 되어야 합니다:

{
  "categories": ["Extension Packs"]
}

익스텐션 팩을 생성하기 위하여, yo code Yeoman 생성기를 사용하고 New ExtensionPack 옵션을 선택 할 수 있습니다. VS Code 인스턴스에 현재 설치된 익스텐션 모음을 해당 팩에 제공 하는 옵션도 있습니다. 이러한 방식으로, 선호하는 익스텐션들로 익스텐션 팩을 쉽게 생성하고, 마켓플레이스에 게시하고, 다른 사용자와 공유 할 수 있습니다.

익스텐션 팩에는 포함된 익스텐션과의 기능적 의존성이 없어야 하며, 포함된 익스텐션은 익스텐션 팩과 독립적으로 관리 될 수 있어야 합니다. 만약 익스텐션에 대한 다른 익스텐션의 의존성이 있다면, 그 익스텐션은 extensionDependencies 속성을 통해 의존성을 선언해야 합니다.

익스텐션 제거

익스텐션이 VS Code에서 제거 될 때 정리가 완료된 경우, 익스텐션의 package.json의 scripts섹션에서, 제거하는 node 스크립트 vscode:uninstall 을 등록 할 수 있습니다.

{
  "scripts": {
    "vscode:uninstall": "node ./out/src/lifecycle"
  }
}

이 스크립트는 익스텐션이 VS Code에서 완전히 제거 되고 난 후, VS Code가 재시작 될 때 (종료 후 시작) 실행됩니다.

주의:: 오직 Node.js 스크립트만 지원됩니다.

유용한 Node 모듈들

npmjs에는 VS Code 익스텐션을 작성하는데 유용한 몇가지 Node.js 모듈이 있습니다. 이를 익스텐션에 dependencies 섹션에 포함 시킬 수 있습니다.

• vscode-nls - 외부화와 현지화를 지원합니다.
• vscode-uri - VS Code와 익스텐션에서 쓰이는 URI 구현입니다.
• jsonc-parser - 주석과 관계 없이, JSON을 처리하기 위한 스캐너 및 내결함성 파서입니다.
• request-light - 프록시를 지원하는 경량 Node.js 요청 라이브러리 입니다.
• vscode-extension-telemetry - VS Code 익스텐션에 대한 일관된 원격 분석, 보고 입니다.
• vscode-languageclient - 언어 서버 프로토콜을 지원하는 언어 서버를 쉽게 통합 할 수 있습니다.

다음 단계

VS Code의 확장성 모델을 더 배우기 위하여, 아래의 주제를 참조하십시오:

• Contribution Points - VS Code contribution points 리퍼런스
• 활성화 이벤트 - VS Code 활성화 이벤트 리퍼런스
• 익스텐션 마켓플레이스 - VS Code 익스텐션 마켓플레이스에 대해 더 읽어보십시오.