Issue #39  (Basic Markdown Features)01/18/23

Most developers have to write Markdown at some point, either for a README file or possibly some piece of content for a blog or documentation. Whatever the case, VS Code has a number of useful Markdown-related features that you can take advantage of.

First of all, any Markdown file you're currently editing will display a document outline in VS Code's Explorer sidebar panel. You can see the outline by opening the Explorer (CTRL/CMD-SHIFT-E).
   
You can also jump to any heading in a Markdown file by double-clicking the outline headings or by hitting CTRL/CMD-SHIFT-O, which brings up a symbol search that shows all the headings in the document. CTRL/CMD-T does the same kind of search across multiple files in the current workspace.

To help with Markdown syntax, press CTRL/CMD-SPACE (the common way in VS code to trigger auto-suggest) anywhere in a Markdown file to view a list of autocompletions. This comes in handy mostly for those new to Markdown. And for more experienced Markdown users, you can create your own snippets that can be accessed in the same way.
 
You can instantly insert the syntax to embed an image or link to a file in any Markdown document by dragging the file into the editor window, then hitting SHIFT before dropping it. Dropped images will add a Markdown image using the format  and other dropped files will add a Markdown link in the format [](path/file.md).

Similar to HTML, Markdown doesn't honor extra whitespace unless it's related to the Markdown syntax (for example, when using two spaces at the end of lines to indicate a line break). You can change this behaviour and allow VS Code to recognize real line breaks inside paragraphs by changing "Markdown > Preview: Breaks" to "true" in your settings:
 
And lastly, if you're writing Markdown, it's always nice to see how your file will render. You can open VS Code's preview window by clicking the little "Open Preview..." button, that looks like a little book icon, in the top-right area of your editor (not the "split editor" button, which looks similar). This shows a live preview of your Markdown document. You can preview either side-by-side or in a new file (ALT/OPT-click the preview button).
 
There are other advanced features you can use and customize when writing Markdown in VS Code, but I'll discuss those in a future issue.
 

Now on to this week's hand-picked links!
 

VS Code Tools

IntelliCode API Usage Examples — VS Code extension that lets you see relevant code examples from GitHub for over 100K different APIs right in your editor.

CSS Flexbox Cheatsheet — VS Code extension that lets you open a flexbox cheatsheet directly in the editor.

R-Factor — Extension for VS Code, Sublime, and Atom that provides an automated refactoring tool for JavaScript designed to help developers who work with React & Redux.

TODO Highlight — VS Code extension that automatically highlights TODOs, FIXMEs, and any other keywords or annotations you define.
 

VS Code Articles & Videos

▶ Building Your First Extension in VS Code — This is a live stream from the VS Code YouTube channel that was originally aired on January 12. A must-watch for those looking to get started with extension development.

PyCharm vs. VS Code: Which is the Most Popular Python IDE? — A detailed comparison between PyCharm and VS Code, for those considering either one for Python development.

VS Code - Amateur to Pro — Some commonly known tips in this one along with some things you may not have considered or seen yet, including advanced use of the command palette and symbol-based search.

Join Noom, the Psychology-based Program for Lasting Healthy Outcomes — Getting healthier means changing your lifestyle. Noom Weight helps users lose weight in a sustainable way through behavioral change psychology. It's a no-brainer.  Sponsor 

Best of the Rest

futurecoder — A free and open-source interactive platform for learning Python from scratch.

Notepad Calculator — This is a really cool little app that is part notepad and part calculator. You can write math equations and it will display the answer in the margin as you type. Useful for longer stuff that's too limiting for regular calculators.

Vim Online Editor — A web-based Vim editor that includes all of Vim's major features and can be used by dragging and dropping a file or pasting/typing in your text.

Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris