| layout | parent | title | nav_order | description |
|---|---|---|---|---|
default |
References |
Contribution Points |
2 |
Contribution Points 는 package.json Extension Manifest의 contributes 필드에서 작성하는 JSON 선언의 모음입니다. 익스텐션은 Contribution Points 를 등록하여, Visual Studio Code에서의 다양한 기능을 확장합니다. 다음은 사용가능한 모든 Contribution Points 의 목록입니다:
configurationconfigurationDefaultscommandsmenuskeybindingslanguagesdebuggersbreakpointsgrammarsthemessnippetsjsonValidationviewsviewsContainersproblemMatchersproblemPatternstaskDefinitionscolorstypescriptServerPluginsresourceLabelFormatters
사용자에게 노출되는 Contribute 구성 키입니다. 사용자는 UI 설정을 사용하거나 JSON 설정 파일을 직접 편집하는 것으로, 이러한 구성 옵션을 사용자 설정이나 작업공간 설정으로 지정할 수 있습니다.
{
"contributes": {
"configuration": {
"title": "TypeScript",
"properties": {
"typescript.useCodeSnippetsOnMethodSuggest": {
"type": "boolean",
"default": false,
"description": "Complete functions with their parameter signature."
},
"typescript.tsdk": {
"type": ["string", "null"],
"default": null,
"description": "Specifies the folder path containing the tsserver and lib*.d.ts files to use."
}
}
}
}
}
vscode.workspace.getConfiguration('myExtension')를 사용하여 익스텐션의 이러한 값들을 읽을 수 있습니다.
구성 항목은 JSON 에디터에서 설정을 편집할때 intellisense를 제공하고, UI 설정에서 나타나는 방식을 정의하기 위해 사용됩니다.
title
title 1️⃣️ 은 구성 섹션에 사용되는 주요 제목입니다. 보통 익스텐션에는 한개의 섹션만 있습니다.
- ✔
"title": "GitMagic" - ❌
"title": "GitMagic Extension" - ❌
"title": "GitMagic Configuration" - ❌
"title": "GitMagic Extension Configuration Settings"
properties
구성의 2️⃣ properties은 구성 속성들을 표현하는 딕셔너리입니다.
UI 설정에서, 구성 키는 네임스페이스와 title을 만들때 사용됩니다. 키의 대문자는 단어 구분을 위해 사용 됩니다. 예를 들어 키가 gitMagic.blame.dateFormat 라면, 해당 설정으로 생성된 title은 다음과 같습니다:
Blame: Date Format
항목은 키에 설정된 계층에 따라 나누어집니다. 예를 들어 이러한 항목들은
gitMagic.blame.dateFormat
gitMagic.blame.format
gitMagic.blame.heatMap.enabled
gitMagic.blame.heatMap.location
한개의 그룹에서 다음과 같이 나타납니다:
Blame: Date Format
Blame: Format
Blame › Heatmap: Enabled
Blame › Heatmap: Location
그렇지 않은 경우, 속성은 알파벳 순서대로 나타납니다. (manifest에 나열된 순서가 아닌)
구성 키는 JSON 스키마의 상위 집합을 이용하여 정의됩니다.
description / markdownDescription
description 3️⃣ 은 description 이 체크박스를 위한 라벨에 쓰이는 boolean을 제외하고, title 과 input field 사이에 나타납니다. 6️⃣
{
"gitMagic.blame.heatmap.enabled": {
"description": "Specifies whether to provide a heatmap indicator in the gutter blame annotations"
}
}description 대신 markdownDescription을 사용하는 경우, description은 설정 UI에 Markdown 형태로 렌더링 될 것입니다.
{
"gitMagic.blame.dateFormat": {
"markdownDescription": "Specifies how to format absolute dates (e.g. using the `${date}` token) in gutter blame annotations. See the [Moment.js docs](https://momentjs.com/docs/#/displaying/format/) for valid formats"
}
}type
number 4️⃣ , string 5️⃣ , boolean 6️⃣ 타입의 항목은 설정 UI에서 직접 편집 될 수 있습니다.
{
"gitMagic.views.pageItemLimit": {
"type": "number",
"default": 20,
"markdownDescription": "Specifies the number of items to show in each page when paginating a view list. Use 0 to specify no limit"
}
}boolean 항목의 경우, description (혹은 markdownDescription)이 체크박스를 위한 라벨로 쓰일 것입니다.
For boolean entries, the description (or markdownDescription) will be used as the label for the checkbox.
{
"gitMagic.blame.compact": {
"type": "boolean",
"description": "Specifies whether to compact (deduplicate) matching adjacent gutter blame annotations"
}
}다른 타입, 예를 들면 object와 array 같은 경우, 설정 UI에 직접 노출 되지 않으며 오직 JSON을 직접 편집하는 방식으로만 수정 될 수 있습니다.
사용자는 이들을 편집하는 대신, 위의 스크린샷과 같이 Edit in settings.json에 대한 링크를 확인 할 수 있습니다. 8️⃣
enum / enumDescriptions
enum 7️⃣ 속성으로 배열을 제공할 경우, 설정 UI는 드롭다운 메뉴의 형태로 렌더링 할 것입니다.
enumDescriptions 속성을 제공하여, 드롭다운 메뉴의 아래 부분에 설명 글을 제공 할 수 있습니다:
{
"gitMagic.blame.heatmap.location": {
"type": "string",
"default": "right",
"enum": ["left", "right"],
"enumDescriptions": [
"Adds a heatmap indicator on the left edge of the gutter blame annotations",
"Adds a heatmap indicator on the right edge of the gutter blame annotations"
]
}
}다른 JSON 스키마 속성
JSON 스키마에서 정의된 특성을 사용하여 구성 값에 대한 다른 제한 조건을 설명 할 수 있습니다.
default: 속성의 기본값 정의minimum,maximum: 숫자 값 제한maxLength,minLength: 문자열 길이 제한pattern: 정규식으로 문자열 제한format:date,time,ipv4,email그리고uri와 같은, 알려진 형태로 문자열 제한maxItems,minItems: 배열 길이 제한
이러한 기능 및 기타 기능에 대한 자세한 내용은, JSON Schema Reference를 참조 하십시오.
scope
구성 설정은 다음과 같은 범위를 가질 수 있습니다:
application- 모둔 VS Code 인스턴스에 적용되며 사용자 설정에서만 구성 할 수 있습니다.machine- 사용자 혹은 기기 설정에서 구성할 수 있는 기기 별 설정입니다. 예를 들어 여러 컴퓨터에서 공유 될 수 없는 설치 경로가 있습니다.machine-overridable- 작업 공간 또는 폴더 설정으로 대체 할 수 있는 기기 별 설정입니다.window- 사용자, 작업공간 또는 원격 설정에서 구성 할 수 있는 Windows(인스턴스) 별 설정입니다.resource- 파일 및 폴더에 적용되며, 폴더 설정을 포함한 모든 설정 수준에서 구성 할 수 있는 리소스 설정입니다.
구성 범위는 설정 에디터를 통해 사용자가 설정을 사용 할 수 있는 시기와 설정 적용 가능 여부를 결정합니다. scope가 선언 되지 않은 경우, 기본값은 window입니다.
아래는 빌트인 Git 익스텐션에 대한 구성 설정입니다:
{
"contributes": {
"configuration": {
"title": "Git",
"properties": {
"git.alwaysSignOff": {
"type": "boolean",
"scope": "resource",
"default": false,
"description": "%config.alwaysSignOff%"
},
"git.ignoredRepositories": {
"type": "array",
"default": [],
"scope": "window",
"description": "%config.ignoredRepositories%"
}
}
}
}
}git.alwaysSignOff에는 resource 범위가 있어 사용자, 작업공간, 폴더 별로 설정 될 수 있으며 window 범위를 가진 무시되는 저장소 목록은 VS Code window 혹은 작업공간에 더 광범위 하게 적용 됩니다(다중 루트 포함).
기본 언어 별 에디터 구성을 제공합니다. 이는 제공된 언어의 기본 에디터 구성을 덮어쓰기 합니다.
아래의 예시는 markdown 언어의 기본 에디터 구성입니다:
{
"contributes": {
"configurationDefaults": {
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": false
}
}
}
}title과 (옵션) 아이콘, 카테고리, 활성화 상태를 구성하는 커맨드를 UI에 제공합니다. 활성화는 when 문구를 통해 표현됩니다. 기본값으로 커맨드는 Command Palette (kb(workbench.action.showCommands)) 에서 표시되지만 다른 메뉴에도 표시 될 수 있습니다.
제공되는 커맨드의 표시는 포함되어 있는 메뉴에 따라 다릅니다. 예를 들어 Command Palette는, category를 커맨드 앞에 달아 쉽게 그룹지을 수 있습니다. 그러나, Command Palette는 아이콘이나 비활성화된 커맨드는 표기하지 않습니다. 한편 에디터 컨텍스트 메뉴는 비활성화된 내용을 표시하지만 카테고리 라벨은 표기 하지 않습니다.
주의: 커맨드가 실행되었을때 (키바인딩이나, Command Palette 에서, 혹은 다른 메뉴나 프로그래밍방식으로) VS Code는 활성화 이벤트
onCommand:${command}를 실행합니다.
{
"contributes": {
"commands": [
{
"command": "extension.sayHello",
"title": "Hello World",
"category": "Hello",
"icon": {
"light": "path/to/light/icon.svg",
"dark": "path/to/dark/icon.svg"
}
}
]
}
}커맨드 익스텐션 가이드를 참조하여 VS Code 익스텐션에서의 커맨드 사용에 관한 더 많은것을 배우십시오.
Size:아이콘은 1 픽셀 패딩을 갖는 16x16 크기이고 가운데 정렬 되있어야 합니다.Color:아이콘은 한개의 색상을 사용해야합니다.Format:모든 타입의 이미지 파일이 허용되지만, SVG가 권장됩니다
커맨드에 대한 메뉴 항목을 에디터나 탐색기에 제공합니다. 메뉴 항목 정의에는 선택 되었을때 호출되야하는 커맨드와 항목이 표시된 조건이 포함됩니다. 후자는 when절로 정의되며, 이는 키바인딩 when 절 컨텍스트를 사용합니다.
필수 command속성에 추가로, alt- 속성을 사용하여 대체 명령을 정의 할 수 있습니다. 메뉴를 여는 동안 kbstyle(Alt)를 누르면 표시되고 호출 됩니다.
마지막으로 group속성은 메뉴 항목의 정렬과 그룹을 설정합니다. navigation group은 항상 메뉴의 맨 위/시작 위치에 정렬 됩니다.
주의
when절은 메뉴에 적용되고enablement절은 커맨드에 적용됩니다.enablement는 모든 메뉴와 키바인딩에도 적용되지만when은 단일 메뉴에만 적용 됩니다.
현재 익스텐션 작성자는 다음을 작성 할 수 있습니다:
- 전역 Command Palette -
commandPalette - 탐색기 컨텍스트 메뉴 -
explorer/context - 에디터 컨텍스트 메뉴 -
editor/context - 에디터 제목 메뉴 바 -
editor/title - 에디터 제목 컨텍스트 메뉴 -
editor/title/context - 디버그 콜스택 뷰 컨텍스트 메뉴 -
debug/callstack/context - 디버그 툴바 -
debug/toolbar - SCM 제목 메뉴 -
scm/title - SCM 리소스 그룹 menus -
scm/resourceGroup/context - SCM 리소스 menus -
scm/resourceState/context - SCM 제목 변경 menus -
scm/change/title - 뷰 제목 메뉴 -
view/title - 뷰 아이템 메뉴 -
view/item/context - macOS 터치 바 -
touchBar - 주석 쓰레드 제목 -
comments/commentThread/title - 주석 쓰레드 액션 -
comments/commentThread/context - 주석 제목 -
comments/comment/title - 주석 액션 -
comments/comment/context
주의: 커맨드가 (컨텍스트) 메뉴에서 실행 될경우, VS Code는 현재 선택된 리소스를 유추하려고 시도하며 커맨드 호출시 이를 매개변수로 전달합니다. 예를 들어, 탐색기 내의 메뉴 항목에는 선택된 리소스의 URI가 전달 되고 에디터 내부의 메뉴 항목에서는 문서의 URI가 전달 됩니다.
제목외에도, 커맨드는 에디터 제목 메뉴 바에 VS Code가 보일 아이콘을 정의 할 수도 있습니다.
{
"contributes": {
"menus": {
"editor/title": [
{
"when": "resourceLangId == markdown",
"command": "markdown.showPreview",
"alt": "markdown.showPreviewToSide",
"group": "navigation"
}
]
}
}
}
package.json에 커맨드를 등록할때, 자동적으로 Command Palette (kb(workbench.action.showCommands))에 보여집니다. 커맨드 가시성을 보다 잘 제어 하기 위해 commandPalette 메뉴 항목을 사용하십시오. 이를 통해 Command Palette에 커맨드를 표시해야 하는지 여부를 제어하는 when 조건을 정의 할 수 있습니다.
아래의 snippet은 Hello World 커맨드가 에디터에서 뭔가 선택 되었을때만 Command Palette에 보이게합니다:
{
"commands": [
{
"command": "extension.sayHello",
"title": "Hello World"
}
],
"menus": {
"commandPalette": [
{
"command": "extension.sayHello",
"when": "editorHasSelection"
}
]
}
}메뉴 항목은 그룹으로 정렬 될 수 있습니다. 이는 다음과 같은 규칙에 따라 순서대로 정렬 됩니다. 이 그룹에 메뉴 항목을 추가하거나, 사이 아래 혹은 위에 새 그룹을 추가 할 수 있습니다.
에디터 컨텍스트 메뉴는 아래의 기본 그룹을 가지고 있습니다:
navigation-navigation은 모든 경우에서 먼저 나타납니다.1_modification- 이 그룹은 다음으로 등장하며, 코드를 수정 할 수 있는 커맨드를 포함합니다.9_cutcopypaste- 기본 편집 커맨드를 포함하는 다음 기본 그룹입니다.z_commands- 마지막 기본 그룹으로 Command Palette를 여는 항목을 포함합니다.
탐색기 컨텍스트 메뉴 는 아래의 기본 그룹을 가지고 있습니다:
navigation- VS Code 탐색과 관련된 커맨드입니다. 모든 경우에서 먼저 나타납니다.2_workspace- 작업 공간 조작과 관련된 커맨드입니다.3_compare- diff 에디터에서 파일을 비교하는것과 연관된 커맨드입니다.4_search- 서치 뷰 에서 검색과 연관된 커맨드입니다.5_cutcopypaste- 파일 잘라내기 복사 및 붙여넣기와 관련된 커맨드입니다.6_copypath- 파일 경로 복사와 관련된 커맨드입니다.7_modification- 파일 수정과 연관된 커맨드입니다.
에디터 탭 컨텍스트 메뉴 는 아래의 기본 그룹을 갖습니다:
1_close- 에디터를 닫는것과 관련된 커맨드입니다.3_preview- 에디터를 고정시키는 것과 관련된 커맨드입니다.
에디터 제목 메뉴 는 아래의 기본 그룹을 갖습니다:
1_diff- diff 에디터와 작업하는 것과 관련된 커맨드입니다.3_open- 에디터를 여는것과 관련된 커맨드입니다.5_close- 에디터를 닫는것과 관련된 커맨드입니다.
그룹 내부의 순서는 제목 혹은 순서 속성에 의존합니다. 메뉴 항목의 그룹-로컬 순서는 그룹 식별자에 아래와 같이 @<number>를 더하는 것으로 지정됩니다:
{
"editor/title": [
{
"when": "editorHasSelection",
"command": "extension.Command",
"group": "myGroup@1"
}
]
}사용자가 키 조합을 눌렀을때 어떤 커맨드를 호출할지 정의하는 키바인딩 규칙을 제공합니다. 키 바인딩에 대해 자세히 설명하는 키 바인딩을 참조하십시오.
키 바인딩을 제공하면 기본 키보드 바로가기에 규칙이 표시되고, 커맨드의 모든 UI 에 추가한 키 바인딩이 표시됩니다. 그리고 사용자가 키 조합을 누를경우 커맨드가 실행 될 것입니다.
주의: VS Code는 수정자에 따라 다른, Windows, macOS 그리고 Linux에서 실행 되므로 "key"를 사용하여 기본 키 조합을 설정하고 특정 플랫폼에 덮어 쓸 수 있습니다.
주의: 커맨드가 실행되면 (키 바인딩이나 Command Palette로 부터), VS Code는 활성화 이벤트
onCommand:${command})를 전송 할 것입니다.
Windows 및 Linux에서kbstyle(Ctrl+F1)로, 그리고 macOS에서 kbstyle(Cmd+F1)로 정의하여 "extension.sayHello" 명령이 실행됩니다:
{
"contributes": {
"keybindings": [
{
"command": "extension.sayHello",
"key": "ctrl+f1",
"mac": "cmd+f1",
"when": "editorTextFocus"
}
]
}
}
언어 정의를 작성합니다. 이는 새로운 언어를 소개하거나 VS Code가 언어에 대하여 더 많은 지식을 갖게 합니다.
contributes.languages의 주된 효과는 :
vscode.TextDocument.getLanguageId()나onLanguage활성화 이벤트와 같이 VS Code API의 다른 부분에서 다시 사용 될 수 있는languageId를 정의합니다.alias필드를 사용하여 사람이 읽을 수 있도록 합니다. 목록의 첫번째 항목은 사람이 읽을 수 있는 라벨로 사용 됩니다.- 파일 이름 익스텐션, 파일 이름 패턴이나 특정 라인 (hashbag 같은)으로 시작하는 파일, mimetypes를 해당
languageID에 연결 합니다. - 작성된 언어에 대하여, 선언적 언어 기능을 제공합니다. 구성 가능한 편집 기능에 대해서, 언어 구성 가이드를 참조하십시오.
{
"contributes": {
"languages": [
{
"id": "python",
"extensions": [".py"],
"aliases": ["Python", "py"],
"filenames": [],
"firstLine": "^#!/.*\\bpython[0-9.-]*\\b",
"configuration": "./language-configuration.json"
}
]
}
}VS Code에 디버거를 제공합니다. 디버거 제공은 다음의 속성들을 갖습니다:
type은 시작 구성에서 디버거를 식별하는데 쓰이는 고유 ID입니다.labelUI에서 사용자가 볼 수 있는 디버거의 이름입니다.program실제 디버거 혹은 런타임에 대해 VS Code 디버그 프로토콜을 구현하는 디버그 어댑터의 경로입니다.runtime디버거 어댑터에 경로는 실행불가능 하지만 런타임을 필요로 하는 경우입니다.configurationAttributes이 디버거와 관련된 시작 구성 인수에 대한 스키마 입니다.initialConfigurations는 초기 launch.json을 채우는데 쓰이는 시작 구성의 목록 입니다.configurationSnippetslaunch.json을 편집할때 IntelliSense를 통해 사용 가능한 시작 구성의 목록입니다.variables대체 변수를 도입하여 이버거익스텐션으로 구현된 명령에 바인딩 합니다.languages디버거 익스텐션이 "기본 디버거"로 고려될 수 있는 언어입니다.adapterExecutableCommand디버그 어댑터 실행 경로 및 인수가 동적으로 계산되는 커맨드 ID입니다. 커맨드는 다음 형태의 구조를 반환 합니다:
{
"command": "<executable>",
"args": ["<argument1>", "<argument2>", "<argumentsn...>"]
}command속성은 반드시 실행가능한 절대 경로이거나 PATH 환경 변수를 통해 조회할 수 있는 실행 파일의 이름이어야 합니다. 특수한 값 node는 PATH에서 조회되지 않고 VS Code의 빌트인 노드 런타임에 매핑됩니다.
{
"contributes": {
"debuggers": [
{
"type": "node",
"label": "Node Debug",
"program": "./out/node/nodeDebug.js",
"runtime": "node",
"languages": ["javascript", "typescript", "javascriptreact", "typescriptreact"],
"configurationAttributes": {
"launch": {
"required": ["program"],
"properties": {
"program": {
"type": "string",
"description": "The program to debug."
}
}
}
},
"initialConfigurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
}
],
"configurationSnippets": [
{
"label": "Node.js: Attach Configuration",
"description": "A new configuration for attaching to a running node program.",
"body": {
"type": "node",
"request": "attach",
"name": "${2:Attach to Port}",
"port": 9229
}
}
],
"variables": {
"PickProcess": "extension.node-debug.pickNodeProcess"
}
}
]
}
}debugger를 통합하는 방법에 대한 완전한 연습은, 디버거 익스텐션을 참조하십시오.
일반적으로 디버거 익스텐션은 contibutes.breakpoints 항목이 있으며, 이는 익스텐션에서 설정 중단점을 사용할 언어 파일 형식이 나열 됩니다.
{
"contributes": {
"breakpoints": [
{
"language": "javascript"
},
{
"language": "javascriptreact"
}
]
}
}언어에 TextMate 문법을 작성합니다. 이 문법이 적용될 langugae, 문법에 대한 TextMate scopeName과 파일 경로를 반드시 제공해야합니다.
주의: 문법을 포함하는 파일은 JSON(파일명이 .json으로 끝나는) 이나 XML plist 형태 (다른 모든 파일)일 수 있습니다.
{
"contributes": {
"grammars": [
{
"language": "markdown",
"scopeName": "text.html.markdown",
"path": "./syntaxes/markdown.tmLanguage.json",
"embeddedLanguages": {
"meta.embedded.block.frontmatter": "yaml"
}
}
]
}
}구문 강조 가이드 를 참조하여 구문 강조를 수신하기 위해 언어와 관련된 TextMate 문법을 등록하는 방법에 대한 자세한 내용을 확인하십시오.
VS Code에 TextMate 테마를 제공합니다. 테마가 dark 테마인지 혹은 light 테마인지 (나머지 VS Code가 테마와 일치하도록 변경됨)에 대한 여부와, 파일 경로(XML plist 형태)에 대한 라벨을 지정해야합니다.
{
"contributes": {
"themes": [
{
"label": "Monokai",
"uiTheme": "vs-dark",
"path": "./themes/Monokai.tmTheme"
}
]
}
}
색상 테마 가이드를 참조하여 색상 테마를 생성하는 방법을 확인하십시오.
특정 언어에 대한 snippet을 작성합니다. language속성은 language identifier이고, path는 VS Code snippet 형태로 snippet을 정의하는 snippet 파일에 대한 상대 경로입니다.
아래의 예시는 Go 언어에 대한 snippet을 추가합니다.
{
"contributes": {
"snippets": [
{
"language": "go",
"path": "./snippets/go.json"
}
]
}
}특정 유형의 json파일에 대한 유효성 검증 스키마를 제공합니다. url값은 익스텐션에 포함된 스키마 파일의 로컬 경로 이거나 json schema store와 같은 원격 서버 URL일 수 있습니다.
{
"contributes": {
"jsonValidation": [
{
"fileMatch": ".jshintrc",
"url": "http://json.schemastore.org/jshintrc"
}
]
}
}VS Code에 뷰를 제공합니다. 뷰의 식별자와 이름을 반드시 지정해야 합니다. 다음과 같은 뷰 컨테이너를 제공 할 수 있습니다:
explorer: 활동 표시 줄의 탐색기 뷰 컨테이너scm: 활동 표시 줄의 소스 제어 관리 (SCM) 뷰 컨테이너debug: 활동 표시 줄의 디버그 뷰 컨테이너test: 활동 표시 줄의 테스트 뷰 컨테이너- 익스텐션에서 제공되는 커스텀 뷰 컨테이너
사용자가 뷰를 열때, VS Code는 활성화 이벤트 onView:${viewId}, (아래 예시에서는 onView:nodeDependencies)를 전송 합니다. when 컨텍스트 값을 제공하는 것으로 뷰의 가시성을 제어 할 수도 있습니다.
{
"contributes": {
"views": {
"explorer": [
{
"id": "nodeDependencies",
"name": "Node Dependencies",
"when": "workspaceHasPackageJSON"
}
]
}
}
}
익스텐션 작성자는 createTreeView API를 통해 데이터 제공자를 제공하여 트리 뷰를 작성하거나,registerTreeDataProvider API를 통해 데이터 제공자를 직접 등록하여 데이터를 채워야 합니다. 이곳의 예시를 참조하십시오.
커스텀 뷰에 기여할 수 있는 뷰 컨테이너를 제공합니다. 뷰 컨테이너를 위한 식별자, 제목 그리고 아이콘을 반드시 지정해야 합니다. 현재는, 활동 표시 줄 (activityBar)에만 작성 할 수 있습니다. 아래의 예시는 어떻게 Package Explorer뷰 컨테이너가 활동 표시 줄에 기여하는 방법과 뷰가 어떻게 기여되는지 보여줍니다.
{
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "package-explorer",
"title": "Package Explorer",
"icon": "resources/package-explorer.svg"
}
]
},
"views": {
"package-explorer": [
{
"id": "package-dependencies",
"name": "Dependencies"
},
{
"id": "package-outline",
"name": "Outline"
}
]
}
}
}
-
Size:아이콘은 가운데 정렬된 24x24 여야 합니다. -
Color:아이콘은 한가지 색상을 사용해야합니다. -
Format:모든 이미지 파일 형태가 허용 되지만 SVG 가 권장됩니다. -
States:모든 아이콘은 다음과 같은 상태 스타일을 상속합니다:State 투명도 Default 60% Hover 100% Active 100%
문제 매처 패턴을 제공합니다. 이러한 기여는 출력 패널 러너와 터미널 러너 모두에서 작동합니다. 아래는 익스텐션에서 gcc 컴파일러에 대한 문제 매처를 제공하는 예시입니다.
{
"contributes": {
"problemMatchers": [
{
"name": "gcc",
"owner": "cpp",
"fileLocation": ["relative", "${workspaceFolder}"],
"pattern": {
"regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
"file": 1,
"line": 2,
"column": 3,
"severity": 4,
"message": 5
}
}
]
}
}문제 매처는 tasks.json파일에서 이름 참조 $gcc를 통해 사용 될 수 있습니다. 예시는 아래와 같습니다:
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"command": "gcc",
"args": ["-Wall", "helloWorld.c", "-o", "helloWorld"],
"problemMatcher": "$gcc"
}
]
}다음도 참조 하십시오: 문제 매처 정의
문제 매처에서 사용 될 수 있는 명명된 문제 패턴을 제공합니다 (위 참조).
시스템에서 제공된 작업을 고유하게 식별 할 수 있는 오브젝트 리터럴 구조를 제공하고 정의합니다. 작업 정의에는 최소한의 type속성이 필요하지만 일반적으로 추가 속성들을 정의합니다. 예를 들어 package.json 파일에서 스크립트를 나타내는 작업에 대한 작업 정의는 다음과 같습니다:
{
"taskDefinitions": [
{
"type": "npm",
"required": ["script"],
"properties": {
"script": {
"type": "string",
"description": "The script to execute"
},
"path": {
"type": "string",
"description": "The path to the package.json file. If omitted the package.json in the root of the workspace folder is used."
}
}
}
]
}작업 정의는 required와 property속성에 대하여 JSON 스키마 구문을 사용하여 정의 됩니다. type속성은 작업의 유형을 정의합니다. 위의 예시 같은 경우:
"type": "npm"작업 정의를 "npm" 작업과 연결합니다."required": [ "script" ]는script속성을 필수 속성으로 정의합니다.path속성은 선택사항입니다."properties": { ... }` 는 추가 특성과 그 유형을 정의합니다.
익스텐션이 실제로 작업을 생성할때, package.json파일에 제공되는 작업 정의를 따르는 TaskDefinition을 전달해야합니다. npm예시의 경우, package.json파일 내의 테스트 스크립트에 대한 작업 생성은 다음과 같습니다:
let task = new vscode.Task({ type: 'npm', script: 'test' }, ....);새 색상 테마를 작성합니다. 이 색상들은 에디터 데코레이터와 상태 표시줄에서 익스텐션에 의해 사용 될 수 있습니다. 한번 정의되면, 사용자는 workspace.colorCustomization 설정에서 색상을 커스텀 할 수 있습니다.
{
"contributes": {
"colors": [
{
"id": "superstatus.error",
"description": "Color for error message in the status bar.",
"defaults": {
"dark": "errorForeground",
"light": "errorForeground",
"highContrast": "#010203"
}
}
]
}
}밝은 색상, 어두운 색상 및 고대비 테마에 대한 색상 기본값을 정의 할 수 있으며, 기존 색상이나 Color Hex Value을 참조할 수 있습니다.
익스텐션은 ThemeColor API를 사용하여 새로운 테마와 기존 테마 색상을 사용 할 수 있습니다:
const errorColor = new vscode.ThemeColor("superstatus.error");VS Code의 자바스크립트 및 타입스크립트 지원을 보강하는 타입스크립트 서버 플러그인을 제공합니다.
{
"contributes": {
"typescriptServerPlugins": [
{
"name": "typescript-styled-plugin"
}
]
}
}위의 예시 익스텐션은 자바스크립트 및 타입스크립트 용 스타일 구성 요소 IntelliSense를 추가하는 typescript-styled-plugin를 제공합니다. 이 플로그인은 익스텐션에서 로드되며 반드시 익스텐션에서 일반 NPM dependency로 설치되어야 합니다:
{
"dependencies": {
"typescript-styled-plugin": "*"
}
}타입스크립트 서버 플러그인은 사용자가 VS Code 버전의 타입스크립트를 사용할때 모든 자바스크립트와 타입스크립트 파일에 대해 로드 됩니다. 사용자가 작업 공간 버전의 타입스크립트를 사용하는 경우에는 활성화 되지 않습니다.
작업공간의 모든 위치에 URI를 표기하는 방법을 지정하는 리소스 라벨 포맷터를 제공합니다. 예를 들어 익스텐션이 remotehub라는 스키마를 갖는 URI에 대한 포맷터를 제공하는 방법입니다:
{
"contributes": {
"resourceLabelFormatters": [
{
"scheme": "remotehub",
"formatting": {
"label": "${path}",
"separator": "/",
"workspaceSuffix": "GitHub"
}
}
]
}
}이것이 의미하는 바는 remotehub 스키마를 갖는 모든 URI는 URI의 path세그먼트만 표기되어 렌더링 되며, 구분기호는 /입니다. remotehubURI를 갖는 작업공간은 라벨 뒤에 Github 단어가 붙습니다.
익스텐션은 VS Code의 빌트인 타입스크립트 확장에서 제공하는 API를 통해 구성 데이터를 작성된 타입스크립트 플러그인에 전송 할 수 있습니다:
// In your VS Code extension
export async function activate(context: vscode.ExtensionContext) {
// Get the TS extension
const tsExtension = vscode.extensions.getExtension('vscode.typescript-language-features');
if (!tsExtension) {
return;
}
await tsExtension.activate();
// Get the API from the TS extension
if (!tsExtension.exports || !tsExtension.exports.getAPI) {
return;
}
const api = tsExtension.exports.getAPI(0);
if (!api) {
return;
}
// Configure the 'my-typescript-plugin-id' plugin
api.configurePlugin('my-typescript-plugin-id', {
someValue: process.env['SOME_VALUE']
});
}타입스크립트 서버 플러그인은 설정 데이터를 onConfigurationChanged메소드를 통해 제공받습니다:
// In your TypeScript plugin
import * as ts_module from 'typescript/lib/tsserverlibrary';
export = function init({ typescript }: { typescript: typeof ts_module }) {
return {
create(info: ts.server.PluginCreateInfo) {
// Create new language service
},
onConfigurationChanged(config: any) {
// Receive configuration changes sent from VS Code
}
};
};이 API는 VS Code 익스텐션이 VS Code 설정을 타입스크립트 서버 플러그인과 동기화 하거나, 플러그인의 동작을 동적으로 변경 할 수 있게 합니다. TypeScript TSLint plugin과 lit-html익스텐션을 참조하여 이 API가 어떻게 실제로 사용되는지 확인 하십시오.