언어 구성을 사용하여 편집기 동작 사용자 지정

아티클
02/29/2024

언어 구성을 사용하여 언어별 구문 작업을 사용하도록 설정하여 Visual Studio 편집기에서 사용자 지정된 언어별 구문을 구현할 수 있습니다. 언어 서버 사용과 비교하여 언어 구성을 사용하면 모든 작업이 로컬이므로 성능이 향상될 수 있습니다.

언어 구성이란?

Visual Studio는 언어 확장을 통해 다양한 프로그래밍 언어에 대한 지능형 편집 기능을 제공합니다. Language Configuration은 LSP(Language Server Protocol)를 사용하는 서버를 보완하고 Visual Studio 편집기에서 LSP 서버에 대한 비동기 쿼리를 지연하지 않고 서식 지정, 색 지정 및 완료 결정을 내릴 수 있도록 하는 선언적 데이터를 제공합니다. 선언적 언어 기능은 구성 파일에 정의됩니다. 예를 들어 Visual Studio와 함께 번들로 제공되는 HTML, CSS 및 typescript-basic 확장은 다음과 같은 선언적 언어 기능의 하위 집합을 제공합니다.

구문 강조
코드 조각 완성
대괄호 일치
대괄호 자동 묶기
주석 토글
자동 입력

Visual Studio는 모든 프로그래밍 언어에 대한 언어 구성을 정의하는 확장 기능을 제공합니다. 언어 구성 파일은 주석 토글, 대괄호 일치 및 주변과 같은 기본 편집 기능을 제어합니다.

언어 구성을 사용하면 다음을 수행할 수 있습니다.

사용자 입력에 대한 동기 작업
단순성: 정규식이 있는 짧은 JSON 파일은 복잡한 알고리즘보다 기본 쉽게 얻을 수 있습니다.
이식성: Visual Studio Code와 Visual Studio 간에 최소한의 변경 필요

또한 언어 구성 파일은 읽기 쉬운 JSON 파일을 통해 몇 가지 기본 리팩터링 기능을 지원하도록 Visual Studio를 쉽게 확장할 수 있는 방법을 제공합니다.

Visual Studio 확장에 언어 구성 지원 추가

Visual Studio 확장에 언어 구성 지원을 추가하는 세 가지 부분이 있습니다.

VSIX 프로젝트 만들기
언어 구성 파일 만들기
문법 파일 추가
pkgdef 파일 업데이트

언어 구성 샘플에서 작업 샘플을 탐색할 수 있습니다.

VSIX 프로젝트 만들기

언어 구성을 사용하여 언어 서비스 확장을 만들려면 먼저 VS 인스턴스에 대해 Visual Studio 확장 개발 워크로드가 설치되어 있는지 확인합니다.

다음으로, 새 파일>프로젝트로 이동하여 새 VSIX 프로젝트를 만들고, "vsix"를 검색하고, VSIX 프로젝트를 찾습니다.

Screenshot showing how to create a VSIX project.

언어 구성 파일 만들기

고유한 언어 구성 파일을 만들 때 JSON 파일에서 온보딩할 측면을 선택할 수 있습니다. 예를 들어 주석 토글, 중괄호 자동 바깥쪽 또는 이 섹션에 설명된 사용 가능한 기능의 조합을 지원하도록 선택할 수 있습니다.

확장에 지원을 추가하려면 먼저 언어 구성 파일을 만듭니다. 파일 이름은 표준에 따라야 합니다. 하이픈을 사용하여 파일 이름에 있는 단어를 구분하고 해당 단어가 .로 language-configuration.json끝나는지 확인합니다.

다음 코드는 예제 언어 구성 파일을 보여줍니다.

{
    "comments": {
      "lineComment": "***",
      "blockComment": ["{*", "*}"]
    },
    "brackets": [
      ["@", "@"],
      ["#", "#"],
      ["$", "$"],
      ["(", ")"]
    ],
    "autoClosingPairs": [
      { "open": "{", "close": "}" },
      { "open": "@", "close": "@" },
      { "open": "#", "close": "#" },
      { "open": "$", "close": "$" },
      { "open": "(", "close": ")" },
      { "open": "'", "close": "'", "notIn": ["string", "comment"] },
      { "open": "\"", "close": "\"", "notIn": ["string"] },
    ],
    "autoCloseBefore": ";:.,=}])>` \n\t",
    "surroundingPairs": [
      ["@", "@"],
      ["#", "#"],
      ["$", "$"],
      ["[", "]"],
      ["(", ")"],
      ["'", "'"],
      ["\"", "\""],
      ["`", "`"]
    ],
    "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)",
    "indentationRules": {
      "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
      "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
    }
  }

구성 설정

다음 섹션에서는 언어 구성 파일에서 사용할 수 있는 설정을 설명합니다.

주석 토글

언어 구성 파일은 주석 토글에 대한 두 가지 명령을 제공합니다. 줄 주석 을 토글하고 블록 주석을 토글합니다. Visual Studio에서 줄/블록을 주석으로 처리해야 하는 방법을 지정 comments.blockComment 하고 comments.lineComment 제어할 수 있습니다.

{
  "comments": {
    "lineComment": "//",
    "blockComment": ["/*", "*/"]
  }
}

이 설정은 Ctrl K, Ctrl+C를 누를+때 Visual Studio 텍스트 편집기의 동작에 영향을 줍니다.

대괄호 정의

커서를 여기에 정의된 대괄호로 이동하면 Visual Studio는 일치하는 쌍과 함께 해당 대괄호를 강조 표시합니다.

{
  "brackets": [["{", "}"], ["[", "]"], ["(", ")"]]
}

Visual Studio 도구 > 옵션 대화 상자의 텍스트 편집기, 일반, 표시에 있는 관련 설정은 검사box 중괄호 쌍 색 지정 사용<a1/>입니다.

자동 묶기

입력 '하면 Visual Studio에서 작은따옴표 쌍을 만들고 커서를 가운데 '|'에 넣습니다. 이 섹션에서는 이러한 쌍을 정의합니다.

{
  "autoClosingPairs": [
    { "open": "{", "close": "}" },
    { "open": "[", "close": "]" },
    { "open": "(", "close": ")" },
    { "open": "'", "close": "'", "notIn": ["string", "comment"] },
    { "open": "\"", "close": "\"", "notIn": ["string"] },
    { "open": "`", "close": "`", "notIn": ["string", "comment"] },
    { "open": "/**", "close": " */", "notIn": ["string"] }
  ]
}

키는 notIn 특정 코드 범위에서 이 기능을 사용하지 않도록 설정합니다. 예를 들어 다음 코드를 작성할 때는 다음과 같습니다.

// ES6's Template String
`ES6's Template String`;

작은따옴표는 자동으로 묶이지 않습니다.

속성이 필요하지 않은 쌍은 notIn 더 간단한 구문을 사용할 수도 있습니다.

{
  "autoClosingPairs": [ ["{", "}"], ["[", "]"] ]
}

이전에 자동 묶기

기본적으로 Visual Studio는 커서 바로 뒤에 공백이 있는 경우에만 쌍을 자동 묶습니다. 따라서 다음 JSX 코드를 입력 { 하면 자동 클라오스가 표시되지 않습니다.

const Component = () =>
  <div className={>
                  ^ Does not get autoclosed by default
  </div>

그러나 이 정의는 해당 동작을 재정의합니다.

{
  "autoCloseBefore": ";:.,=}])>` \n\t"
}

이제 바로 전에 >입력 { 하면 Visual Studio에서 .을 사용하여 }자동 바깥쪽을 지정합니다.

자동 검색

Visual Studio에서 범위를 선택하고 여는 대괄호를 입력하면 Visual Studio는 선택한 콘텐츠를 대괄호 쌍으로 묶습니다. 이 기능을 자동 검색이라고 하며 여기에서 특정 언어에 대한 자동 검색 쌍을 정의할 수 있습니다.

{
  "surroundingPairs": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"],
    ["'", "'"],
    ["\"", "\""],
    ["`", "`"]
  ]
}

Visual Studio 도구 옵션의 관련 설정은 텍스트 편집기, 일반, 따옴표 또는 대괄호를 입력할 때 검사 상자가 자동으로 선택 영역 묶기 표시에 있습니다. >

Word 패턴

wordPattern 는 프로그래밍 언어에서 단어로 간주되는 항목을 정의합니다. 코드 제안 기능은 이 설정을 사용하여 설정된 경우 wordPattern 단어 경계를 결정합니다.

{
  "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)"
}

들여쓰기 규칙

indentationRules는 선을 입력, 붙여넣기 및 이동할 때 또는 Ctrl K, Ctrl D(문서 서식) 및 Ctrl+K, Ctrl+++ F(선택 서식)를 사용하여 텍스트의 서식을 지정할 때 편집기에서 현재 줄 또는 다음 줄의 들여쓰기를 조정하는 방법을 정의합니다.

{
  "indentationRules": {
    "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
    "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
  }
}

예를 들어 if (true) { 일치 항목이 일치increaseIndentPattern한 다음 열린 대괄호 {다음에 Enter 키를 누르면 편집기가 자동으로 한 번 들여쓰기되고 코드가 다음과 같이 표시됩니다.

if (true) {
  console.log();

또한 increaseIndentPattern decreaseIndentPatter두 가지 다른 들여쓰기 규칙이 있습니다.

indentNextLinePattern - 선이 이 패턴 과 일치하는 경우 줄 뒤의 다음 줄 만 한 번 들여쓰기해야 합니다.
unIndentedLinePattern - 선이 이 패턴과 일치하는 경우 들여쓰기를 변경해서는 안 되며 다른 규칙에 대해 평가해서는 안 됩니다.

프로그래밍 언어에 대해 들여쓰기 규칙이 설정되지 않은 경우 닫는 대괄호를 입력할 때 줄이 열린 대괄호와 들여쓰기로 끝날 때 편집기에서 들여쓰기를 합니다. 여기에 있는 대괄호는 .에 의해 brackets정의됩니다.

Enter 키를 누릅니다.

onEnterRules는 편집기에서 Enter 키를 누를 때 평가할 규칙 목록을 정의합니다.

{
  "onEnterRules": [{
    "beforeText": "^\\s*(?:def|class|for|if|elif|else|while|try|with|finally|except|async).*?:\\s*$",
    "action": { "indent": "indent" }
  }]
}

Enter 키를 누르면 커서 위의 텍스트 앞, 후 또는 한 줄이 다음 속성에 대해 검사.

beforeText (필수). 커서 앞의 텍스트와 일치하는 정규식입니다(현재 줄로 제한됨).
afterText. 커서 뒤의 텍스트와 일치하는 정규식입니다(현재 줄로 제한됨).
previousLineText. 커서 위의 텍스트 한 줄과 일치하는 정규식입니다.

지정된 모든 속성이 일치하면 규칙이 일치하는 것으로 간주되며 더 이상 onEnterRules 평가되지 않습니다. 다음 onEnterRule 작업을 지정할 수 있습니다.

indent (필수). 중 none, indent, outdent, indentOutdent하나입니다.
- none 는 새 줄이 현재 줄의 들여쓰기를 상속한다는 의미입니다.
- indent 는 새 줄이 현재 줄을 기준으로 들여쓰기됨을 의미합니다.
- outdent 는 새 줄이 현재 줄을 기준으로 인덱싱되지 않은 것을 의미합니다.
- indentOutdent 는 두 개의 새 줄이 삽입되고 하나는 들여쓰기되고 두 번째 줄은 들여쓰지 않습니다.
appendText. 새 줄 뒤와 들여쓰기 후에 추가되는 문자열입니다.
removeText. 새 줄의 들여쓰기에서 제거할 문자 수입니다.

속성 설정

확장 프로젝트에서 파일에 다음 속성 설정이 있는지 확인합니다 language-configuration.json .

Build Action = Content
Include in VSIX = True
Copy to output = Copy always

(선택 사항) 문법 파일 추가

또한 TextMate 문법 파일을 추가하여 언어에 대한 구문 색 지정을 제공할 수 있습니다. TextMate 문법은 정규식의 구조화된 컬렉션이며 Plist(XML) 또는 JSON 파일로 작성됩니다. 언어 문법을 참조 하세요. 언어별 문법 파일을 제공하지 않으면 기본 제공 기본 설정이 사용됩니다.

사용자 지정 TextMate 문법 또는 테마 파일을 추가하려면 다음 단계를 수행합니다.

확장 내에 "Grammars"(또는 선택한 이름)라는 폴더를 만듭니다.
Grammars 폴더 내에 사용자 지정 색 지정을 제공하려는 *.tmlanguage, *.plist, *.tmtheme 또는 *.json 파일을 포함합니다.

팁

.tmtheme 파일은 범위가 Visual Studio 분류에 매핑되는 방법을 정의합니다(색상 키라고도 함). 지침은 %ProgramFiles(x86)%\Microsoft Visual Studio\version\SKU\<Common7\>IDE\CommonExtensions\Microsoft\TextMate\Starterkit\Themesg< 디렉터리에서 전역 >.tmtheme 파일을 참조할 수 있습니다.

pkgdef 파일 만들기

다음으로 파일을 만듭니다 .pkgdef . .pkgdef 파일에는 시스템 레지스트리에 추가될 모든 등록 정보가 포함됩니다. 파일에 대한 pkgdef 자세한 내용은 VSPackage 등록 및 pkgdef 파일이란? 그리고 왜?. 파일에 pkgdef 는 파일의 경로 language-configuration.json 와 언어 문법에 대한 경로가 있어야 합니다. LSP와 같은 언어 서비스는 편집기 콘텐츠 형식을 요청하고 언어 구성을 통해 가져옵니다. 이 정보는 개발 도구와 통신할 수 있는 서버 내의 언어별 인텔리전스를 제공합니다. 언어 서비스가 없으면 언어 구성 엔진이 TextMate 문법으로 대체됩니다. .pkgdef 파일은 다음과 같이 표시됩니다.

[$RootKey$\TextMate\Repositories]
"AspNetCoreRazor="$PackageFolder$\Grammars

// Defines where the language configuration file for a given
// grammar name is (value of the ScopeName tag in the tmlanguage file).
[$RootKey$\TextMate\LanguageConfiguration\GrammarMapping]
"text.aspnetcorerazor"="$PackageFolder$\language-configuration.json"

// Defines where the language configuration file for a given
// language name is (partial value of the content type name).
[$RootKey$\TextMate\LanguageConfiguration\ContentTypeMapping]
"RazorLSP"="$PackageFolder$\language-configuration.json"

[$RootKey$\TextMate\LanguageConfiguration\GrammarMapping]
"text.html.basic"="$PackageFolder$\html-language-configuration.json"
"source.js"="$PackageFolder$\javascript-language-configuration.json"
"source.css"="$PackageFolder$\css-language-configuration.json"
"source.cs"="$PackageFolder$\csharp-language-configuration.json

파일의 속성이 pkgdef 다음과 같이 설정되어 있는지 확인합니다.

Build Action = Content
Include in VSIX = True
Copy to output = Copy always

Visual Studio에서 언어 구성 정보에 액세스할 수 있도록 VSIX 패키지에 파일을 포함합니다 language-configuration . 이 파일을 포함하면 Visual Studio 확장과 함께 제공됩니다. 이 파일을 통해 Visual Studio는 언어 구성을 사용할 수 있음을 알 수 있습니다. 파일을 추가하려면 PKGDEF def 파일을 추가하도록 편집 vsixmanifest 합니다. 예를 들면 다음과 같습니다.

<Asset Type="Microsoft.VisualStudio.VsPackage" Path="Test.pkgdef"/>

다음을 통해 공유

언어 구성을 사용하여 편집기 동작 사용자 지정

언어 구성이란?

Visual Studio 확장에 언어 구성 지원 추가

VSIX 프로젝트 만들기

언어 구성 파일 만들기

구성 설정

주석 토글

대괄호 정의

자동 묶기

이전에 자동 묶기

자동 검색

Word 패턴

들여쓰기 규칙

Enter 키를 누릅니다.

속성 설정

(선택 사항) 문법 파일 추가

pkgdef 파일 만들기

추가 리소스

다음을 통해 공유

언어 구성을 사용하여 편집기 동작 사용자 지정

언어 구성이란?

Visual Studio 확장에 언어 구성 지원 추가

VSIX 프로젝트 만들기

언어 구성 파일 만들기

구성 설정

주석 토글

대괄호 정의

자동 묶기

이전에 자동 묶기

자동 검색

Word 패턴

들여쓰기 규칙

Enter 키를 누릅니다.

속성 설정

(선택 사항) 문법 파일 추가

pkgdef 파일 만들기

관련 콘텐츠

추가 리소스