に参加して、VS Code の AI 支援開発について学びましょう。

言語設定ガイド

contributes.languages 貢献ポイントを使用すると、以下の宣言型言語機能を制御する言語設定を定義できます。

  • コメントの切り替え
  • 括弧の定義
  • 自動閉じ
  • 自動囲み
  • 折りたたみ
  • 単語パターン
  • インデントルール

JavaScript ファイルの編集エクスペリエンスを設定する言語設定のサンプルを以下に示します。このガイドでは、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つのコマンドを提供します。行コメントの切り替えブロックコメントの切り替えです。comments.blockCommentcomments.lineComment を指定して、VS Code が行/ブロックをどのようにコメントアウトするかを制御できます。

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

括弧の定義

ここに定義された括弧にカーソルを移動すると、VS Code はその括弧とその対応するペアをハイライトします。

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

さらに、括弧へ移動または括弧まで選択を実行すると、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`;

シングルクォーテーションは自動閉じされません。

notIn プロパティを必要としないペアも、よりシンプルな構文を使用できます。

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

ユーザーは editor.autoClosingQuoteseditor.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 では、折りたたみはインデントベース、または提供される折りたたみ範囲プロバイダーによって定義されます。

  • マーカー付きインデントベースの折りたたみ:特定の言語で折りたたみ範囲プロバイダーが利用できない場合、またはユーザーが editor.foldingStrategyindentation に設定している場合、インデントベースの折りたたみが使用されます。折りたたみ領域は、ある行が1つ以上の次の行よりもインデントが小さい場合に始まり、同じか小さいインデントの行がある場合に終わります。空行は無視されます。さらに、言語設定は開始マーカーと終了マーカーを定義できます。これらは folding.markersstart および end の正規表現として定義されます。一致する行が見つかると、ペア内に折りたたみ範囲が作成されます。折りたたみマーカーは空であってはならず、通常 //#region//#endregion のようになります。

以下の JSON は、//#region//#endregion の折りたたみマーカーを作成します。

{
  "folding": {
    "markers": {
      "start": "^\\s*//\\s*#?region\\b",
      "end": "^\\s*//\\s*#?endregion\\b"
    }
  }
}
  • 言語サーバーによる折りたたみ:言語サーバーは textDocument/foldingRange リクエストに応答し、折りたたみ範囲のリストを返し、VS Code はその範囲を折りたたみマーカーとしてレンダリングします。言語サーバープロトコルの折りたたみサポートの詳細については、プログラム言語機能のトピックを参照してください。

単語パターン

wordPattern は、プログラミング言語において何が単語と見なされるかを定義します。wordPattern が設定されている場合、コード提案機能はこの設定を使用して単語の境界を決定します。この設定は、エディター設定 editor.wordSeparators によって制御される単語関連のエディターコマンドには影響しません。

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

インデントルール

indentationRules は、入力、貼り付け、行の移動時に、エディターが現在の行または次の行のインデントをどのように調整すべきかを定義します。

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

たとえば、if (true) {increaseIndentPattern に一致する場合、開き括弧 { の後に Enter を押すと、エディターは自動的に1回インデントし、コードは次のようになります。

if (true) {
  console.log();

increaseIndentPatterndecreaseIndentPattern に加えて、他に2つのインデントルールがあります。

  • indentNextLinePattern - このパターンに一致する行の場合、その後の次の行のみが1回インデントされます。
  • unIndentedLinePattern - このパターンに一致する行の場合、そのインデントは変更されず、他のルールに対して評価されません。

プログラミング言語にインデントルールが設定されていない場合、行が開き括弧で終わるとエディターはインデントし、閉じ括弧を入力するとアウトデントします。ここでいう括弧は brackets で定義されます。

editor.formatOnPaste 設定はDocumentRangeFormattingEditProviderによって制御され、自動インデントには影響されないことに注意してください。

Enterキーのルール

onEnterRules は、エディターで Enter が押されたときに評価されるルールのリストを定義します。

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

Enter を押すと、カーソルの前、後、または1行上のテキストが以下のプロパティに対してチェックされます。

  • beforeText (必須)。カーソルの前のテキストに一致する正規表現(現在の行に限定)。
  • afterText。カーソルの後のテキストに一致する正規表現(現在の行に限定)。
  • previousLineText。カーソルの1行上のテキストに一致する正規表現。

指定されたすべてのプロパティが一致する場合、ルールが一致したと見なされ、それ以上の onEnterRules は評価されません。onEnterRule は以下の動作を指定できます。

  • indent (必須)。none, indent, outdent, indentOutdent のいずれか。
    • none は、新しい行が現在の行のインデントを継承することを意味します。
    • indent は、新しい行が現在の行に対してインデントされることを意味します。
    • outdent は、新しい行が現在の行に対してアンインデントされることを意味します。
    • indentOutdent は、2つの新しい行が挿入され、1つはインデントされ、もう1つはアウトデントされることを意味します。
  • appendText。新しい行とインデントの後に追記される文字列。
  • removeText。新しい行のインデントから削除する文字数。
© . This site is unofficial and not affiliated with Microsoft.