| layout | parent | title | nav_order | description |
|---|---|---|---|---|
default |
Language Extensions |
Language Configuration Guide |
4 |
contributes.languages Contribution Point를 사용하여 선언적 언어 기능 구성을 조절하는 언어 구성을 정의 할 수 있습니다.
- 주석 설정
- 괄호 정의
- 자동 폐쇄
- 자동 포함
- 접기
- 단어 패턴
- 들여쓰기 규칙
다음은 자바스크립트 파일의 편집 환경을 구성하는 언어 구성 예시입니다. 이번 가이드에서는 language-configuration.json의 내용을 설명합니다.
주의: 언어 구성 파일의 이름이 language-configuration.json이거나 혹은 이로 끝날 경우, VS Code에서 자동 완성 및 유효성 검사가 제공됩니다.
{
"comments": {
"lineComment": "//",
"blockComment": ["/*", "*/"]
},
"brackets": [["{", "}"], ["[", "]"], ["(", ")"]],
"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"] }
],
"autoCloseBefore": ";:.,=}])>` \n\t",
"surroundingPairs": [
["{", "}"],
["[", "]"],
["(", ")"],
["'", "'"],
["\"", "\""],
["`", "`"]
],
"folding": {
"markers": {
"start": "^\\s*//\\s*#?region\\b",
"end": "^\\s*//\\s*#?endregion\\b"
}
},
"wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)",
"indentationRules": {
"increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
"decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\}\\]].*$"
}
}VS Code 에서는 주석 토글을 위한 2가지 커맨드를 제공합니다. Toggle Line Comment 와 Toggle Block Comment 입니다. comments.blockComment 와 comments.lineComment를 명시하여 VS Code가 줄 / 블록을 주석 처리 하는 방법을 제어 할 수 있습니다.
{
"comments": {
"lineComment": "//",
"blockComment": ["/*", "*/"]
}
}아래의 정의된 괄호로 커서를 이동하면, VS Code는 괄호와 그 쌍을 같이 강조 할 것입니다.
{
"brackets": [["{", "}"], ["[", "]"], ["(", ")"]]
}그리고, Go to Bracket 이나 Select to Bracket을 실행하면, VS Code는 위의 정의를 사용하여 가장 가까운 괄호와 그 쌍을 찾을 것입니다.
'를 입력하면, VS Code는 한쌍의 작은 따옴표 를 생성하고 그 안에 커서를 둘 것입니다: '|'. 이번 주제에선 이 쌍을 정의합니다.
{
"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`;작은 따옴표는 자동으로 폐쇄 되지 않을 것입니다.
사용자는 editor.autoClosingQuotes와 editor.autoClosingBrackets설정을 통해 이 자동 폐쇄 동작을 조절 할 수 있습니다.
기본적으로, VS Code는 커서 뒤에 공백이 있는 경우에만 쌍을 자동 폐쇄 합니다. 그렇기 때문에 여러분이 {를 JSX 코드에 입력하면 자동 폐쇄가 발생 하지 않습니다.
const Component = () =>
<div className={>
^ Does not get autoclosed by default
</div>한편, 아래의 정의는 이 행동을 오버라이드 합니다:
{
"autoCloseBefore": ";:.,=}])>` \n\t"
}이제 > 전에 {를 입력할경우, VS Code는 이를 }를 자동 폐쇄 할 것입니다.
VS Code에서 범위를 선택한다음 여는 괄호를 입력하면, VS Code는 선택된 내용을 괄호쌍에 포함 시킬 것입니다. 이 기능은 자동 포함이라고 불리며, 아래와 같이 특정 언어에 대하여 자동 포함을 정의 할 수 있습니다.
{
"surroundingPairs": [
["{", "}"],
["[", "]"],
["(", ")"],
["'", "'"],
["\"", "\""],
["`", "`"]
]
}사용자는 이를 editor.autoSurround 설정을 통해 조절 할 수 있습니다.
VS Code에는 3가지 종류의 접기가 있습니다:
- 들여쓰기 기반 접기: VS Code의 기본 접기 방식입니다. 들여쓰기가 동일한 두 줄에 대하여, 해당 영역을 접을 수 있는 마커가 생성됩니다.
- 언어 구성 접기: VS Code가
folding.markers에 정의된start와end정규식을 찾으면, 그 내부의 내용을 접을 수 있는 마커를 생성합니다. 아래의 JSON은//#region과//#endregion사이의 접는 마커를 생성합니다.
{
"folding": {
"markers": {
"start": "^\\s*//\\s*#?region\\b",
"end": "^\\s*//\\s*#?endregion\\b"
}
}
}wordPattern은 프로그래밍 언어에서 단어로 간주 되는것을 정의합니다. 이 wordPattern이 설정 되어있을경우, 코드 제안 기능이 이를 사용하여 단어의 바운더리를 결정합니다. 주의 할것은 이 설정은 에디터의 editor.wordSepeartors에 의해 조절되는 단어와 연관된 에디터 커맨드에는 영향을 주지 않습니다.
{
"wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)"
}indentationRules 는 에디터가 현재줄이나 다음줄을 입력, 붙여넣기, 줄이동을 했을때 어떻게 들여쓰기를 할지 정의합니다.
{
"indentationRules": {
"increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
"decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
}
}예를 들어, if (true) { 는 increaseIndentPattern에 일치하기 때문에, 만약 kbstyle(Enter)를 여는 괄호 { 이후에 입력한다면, 에디터는 자동적으로 한칸을 들여쓰기 할 것이며, 코드는 아래와 같이 변경됩니다:
if (true) {
console.log();만약 프로그래밍 언어에 대하여 설정된 들여쓰기 규칙이 없다면, 에디터는 줄이 열린 괄호로 끝나는 경우 들여쓰기를 하고 닫는 괄호를 입력할때 들여쓰기를 닫을 것입니다. 여기서 괄호는 brackets에 정의된 것을 말합니다.
editor.formatOnPaste설정은 DocumentRangeFormattingEditProvider에 의해 조절되고 자동 들여쓰기에는 영향을 받지 않는다는것에 주의하십시오.