Issue #45  (Auto-formatting Code)03/01/23

VS Code can help keep your code clean automatically by means of four different default settings that don't require any kind of extension. Of course, many of you are likely using some kind of extension for formatting code (Prettier would be the most popular) but this feature is available in VS Code out-of-the-box for JavaScript, TypeScript, JSON, HTML, and CSS.

These formatting options are all disabled by default but you can find them in your settings by searching for "Format on". You'll see four options:
   
Here's a brief overview of the options:

• Format On Paste – Useful if you're pasting code from external sources, this will format the code instantly.
• Format On Save – This will trigger formatting only when the file is saved.
• Format On Save Mode – This allows you to specify if the entire file should be formatted, or only the modifications. If you choose one of the modification options, it requires use of source control.
• Format On Type – Lets you format each line that's typed

Any of these options will only work if a formatter is available for the language being used. As mentioned, certain languages have default formatting settings in VS Code, so you can start using those right away.

But you're not limited to what the default formatters do. You can adjust the formatting to suit your own needs. For example, if you search for "javascript.format" in your settings, you should see more than a dozen options that allow you to fine-tune how VS Code formats JavaScript. The same can be done for "typescript.format", "html.format", "css.format", and "json.format" (though the JSON formatter doesn't seem to have any fine-grained options like the others).
 
As mentioned, there are extensions for just about any language that will serve as your default formatter once installed. The VS Code extension Marketplace has a specific category for formatters when searching.
 
And if you're skilled enough, you can even build your own formatter extension for a specific language, or for multiple languages. There's a brief discussion of the subject in this article in the VS Code docs.
 

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

VS Code Tools

SemanticDiff — Programming language aware diffs for VS Code that adds an alternative diff viewer to VS Code that hides style-only changes or re-formattings, detects moved code, highlights changes inside moved code, and more.

Uno Platform — VS Code extension for projects built with Uno Platform, the toolkit for building single-codebase apps for Windows, iOS, Android, WebAssembly, macOS, and Linux.

VSCode Performance Tool — From Microsoft, a small Node CLI for evaluating performance of VS Code.

Codeium — An AI-powered extension for VS Code and other IDEs that can help you write code in unfamiliar languages, minimize boilerplate code, find and use APIs, and autogenerate test cases.

VS Code Articles & Videos

▶ Cursed VS Code Setup Tries To Kill Me — A humorous video from Theo where he attempts to make VS Code completely unusable based on some crazy extension and settings recommendations.

Say Goodbye to Eye Strain with VSCode Comment Customization — A quick tip on adjusting your theme's comment color. In this case, the author didn't like the brightness of the color but you could also do this if the comment text has low contrast with the background.

Become a Master with React.js — A premium training course consisting of 70+ HD videos across 11 course modules, to learn to build modern, full-stack React and GraphQL apps.   Sponsor 

Create and Publish Your Own VS Code Theme — A step-by-step tutorial that uses Yeoman to generate a template for creating your own VS Code theme (as the author recently did for a dark theme he created).

 

Best of the Rest

Marpit — A framework for creating slide decks from Markdown. It can transform Markdown and CSS themes to a slide deck composed of static HTML and CSS and create a web page that can be easily converted to a PDF.

Pulsar — A cross-platform community-led hyper-hackable text editor with a built-in package manager, smart auto-complete, and more.

Small Basic — A programming language created specially to help students transition from block-based coding to text-based coding using languages like C# and Java.

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