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

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

青灯夜游

リリース： 2022-09-08 20:31:33

転載

2778 人が閲覧しました

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

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

#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 サイトの他の関連記事を参照してください。

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

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

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

詳細情報

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