VS Code cheat sheet

This is my personal cheat sheet for Microsoft Visual Studio Code (VS Code). It may be sparse at the moment, but I’m sure it will grow over time. Mainly, this is to record little commands and things that I am constantly forgetting (especially unique ones related to the unique plugins I use).

HTML Tag Wrap

Plugin dependency: htmltagwrap

Wraps selected code with HTML tags.

  • Select one or more blocks of text or strings of text.
  • Press Alt + W or Option + W for Mac.
  • Type the tag name you want.

By default, pressing spacebar will deselect the closing tags, so you can add attributes to the opening tags (you can turn this feature off, see below). If nothing is selected when you run htmltagwrap, it will add an opening and closing tag at the cursor position.

NOTE: This extension works best in files that either use tabs or spaces for indentation. It may not work as well with mixed tabs/spaces.

Live HTML Preview

Plugin dependency: Live HTML Previewer, by Harshdeep Gupta

  • For side preview, use the keybinding CTRL + Q S or press F1 and type “Show side preview”
  • For full preview, use the keybinding ‘ctrl+q f’ or press ‘F1’ and type “Show full preview”
  • To open file in browser:
    • use the keybinding CTRL + Q W or
    • press F1 and type “Open in browser” or
    • right click in the editor/side bar, select “Open in browser”

If a HTML file is open, a message is displayed on the Status Bar in bottom left. Click on it for side preview.