확장 프로그램 매니페스트

모든 Visual Studio Code 확장 프로그램은 확장 프로그램 디렉토리 구조의 루트에 매니페스트 파일 package.json이 필요합니다.

필드

npm의 package.json 참조도 확인하십시오: https://docs.npmjs.com/cli/v7/configuring-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": "sean"
  },
  "categories": ["Other"],
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  },
  "pricing": "Free",
  "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": {
    "@types/vscode": "^0.10.x",
    "typescript": "^1.6.2"
  },
  "license": "SEE LICENSE IN LICENSE.txt",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  },
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md"
}

마켓플레이스 프레젠테이션 팁

VS Code 마켓플레이스에 표시될 때 확장 프로그램을 멋지게 보이게 하는 몇 가지 팁과 권장 사항입니다.

항상 최신 vsce를 사용하십시오. npm install -g @vscode/vsce를 사용하여 최신 버전을 확보하십시오.

확장 프로그램의 루트 폴더에 README.md Markdown 파일을 포함하면 확장 프로그램 세부 정보(마켓플레이스)의 본문에 내용이 포함됩니다. README.md에서 상대 경로 이미지 링크를 제공할 수 있습니다.

몇 가지 예시입니다.

1. 단어 수
2. MD 도구

좋은 표시 이름과 설명을 제공하십시오. 이는 마켓플레이스와 제품 디스플레이에 중요합니다. 이러한 문자열은 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)를 설정할 수 있습니다.

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

확장 프로그램에 category를 설정하십시오. 동일한 category의 확장 프로그램은 마켓플레이스에서 함께 그룹화되어 필터링 및 검색을 개선합니다.

참고: 확장 프로그램에 적합한 값만 사용하십시오. 허용되는 값은 [프로그래밍 언어, 스니펫, 린터, 테마, 디버거, 포맷터, 키맵, SCM 공급자, 기타, 확장 프로그램 팩, 언어 팩, 데이터 과학, 기계 학습, 시각화, 노트북, 교육, 테스트]입니다. 구문 강조 표시 및 코드 완성 등 일반적인 언어 기능에는 Programming Languages를 사용하십시오. Language Packs 카테고리는 표시 언어 확장 프로그램(예: 현지화된 불가리아어)을 위해 예약되어 있습니다.

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

승인된 배지

보안상의 이유로 신뢰할 수 있는 서비스의 배지만 허용됩니다.

다음 URL 접두사의 배지를 허용합니다.

• api.travis-ci.com
• app.fossa.io
• badge.buildkite.com
• badge.fury.io
• badgen.net
• badges.frapsoft.com
• badges.gitter.im
• cdn.travis-ci.com
• 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
• flat.badgen.net
• github.com (워크플로우에서만)
• gitlab.com
• godoc.org
• goreportcard.com
• img.shields.io
• isitmaintained.com
• marketplace.visualstudio.com
• nodesecurity.io
• opencollective.com
• snyk.io
• travis-ci.com
• visualstudio.com
• vsmarketplacebadges.dev

참고: vsmarketplacebadge.apphb.com 배지를 vsmarketplacebadges.dev 배지로 바꾸십시오.

사용하려는 다른 배지가 있다면, GitHub 이슈를 열어주시면 검토해 드리겠습니다.

확장 프로그램 기여 통합

yo code 생성기는 TextMate 테마, 색상 표시기, 스니펫을 쉽게 패키징하고 새 확장 프로그램을 만드는 데 도움이 됩니다. 생성기가 실행되면 각 옵션에 대해 완전한 독립형 확장 프로그램 패키지를 생성합니다. 그러나 여러 기여를 통합하는 단일 확장 프로그램을 갖는 것이 더 편리한 경우가 많습니다. 예를 들어 새 언어 지원을 추가하는 경우 언어 정의(색상 표시 포함)와 스니펫, 심지어 디버깅 지원까지 사용자에게 제공하고 싶을 것입니다.

확장 프로그램 기여를 통합하려면 기존 확장 프로그램 매니페스트 package.json을 편집하고 새 기여 및 관련 파일을 추가합니다.

아래는 LaTex 언어 정의(언어 식별자 및 파일 확장자), 색상 표시(grammars), 스니펫을 포함하는 확장 프로그램 매니페스트입니다.

{
  "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가 모두 포함되어 마켓플레이스에서 쉽게 검색하고 필터링할 수 있음을 알 수 있습니다.

팁: 병합된 기여가 동일한 식별자를 사용하고 있는지 확인하십시오. 위의 예에서 세 가지 기여 모두 "latex"를 언어 식별자로 사용합니다. 이를 통해 VS Code는 색상 표시기(grammars)와 스니펫이 LaTeX 언어용이며 LaTeX 파일을 편집할 때 활성화된다는 것을 알 수 있습니다.

확장 팩

별도의 확장 프로그램을 확장 프로그램 팩으로 묶을 수 있습니다. 확장 프로그램 팩은 함께 설치될 확장 프로그램 세트입니다. 이를 통해 즐겨 사용하는 확장 프로그램을 다른 사용자와 쉽게 공유하거나 PHP 개발과 같은 특정 시나리오를 위한 확장 프로그램 세트를 만들어 PHP 개발자가 VS Code를 빠르게 시작하도록 도울 수 있습니다.

확장 프로그램 팩은 package.json 파일의 extensionPack 속성을 사용하여 다른 확장 프로그램을 묶습니다.

예를 들어, 디버거와 언어 서비스를 포함하는 PHP 확장 프로그램 팩은 다음과 같습니다.

{
  "extensionPack": ["xdebug.php-debug", "zobo.php-intellisense"]
}

확장 프로그램 팩을 설치하면 VS Code는 확장 프로그램 종속성도 설치합니다.

확장 프로그램 팩은 Extension Packs 마켓플레이스 카테고리로 분류되어야 합니다.

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

확장 프로그램 팩을 만들려면 yo code Yeoman 생성기를 사용하고 New Extension Pack 옵션을 선택하십시오. 현재 VS Code 인스턴스에 설치된 확장 프로그램 세트로 팩을 시드하는 옵션이 있습니다. 이 방식으로 좋아하는 확장 프로그램으로 확장 프로그램 팩을 쉽게 만들고 마켓플레이스에 게시하여 다른 사람들과 공유할 수 있습니다.

확장 프로그램 팩은 번들링된 확장 프로그램과 기능적 종속성이 없어야 하며, 번들링된 확장 프로그램은 팩과 독립적으로 관리할 수 있어야 합니다. 확장 프로그램이 다른 확장 프로그램에 종속되는 경우 해당 종속성은 extensionDependencies 속성을 사용하여 선언해야 합니다.

확장 프로그램 제거 훅

확장 프로그램이 VS Code에서 제거될 때 정리해야 할 사항이 있는 경우, 확장 프로그램의 package.json의 scripts 섹션 아래에 있는 제거 훅 vscode:uninstall에 node 스크립트를 등록할 수 있습니다.

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

이 스크립트는 확장 프로그램이 제거된 후 VS Code를 다시 시작할 때(종료 및 시작) VS Code에서 확장 프로그램이 완전히 제거될 때 실행됩니다.

참고: Node.js 스크립트만 지원됩니다.

유용한 Node 모듈

VS Code 확장 프로그램 작성을 돕는 여러 Node.js 모듈을 npmjs에서 사용할 수 있습니다. 이들을 확장 프로그램의 dependencies 섹션에 포함할 수 있습니다.

• vscode-nls - 외부화 및 현지화 지원.
• vscode-uri - VS Code 및 확장 프로그램에서 사용하는 URI 구현.
• jsonc-parser - 주석이 있거나 없는 JSON을 처리하기 위한 스캐너 및 오류 허용 파서.
• request-light - 프록시 지원이 있는 경량 Node.js 요청 라이브러리
• vscode-extension-telemetry - VS Code 확장 프로그램의 일관된 원격 분석 보고.
• vscode-languageclient - 언어 서버 프로토콜을 준수하는 언어 서버를 쉽게 통합합니다.

다음 단계

VS Code 확장성 모델에 대해 자세히 알아보려면 다음 주제를 시도해 보세요.

• 기여 지점 - VS Code 기여 지점 참조
• 활성화 이벤트 - VS Code 활성화 이벤트 참조
• 확장 프로그램 마켓플레이스 - VS Code 확장 프로그램 마켓플레이스에 대해 자세히 알아보기