VSCode Tips and Features

Syncing my settings gave us a good start, but you’ll likely continue to adjust things as you spend more time in your text editor. There are also some settings that I turned off while we were getting started that you should be familiar with, and that you may want to turn back on.

Below are a handful of useful things VSCode can do!

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”).

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

  • Reduce the text size that you synced from my settings, if you’d like to fit more on screen. cmd/ctrl+, to open preferences. The setting is called Editor: Font Size. 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. I’ve included a handful of popular third party color themes with the settings you’ve already synced. Once you have the list of color themes up, you can use the up and down arrows to preview each theme in the list.

Windows, Split Panes, Tabs

  • I disabled the click once to preview, double click to open for realsies option. It's called Workbench › Editor: Enable Preview.
  • Once you find yourself working with multiple files, look for shortcuts and commands to manage splitting panes and tabs.

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

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 (On Mac I set this to cmd+ctrl+m)

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

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.

Open preferences and search for html link to enable HTML: Linked Editing, which edits the paired closing tag as you edit the opening tag.

Auto-Close 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).

Open preferences and search for html auto to enable HTML: Auto Closing Tags.

Wrap with Abbreviation

Select multiple lines you want to wrap in tags. Look for command bar > Wrap with Abbreviation. Type the kind of element you want to wrap with. This will wrap the whole selection into one tag. Great for containers, not great for things like paragraphs. For those, 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 my synced preferences included a couple of adjustments to how this formats documents by default, to place it more consistent with standard/common HTML formatting.

VSCode includes support for formatting HTML. Formatting CSS requires an extension. Prettier is the formatter of choice for many, many developers. Ask if you need a hand getting it installed and configured!

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?”