- Instant help with your Developer coding problems

Wrap selection with tag in VS Code

How to wrap selection with tag in VS Code?
2. Type 'wwa' and select 'Emmet: Wrap with Abbreviation'
3. Type the emmet abbreviation you want to use

Thanks to the built-in Emmet support doing some tag wrapping in VS Code is a simple task. For example, if you want to wrap the text under the cursor with a div tag using a CSS class named main-header, then do the following steps. Press CTRL + SHIFT + P or F1 and type "wwa" in the popup window. Select the Emmet: Wrap with Abbreviation command and press Enter. The input dialog changes to an Emmet editor. Now you can type your emmet command. In this example, type .main-header. While typing, you can immediately see the planned modification in the code editor. Press Enter, and VS Code wraps your code with a div tag using the class main-header. To cancel the changes, press Esc.

You can write more complex emmet commands like .main-header>.title>h1

In the case of React JSX files VS Code also takes care that the className attribute should be used instead of the class attribute.

Share "How to wrap selection with tag in VS Code?"