Issue #17  (Diff Editor)08/17/22

As you might know, VS Code has a built-in diff editor that lets you easily compare two files for differences. Diffing is enabled by right-clicking a file in your Explorer pane and using the options "Select for Compare" and "Compare with Selected".

If you use the diff editor, the default settings are probably fine in most cases. But like anything in VS Code, you can customize the look and functionality of it.

You can find all the diff editor settings by opening the Settings UI and typing "diff editor" in the search box.

First of all, by default VS Code doesn't take trailing or leading white space into consideration when doing diffs. You might not like that for your diffs, so you can uncheck the "Ignore Trim Whitespace" option:

Normally a diff will display +/- indicators to show which lines in the compared files are added/removed. In the same area, you'll also see an arrow icon that indicates that you can take immediate action to fix that diff, or "revert" the differences. Both of these indicators are shown in the image below.
 
These can be removed from the diff editor's UI by unchecking the applicable options in your settings:
 
And finally, if you prefer not to see your diffs in a side-by-side view, you can disable that and view the diffs inline in a single file:



I personally find single-file diffs hurt my brain, so I like the side-by-side view much better. And in fact, the only one of the settings I've mentioned here that I would change is the first one that doesn't ignore whitespace in diffs. But for your own workflow, you might make some different choices.

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

VS Code Tools

Markdown All in One — VS Code extension that provides extra features for Markdown, including keyboard shortcuts, table of contents, auto preview and more.

Path Autocomplete — VS Code extension that adds autocomplete functionality for file paths, including relative, absolute, file system paths, partial paths, etc.

Jest Runner — VS Code extension that adds a simple way to run or debug a single (or multiple) Jest test from the context-menu, via CodeLens, or using the command palette.

npm Intellisense — A popular VS Code extension that adds autocomplete functionality to npm modules in import statements.

VS Code Articles

VS Code 1.70 (July 2022) — The latest updates to VS Code include custom code folding, terminal improvements, title bar customizations, a getting started experience for Python, and more.

Visual Studio Code: Extension Extravaganza 2022 — Part of a Microsoft Reactor event featuring some of the most innovative next-generation extensions on productivity, observability, security, and integration.

Quick Tip: Clear VS Code Cache for Open Files — From Geoff Graham, something you might need to do if VS Code keeps crashing due to it trying to open a very large file in the cache.

PostApex: Advertise in Premium Email Newsletters — A premium email advertising platform that lets you reach over 100 million readers across the world. You can discover email newsletters that fit your customer profile and effortlessly launch newsletter sponsorships.   Sponsor 

Best of the Rest

TerraBook — A modern IDE for your AWS account. Includes templates for front end, back end, and databases, and an in-browser IDE.

Recoded —  Another option to "prettify" code screenshots for use in social media, docs, Slack channels, etc.

My Neovim Setup for React, TypeScript, Tailwind CSS, etc. — 
Takuya Matsuyama with an in-depth post on his setup for working in Neovim along with a number of popular front-end technologies.

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