VSCode Tips and Features

VSCode has a lot of features and settings.

This can be daunting for newcomers. It's also very eager to help with writing HTML and CSS, which can actually get in the way sometimes.

This page offers an overview of VSCode settings that are relevant for working with HTML and CSS.

Note: cmd/ctrl in the keyboard shortcuts below refers to either the Command key on Mac, or Control key on Windows (not “press both at the same time”).

Command Bar

The command bar in VSCode is incredibly powerful. You can search for almost any command or menu item in VSCode from this single search bar. cmd/ctrl+shift+p

UI, Text Size, Color Themes

  • Toggle text wrapping, all the time, as needed. This is one of the single most useful things to help you see and work with plain text! opt/alt+z
  • Preferences Editor: Font Size may need adjusting depending on which coding font you prefer. You can also use cmd/ctrl+= (plus) and cmd/ctrl+- (minus) to increase or decrease the size of the entire UI, including panels, icons, etc.
  • Color themes can help ease eye strain, improve contrast if needed, and add some personal flair to your editor. cmd/ctrl+k then cmd/ctrl+t to go directly to the options in the command bar. Once you have the list of color themes up, you can use the up and down arrows to preview each theme in the list.
  • Third party color themes are available as extensions. Check out: Tomorrow/Tomorrow Night, Night Owl (Sarah Drasner), Cobalt2 (Wes Bos), Base16 collection, and Nord.

Windows, Split Panes, Tabs

  • Preferences Workbench › Editor: Enable Preview - by default VSCode opens files in a “preview” tab when you click on them once, indicated by the filename in italics. You have to double click the file to open it for realsies. Leave this on for now but be aware of the option if you find it confusing.
  • Once you find yourself working with multiple files, look for shortcuts and commands to manage splitting panes and tabs!

Create/Edit Keyboard Shortcuts

Open the command bar and search for keyboard to get the option for Preferences: Open Keyboard Shortcuts. From here, you can search by command to look up its shortcut, and double click on the shortcut column to change/create the keyboard shortcut for any command.

Code Folding

Look for the “disclosure triangles” next to the line numbers wherever grouping tags are properly nested. This is a good way to quickly check whether the tag you’re looking at is properly closed, even if it’s way down at the bottom of the document. Clicking the disclosure triangle will “fold” that section, letting you collapse portions of very long documents to navigate around.

Minimap

The “minimap” gives you a visual overview of the entire length of your document that you can use to quickly scroll up and down. This is especially useful on longer documents.

I disabled the minimap to de-clutter the interface while we’re getting started. It takes up precious screen space, especially on smaller displays, but it’s a great features to toggle on and off.

View > Toggle Minimap

Outline View

Find this at the bottom of the File Explorer pane on the left. This gives you a quick way to jump between different nodes/sections of your document.

Cursor Movement and Selections

There are lots of different ways to move the cursor around without using the mouse.

  • Clicking line numbers in the left gutter, or cmd+l to select whole lines
  • cmd/ctrl+[ and cmd/ctrl+] to change the indentation for the current line or selection
  • Multiple cursors by holding alt/opt and clicking.
  • Also have a look at the Selection menu up in the menubar.
  • Cursor movement shortcuts: Open the keyboard shortcut settings (command bar search for “keyboard”), and search the keyboard settings for “cursor” to look up shortcuts for jumping around and selecting

HTML Tools

New Document Template

  • Create a new document
  • Save it as .html right way, or click on “Plain Text” near the bottom right and select “HTML” to tell VSCode this document is going to contain HTML.
  • Type html:5 to get the Emmet autocompletion for a new HTML5 document.
  • You can tab through the highlighted areas to change them. Leave the meta tags alone, but you can tab to the <title> tag to fill it in, and then tab into the <body> tag to get started.

HTML Linked Editing

HTML: Linked Editing - this option causes a matching closing tag to be edited automatically when you edit an opening tag. I can’t think of a reason off-hand not to have this turned on.

Auto-Close Tags

HTML: Auto Closing Tags - this will automatically create the matching closing tag immediately when you type an opening tag. It’s useful when you’re typing HTML from scratch, but can get in the way if you’re trying to wrap existing text in tags. I turn this on and off (which makes it a great candidate for setting a keyboard shortcut).

Wrap with Abbreviation

Command bar > Wrap with Abbreviation wraps the selected text in an HTML tag. You can also select multiple lines where you want to wrap each one in tags. For this, type the kind of element you want to wrap each line in, then an asterisk. So cool!

Format Document

VSCode has a good document formatter. Search the command bar for “format” and you should find it. You can format a whole document at once, or just a selected portion. There’s also an option in the preferences to turn this on automatically every time you save your document.

Note that there are a few tweaks I make to VSCode's HTML formatter to make it more consistent with standard/common HTML formatting. You can add these to your user settings.json file:

"html.format.extraLiners": "",
"html.format.wrapAttributes": "preserve-aligned",
"html.format.wrapLineLength": 0,

That covers formatting HTML. Formatting CSS is best done with the Prettier extension.

How Preferences Work in VSCode

  • VSCode’s Preferences, with all of the checkboxes and stuff, is a front end for JSON files where the actual preferences are stored. You can edit the JSON file directly if needed.
  • When you launch VSCode, it reads its default preferences file first, then it reads your preferences file to make any changes.
  • The same is true for keyboard shortcuts. There’s a default keyboard shortcuts file, and your user-defined keyboard shortcuts are in a second file that gets applied on top.
  • Syncing settings between VSCode on different computers is mostly done by simply copying the user settings and keyboard shortcut files.

Conclusion

Text editors are often a personal taste. We’ll likely stick to one text editor for the whole semester, but once you’re fully comfortable with your editor (in this case VSCode), I encourage you to try other ones just to see how their approaches and features differ. BBEdit is a Mac-only paid application, but many of its features continue to be available in the free version after the 30 day trial period.

Check out the Text Editors section of my Resources page for some other suggestions!

I’m happy to demonstrate and repeat any or all of these techniques for you as needed. Feel free any time to post in the Slack channel or ask me any time “hey how did you do that thing again?”