Custom Data Format: HTML 및 CSS 언어 기능의 진화

2020년 2월 24일 by Pine Wu, @octref

웹은 발전하며, 웹을 이루는 언어들도 마찬가지입니다. HTML 및 CSS 사양에는 새로운 엔티티들이 계속해서 추가되고 있습니다. Custom Elements와 Houdini는 사용자가 HTML 및 CSS 의미론을 확장할 수 있도록 합니다. 많은 개발자들이 현재 HTML과 CSS를 내장하는 프로그래밍 언어를 사용하고 있습니다. HTML과 CSS는 점점 더 유연하게 사용되고 있지만, 새로운 기능에 대한 에디터 지원은 종종 뒤처집니다.

Visual Studio Code에서 HTML 및 CSS 언어 지원을 현대화하기 위해, HTML 및 CSS 엔티티를 설명하는 선언적 JSON 형식인 Custom Data Format을 설계했습니다. VS Code의 HTML 및 CSS 언어 서버는 이 형식으로 정의된 데이터를 읽고 새로 정의된 HTML 및 CSS 엔티티에 대한 언어 지원을 제공할 수 있습니다.

이 블로그 게시물에서는 데이터 형식과 사용자와 확장 프로그램 작성자가 이를 활용하는 방법을 설명합니다.

Custom Data Format 사용하기

VS Code는 자동 완성 및 호버 정보에서 HTML/CSS 엔티티에 대한 정보를 제공합니다.

HTML and CSS Language Features

Custom Data Format을 사용하면 사용자는 새로운 HTML/CSS 엔티티를 쉽게 정의하고 자동 완성, 호버 정보 및 기타 언어 기능을 얻을 수 있습니다.

시작하려면 사용자는 html.html-data.json이라는 JSON 파일을 작성할 수 있습니다.

{
  "version": 1.1,
  "tags": [
    {
      "name": "my-button",
      "description": "My button. You should use it as in `<my-button type='alert'></mybutton>`.",
      "references": [
        {
          "name": "Bootstrap buttons",
          "url": "https://getbootstrap.com/docs/4.0/components/buttons/"
        }
      ]
    }
  ]
}

그런 다음 사용자 또는 작업 영역 설정에서 해당 데이터 파일을 가리키는 html.customData 값을 정의합니다.

{
  "html.customData": ["./html.html-data.json"]
}

그러면 정의된 엔티티에 대한 언어 기능을 얻게 됩니다.

Custom Data helloworld

미리 구성된 Custom Data hello world 샘플을 VS Code에서 열어 이 기능을 시험해 볼 수 있습니다. HTML/CSS 사용자 지정 데이터 파일을 편집하여 사용자 지정 엔티티 정의를 추가, 제거 또는 개선하고 언어 기능을 미세 조정할 수 있습니다.

html.customData 및 css.customData 설정은 Custom Data 사용을 위한 좋은 시작점 역할을 합니다. 그러나 Custom Data를 활용하는 다른 방법들도 있습니다. 다음 섹션에서는 확장 프로그램 작성자가 큐레이션된 Custom Data 세트를 공유하거나 Custom Data를 활용하여 언어 지원을 구축하는 방법을 설명합니다.

확장 프로그램을 통한 Custom Data 공유

오늘날 많은 웹 프레임워크는 HTML 위에 구축됩니다. 예를 들어, Mavo 프로젝트는 다양한 mv- 속성으로 HTML 구문을 확장합니다. Custom Data는 이러한 웹 프레임워크를 쉽게 지원할 수 있게 합니다.

모든 Mavo 속성에 대한 Custom Data를 생성합니다.
contributes.html.customData 확장 Contribution Point에서 Custom Data 파일을 지정합니다.
확장 프로그램을 게시하여 다른 사람들이 VS Code에서 Mavo 프레임워크를 사용하는 데 도움을 줍니다.

Mavo 확장 프로그램을 다운로드하면 사용자는 HTML 파일에서 모든 Mavo 속성에 대한 자동 완성 및 호버 정보를 얻을 수 있습니다.

Mavo demo

확장 프로그램의 소스 코드는 vscode-mavo 리포지토리에 있습니다. 이 프로젝트가 VS Code에서 웹 프레임워크 또는 언어 지원 구현을 위한 시작점이 되기를 바랍니다. contributes.html.customData 및 contributes.css.customData Contribution Point에 대한 자세한 내용은 vscode-custom-data에서 찾을 수 있습니다.

언어 서버를 위한 Custom Data 사용

vscode-html-languageservice 및 vscode-css-languageservice 라이브러리는 확장 프로그램 작성자가 HTML 및 CSS를 확장하거나 내장하는 언어에 대한 언어 서버를 쉽게 구현할 수 있도록 합니다. 최근에 사용자 지정 데이터를 로드하는 API를 추가했습니다.

import { getLanguageService } from 'vscode-html-languageservice'

getLanguageService({
  customDataProviders: [...]
})

내장된 HTML 언어 서버는 이 API를 사용하여 다양한 소스에서 수집한 큐레이션된 Custom Data 세트를 로드합니다.

HTML, CSS 및 WAI-ARIA의 W3C 사양
Mozilla Developer Network
Mozilla의 mdn-data 및 mdn-browser-compat-data 패키지
Chrome의 CSS 속성 사용 순위

이 데이터 세트를 NPM에 게시했습니다. 이 데이터는 GitHub에서도 찾을 수 있습니다. 언어 서버 작성자는 이 데이터 세트를 HTML/CSS 언어 서비스와 함께 사용하여 HTML/CSS를 확장하거나 내장하는 언어에 대한 지원을 구현하거나, Pug 또는 Stylus와 같이 HTML/CSS로 트랜스파일되는 언어에 대한 지원을 구현하는 데 이 데이터를 사용할 수 있습니다. 마지막으로, VS Code에서 HTML/CSS에 대한 최신 언어 지원을 제공하기 위해 이 데이터 세트를 계속 큐레이션할 것입니다.

요약

VS Code 팀은 웹 언어에 대한 훌륭한 편집 경험을 제공하기 위해 노력하고 있습니다. Custom Data Format을 통해 최신 HTML 및 CSS 언어 기능에 가깝게 유지하고, 사용자와 확장 프로그램 작성자가 HTML 및 CSS 편집 경험을 사용자 지정할 수 있는 간단한 인터페이스를 제공합니다.

Simple interface

Custom Data Format에 대한 자세한 내용은 vscode-custom-data 리포지토리에서 확인할 수 있으며, 여기서 문제 및 기능 요청을 제기할 수 있습니다.

행복한 코딩 되세요!

Pine Wu, VS Code 팀원 @octref