이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

Visual Studio Code로 JSON 편집하기

JSON은 package.json 또는 project.json과 같은 구성 파일에서 흔히 사용되는 데이터 형식입니다. Visual Studio Code에서도 구성 파일에 광범위하게 사용합니다. .json으로 끝나는 파일을 열면 VS Code는 파일의 내용을 더 쉽게 작성하거나 수정할 수 있는 기능을 제공합니다.

JSON within VS Code

IntelliSense 및 유효성 검사

스키마가 있거나 없는 JSON 데이터의 속성 및 값 모두에 대해 입력 시 IntelliSense로 제안을 제공합니다. 제안 트리거 명령(⌃Space (Windows, Linux Ctrl+Space))으로 수동으로 제안을 볼 수도 있습니다.

또한 연결된 JSON 스키마를 기반으로 구조 및 값 검증을 수행하여 빨간색 물결 밑줄을 표시합니다. 유효성 검사를 비활성화하려면 json.validate.enable 설정을 사용하세요.

IntelliSense

패키지 및 프로젝트 종속성

package.json, project.json 및 bower.json에서 패키지 및 프로젝트 종속성과 같은 특정 값 집합에 대한 IntelliSense도 제공합니다.

빠른 탐색

JSON 파일은 커질 수 있으며 기호로 이동 명령(⇧⌘O (Windows, Linux Ctrl+Shift+O))을 사용하여 속성으로 빠르게 이동할 수 있습니다.

Goto Symbol

호버

스키마가 있거나 없는 JSON 데이터의 속성 및 값에 마우스를 가져가면 추가 컨텍스트를 제공합니다.

Hover

서식

Shift+Alt+F (Windows, Linux Ctrl+Shift+I) 또는 컨텍스트 메뉴의 문서 서식을 사용하여 JSON 문서를 서식 지정할 수 있습니다.

폴딩

줄 번호와 줄 시작 사이의 여백에 있는 접기 아이콘을 사용하여 소스 코드 영역을 접을 수 있습니다. 모든 개체 및 배열 요소에 대해 접기 영역을 사용할 수 있습니다.

주석이 있는 JSON

기본 JSON 모드는 JSON 사양을 따르는 것 외에도 VS Code에는 주석이 있는 JSON(jsonc) 모드가 있습니다. 이 모드는 settings.json, tasks.json 또는 launch.json과 같은 VS Code 구성 파일에 사용됩니다. 주석이 있는 JSON 모드에서는 JavaScript에서와 같이 한 줄 주석(//)과 블록 주석(/* */)을 사용할 수 있습니다. 이 모드는 후행 쉼표도 허용하지만 권장되지 않으며 편집기는 경고를 표시합니다.

현재 편집기 모드는 편집기의 상태 표시줄에 표시됩니다. 모드 표시기를 선택하여 모드를 변경하고 파일 확장명이 모드에 연결되는 방식을 구성합니다. 또한 files.associations 설정을 직접 수정하여 파일 이름 또는 파일 이름 패턴을 jsonc에 연결할 수 있습니다.

JSON 스키마 및 설정

JSON 파일의 구조를 이해하기 위해 JSON 스키마를 사용합니다. JSON 스키마는 JSON 파일의 모양뿐만 아니라 값 집합, 기본값 및 설명을 설명합니다. VS Code에 포함된 JSON 지원은 draft 4부터 draft 7까지의 모든 draft 버전을 지원하며, draft 2019-09 및 2020-12에 대한 제한적인 지원을 제공합니다.

JSON Schema Store와 같은 서버는 대부분의 일반적인 JSON 기반 구성 파일에 대한 스키마를 제공합니다. 그러나 스키마는 VS Code 작업 영역의 파일뿐만 아니라 VS Code 설정 파일에도 정의할 수 있습니다.

JSON 파일과 스키마의 연결은 $schema 속성을 사용하여 JSON 파일 자체에서 또는 사용자 또는 작업 영역 설정(파일 > 기본 설정 > 설정)에서 json.schemas 속성 아래에서 수행할 수 있습니다.

VS Code 확장도 스키마 및 스키마 매핑을 정의할 수 있습니다. 이 때문에 VS Code는 이미 package.json, bower.json 및 tsconfig.json과 같이 잘 알려진 일부 JSON 파일의 스키마를 알고 있습니다.

JSON에서의 매핑

다음 예에서 JSON 파일은 해당 내용이 CoffeeLint 스키마를 따른다고 지정합니다.

{
  "$schema": "https://json.schemastore.org/coffeelint",
  "line_endings": "unix"
}

이 구문은 VS Code별이며 JSON Schema 사양의 일부가 아님에 유의하세요. $schema 키를 추가하면 JSON 자체가 변경되므로, JSON을 사용하는 시스템에서는 예상하지 못할 수 있습니다. 예를 들어 스키마 유효성 검사가 실패할 수 있습니다. 이 경우 다른 매핑 방법 중 하나를 사용할 수 있습니다.

사용자 설정에서의 매핑

사용자 설정의 다음 발췌는 .babelrc 파일이 https://json.schemastore.org/babelrc에 있는 babelrc 스키마에 어떻게 매핑되는지 보여줍니다.

"json.schemas": [
    {
        "fileMatch": [
            "/.babelrc"
        ],
        "url": "https://json.schemastore.org/babelrc"
    }
]

팁: .babelrc에 대한 스키마를 정의하는 것 외에도 .babelrc가 JSON 언어 모드에 연결되어 있는지 확인하세요. 이는 files.association 배열 설정을 사용하여 설정에서도 수행됩니다.

작업 영역의 스키마에 매핑

작업 영역에 있는 스키마를 매핑하려면 상대 경로를 사용합니다. 이 예에서는 작업 영역 루트에 있는 myschema.json 파일이 .foo.json으로 끝나는 모든 파일의 스키마로 사용됩니다.

"json.schemas": [
    {
        "fileMatch": [
            "**/*.foo.json"
        ],
        "url": "./myschema.json"
    }
]

설정에서 정의된 스키마에 매핑

사용자 또는 작업 영역 설정에서 정의된 스키마를 매핑하려면 schema 속성을 사용합니다. 이 예에서는 .myconfig라는 이름의 모든 파일에 사용될 스키마가 정의됩니다.

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

확장의 스키마 매핑

스키마 및 스키마 연결은 확장에서도 정의할 수 있습니다. jsonValidation 기여 지점을 확인하세요.

파일 일치 구문

파일 일치 구문은 '*' 와일드카드를 지원합니다. 또한 '!'로 시작하는 제외 패턴을 정의할 수 있습니다. 연결이 일치하려면 최소한 하나의 패턴이 일치해야 하며 마지막으로 일치하는 패턴은 제외 패턴이 아니어야 합니다.

  "json.schemas": [
    {
      "fileMatch": [
        "/receipts/*.json",
        "!/receipts/*.excluded.json"
      ],
      "url": "./receipts.schema.json"
    }
  ]

JSON 스키마에서 스니펫 정의

JSON 스키마는 JSON 파일의 모양, 값 집합 및 기본값을 설명하며, 이는 JSON 언어 지원에서 완성 제안을 제공하는 데 사용됩니다. 스키마 작성자이고 더 맞춤화된 완성 제안을 제공하고 싶다면 스키마에 스니펫을 지정할 수도 있습니다.

다음 예는 스니펫을 정의하는 키보드 바로 가기 설정 파일에 대한 스키마를 보여줍니다.

{
    "type": "array",
    "title": "Keyboard shortcuts configuration",
    "items": {
        "type": "object",
        "required": ["key"],
        "defaultSnippets": [
            {
                "label": "New keyboard shortcut",
                "description": "Binds a key to a command for a given state",
                "body": { "key": "$1", "command": "$2", "when": "$3" }
            }
        ],
        "properties": {
            "key": {
                "type": "string"
            }
            ...
        }
    }
}

JSON 스키마의 예

Default snippets in JSON schema

defaultSnippets 속성을 사용하여 주어진 JSON 개체에 대한 여러 스니펫을 지정할 수 있습니다.

  • label과 description은 완성 선택 대화 상자에 표시됩니다. 레이블이 제공되지 않으면 스니펫의 문자열화된 개체 표현이 대신 레이블로 표시됩니다.
  • body는 문자열화되어 사용자가 완성을 선택할 때 삽입되는 JSON 개체입니다. 스니펫 구문을 사용하여 문자열 리터럴 내에서 탭 정지, 플레이스홀더 및 변수를 정의할 수 있습니다. 문자열이 ^로 시작하는 경우, 문자열 내용은 문자열화되지 않고 그대로 삽입됩니다. 이를 사용하여 숫자 및 부울에 대한 스니펫을 지정할 수 있습니다.

defaultSnippets는 JSON 스키마 사양의 일부가 아닌 VS Code별 스키마 확장임에 유의하세요.

호버에서 풍부한 서식 사용

VS Code는 JSON Schema 사양의 표준 description 필드를 사용하여 호버 및 자동 완성 중에 속성에 대한 정보를 제공합니다.

설명이 링크와 같은 서식을 지원하도록 하려면 markdownDescription 속성을 사용하여 서식에 Markdown을 사용하도록 선택할 수 있습니다.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the entry",
      "markdownDescription": "The name of the entry. [See the documentation](https://example.com)"
    }
  }
}

markdownDescription은 JSON 스키마 사양의 일부가 아닌 VS Code별 스키마 확장임에 유의하세요.

오프라인 모드

json.schemaDownload.enable은 JSON 확장이 http 및 https에서 JSON 스키마를 가져올지 여부를 제어합니다.

현재 편집기가 다운로드할 수 없는 스키마를 사용하고 싶을 때 상태 표시줄에 경고 삼각형이 표시됩니다.

12/10/2025
English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.