VSコードでタグラッピングを行う方法

選択したhtmlをVSコードのタグで囲みます。それ、どうやったら出来るの？

埋め込みエメットはトリックを行うことができます：

1. テキストを選択（オプション）
2. コマンドパレットを開く（通常はCtrl+ Shift+ P）
3. 実行する Emmet: Wrap with Abbreviation
4. タグdiv（または略語.wrapper>p）を入力してください
5. ヒット Enter

コマンドをキーバインドに割り当てることができます。

これは引数の受け渡しもサポートします：

{
    "key": "ctrl+shift+9",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection",
    "args": {
        "abbreviation": "span"
    }
},

次のように使用します。

• span.myCssClass
• span#myCssId
• b
• b.myCssClass

VSCodeマーケットプレイスのクイック検索：https ://marketplace.visualstudio.com/items/bradgashler.htmltagwrap 。

1. VS Codeクイックオープンを起動（Ctrl+ P）

2. 貼り付けext install htmltagwrapて入力

3. HTMLを選択

4. Alt+ W（Macの場合はOption+）Wを押します。

コメントできないので、アレックスの素晴らしい答えを詳しく説明します。

ラップで崇高な体験をしたい場合は、キーマップ拡張機能を開き（[設定]> [キーマップ拡張機能[ Cmd+ K Cmd+ M]）、次のオブジェクトを追加します。

{
    "key": "alt+w",
    "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation",
    "when": "editorHasSelection && editorTextFocus"
}

テキストが選択されたときにEmmet wrapコマンドをAlt+ Wにバインドします

（OSXのみの手順で申し訳ありません）

1. ⌘ Command+ k ⌘ Command+ sまたは+ を入力してキーボードショートカットを開くCode > Preferences > Keyboard Shortcuts
2. タイプ emmet wrap
3. 「Emmet：Wrap with Abbreviation」の左側にあるプラス記号をクリックします
4. タイプ⌥ Option+w
5. 押す Enter

スニペットを使用してこれのより良い答えがあります

次のような定義でスニペットを作成します。

"name_of_your_snippet": {
    "scope": "javascript,html",
    "prefix": "name_of_your_snippet",
    "body": "<${0:b}>$TM_SELECTED_TEXT</${0:b}>"
}

次に、これをkeybindings.jsonのキーにバインドします。たとえば、次のようにします。

{ 
    "key": "alt+w",
    "command": "editor.action.insertSnippet",
    "args": { "name": "name_of_your_snippet" }
}

これはhtmltagwrapとまったく同じ結果になるはずですが、拡張機能をインストールする必要はありません。

選択したテキストの周囲にタグを挿入します。デフォルトでは<b>タグが付けられ、タグが選択されるため、入力すると変更できます。

あなたが別のデフォルトのタグを使用したい場合は、単に変更bにbodyスニペットのプロパティ。