Wrap selection with tag in VS Code

1. CTRL + SHIFT + P
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.