Three non-coding tips for Visual Studio Code

I find myself spending more and more time in Visual Studio Code. It's a light-weight, extensible and fast editor, and it can be used for just about anything. Having explored some options lately, here's a writeup of three non-coding use cases I've found helpful.

New to Visual Studio Code? Download the latest version here: https://code.visualstudio.com

Tip 1 - Markdown with live preview

VS Code has built-in support for Markdown with live preview. Open a new file, save it with an .md extension and press ctrl+shift+v to open the live preview. Split the screen with ctrl+| to get the live preview side-by-side and you're good to go!

VS Code even supports autocomplete and Markdown snippets. Typing link and clicking tab will insert the needed Markdown to render a link with a title. The same works for image, quote, heading and so on.

Tip 2 - Compare files

An obvious feature, but somewhat un-intuitive in the VS Code UI. Compare two files from the Explorer Sidebar by highlighting the first file, right-clicking and selecting Select for compare.

Then highlight the second file, right-click and select Compare with....

Alternatively, open a file comparison directly in VS Code from the command line:

code -d file1.txt file2.txt

Diffs are displayed either inline...

...or side-by-side.

Use the selector in the top right-corner to switch between display modes and the arrows to navigate between diff conflicts.

Tip 3 - Create presentations using reveal.js

The extension vscode-reveal by evilz let's you display a reveal.js presentation direcly from a markdown document. Install the extension either by clicking ctrl+shift+x to open the extension library and search for it, or by launching "Quick Open" (ctrl+p) and running ext install vscode-reveal.

Once installed and enabled, use the commands Revealjs: Show presentation by side or Revealjs: Open presentation in browser to run the presentation. These are available by clicking Ctrl+P to activate the quick launch and then typing >Revealjs.

Use a horizontal rule to separate each slide (---). Here's how it looks in the browser:

Various display modes and transitions can be configured by adding revealjs.* settings to the settings.json file. A list of available settings can be found here.

Example: Switch to the Solarized color theme by adding:

"revealjs.theme": "solarized"

Have fun!