VSCode に Emmet ショートカット キーを追加する方法について話しましょう

この記事では、VSCode の Emmet ツールを理解し、VSCode で Emmet ホットキーをバインドして HTML 編集効率を向上させる方法を紹介します。

#Emmet は、コード スニペットを HTML に自動的に展開するツールです。 VS Code に含まれています。 [推奨される学習: 「vscode 入門チュートリアル 」]

たとえば、次のフラグメント:

div.someClass>span*5

は次のように展開されます:

<div class="someClass">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Emmet には次のようなものもあります他のいくつかのショートカットにより、HTML 開発効率が向上します。

推奨: Emmet 構文

VS Code ショートカットの追加

キーの組み合わせ: Ctrl K および Ctrl S キーボード ショートカット ウィンドウを開き、検索ボックスに「Emmet」と入力して、組み込みの Emmet がホットキーをバインドできる特定の操作を確認します。

Ctrl Shift p を押しながらコマンド パネルを開き、shortcut と入力して、オプション キーボード ショートカットを開くを見つけます。

キー バインディング keybindings.json ファイルが開きます:

[]

追加されたすべてのカスタム ショートカットはこのファイルに反映され、次の構造になります:

{
  "key": "<key combination>",
  "command": "<command to run>"
}

VS Code で使用できる Emmet コマンド

Emmet で使用できるコマンドは次のとおりです:

editor.emmet.action.balanceIn
editor.emmet.action.balanceOut
editor.emmet.action.decrementNumberByOne
editor.emmet.action.decrementNumberByOneTenth
editor.emmet.action.decrementNumberByTen
editor.emmet.action.evaluateMathExpression
editor.emmet.action.incrementNumberByOne
editor.emmet.action.incrementNumberByOneTenth
editor.emmet.action.incrementNumberByTen
editor.emmet.action.matchTag
editor.emmet.action.mergeLines
editor.emmet.action.nextEditPoint
editor.emmet.action.prevEditPoint
editor.emmet.action.reflectCSSValue
editor.emmet.action.removeTag
editor.emmet.action.selectNextItem
editor.emmet.action.selectPrevItem
editor.emmet.action.splitJoinTag
editor.emmet.action.toggleComment
editor.emmet.action.updateImageSize
editor.emmet.action.updateTag
editor.emmet.action.wrapIndividualLinesWithAbbreviation
editor.emmet.action.wrapWithAbbreviation

次にいくつかの例を示します。 alt e と alt ** の組み合わせを使用します。キーはシステムや他のソフトウェアと競合する可能性があります。使いやすいように調整してください。

スムーズ イン/スムーズ アウト — 現在のキャレット位置からラベルまたはラベルのコンテンツ境界を検索し、それを選択します。

[
  {
    "key": "alt+e alt+i",
    "command": "editor.emmet.action.balanceIn"
  },
  {
    "key": "alt+e alt+o",
    "command": "editor.emmet.action.balanceOut"
  }
]

ペアリング タグに移動 — 開始要素タグと終了要素タグの間を移動します。

[
  {
    "key": "alt+e alt+e",
    "command": "editor.emmet.action.matchTag"
  }
]

タグの削除 — HTML ツリーからタグを削除しますが、その内部 HTML は保持します。

[
  {
    "key": "alt+e alt+d",
    "command": "editor.emmet.action.removeTag"
  }
]

また、ホットキーを自分で設定したくない場合は、VS Code 用の Emmet キーバインドのセットである Emmet Keybindings 拡張機能をインストールすることもできます。どのキーにマップするかわからない場合に備えて、事前定義されたキー バインディング グループとして使用できます。

詳細情報

Wrap with AbbreviationやRemove Tagなど、便利な略語も多数ありますので、確認してください。もっと学ぶために出かけます。

VSCode の詳細については、vscode チュートリアル をご覧ください。

以上がVSCode に Emmet ショートカット キーを追加する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。