🚀 VS Code で しましょう!

言語構成ガイド

contributes.languages Contribution Point を使用すると、次の宣言型言語機能を制御する言語構成を定義できます。

  • コメントの切り替え
  • 括弧の定義
  • 自動閉じ
  • 自動囲み
  • 折りたたみ
  • ワードパターン
  • インデント規則

JavaScript ファイルの編集エクスペリエンスを構成する言語構成のサンプルを次に示します。このガイドでは、language-configuration.json の内容について説明します。

注: 言語構成ファイルの名前が 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.blockComment および comments.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.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 では、折りたたみはインデントベースで定義されるか、または提供された折りたたみ範囲プロバイダーによって定義されます。

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

次の JSON は、//#region および //#endregion の折りたたみマーカーを作成します。

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

ワードパターン

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

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

インデント規則

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

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

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

if (true) {
  console.log();

increaseIndentPattern および decreaseIndentPatter に加えて、他の 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 つはインデントされ、2 つ目はインデント解除されることを意味します。
  • appendText。新しい行の後、およびインデントの後に付加される文字列。
  • removeText。新しい行のインデントから削除する文字数。