Issue #7  (Customizing File Icons)06/08/22

In VS Code, when viewing your files in the Explorer sidebar (CMD/CTRL-SHIFT-E), each file type usefully has a fairly nice set of icons that helps you easily identify files just by scanning, making things a little more visually pleasing. This default icon set called Seti UI, was added to VS Code back in 2016.

If you're interested in improving or changing the way these icons look in your VS Code setup, there are some options. First, in the command palette, type "File Icon" and select "Preferences: File Icon Theme" to bring up a few options as shown here:
 
From here you can choose one of the following:

• Disable file icons, so you'll see nothing next to each file, just file names. Some of you might prefer this.
• Minimal file icons, which shows the same simple page icon next to each file along with opened/closed folder icons. This might be a slightly better look than the disabled view.
• Seti, which is the option I screen-grabbed above, with the colorful icons identifying each file type uniquely.

Finally, you'll notice the last option, "Install Additional File Icon Themes...", which opens up the Extensions sidebar, showing various other icon sets for replacing Seti. The most popular of these options seems to be the Material Icon Theme, with over 12 million installs. It's quite a nice looking icon set, as the screenshot below demonstrates!
 
This one adds folder icons, which I'm sure other icon sets do also, which is a little different from the Seti UI icons.

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

VS Code Tools

Blockman — VS Code extension to highlight any nested code block that you're currently inside (editing, selecting, etc).

Trunk — VS Code extension for Trunk, a tool for simplifying the process of checking, testing, and merging code via Git pull requests.

Markdown Preview Enhanced — VS Code extension that provides numerous Markdown-based functions, including automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, and more.

JavaScript (ES6) Code Snippets — An older but popular extension that lets you quickly include code snippets in ES6/JavaScript/TypeScript, with each snippet triggered by a keyboard shortcut.

VS Code Articles

How to Change VS Code's UI Font in Windows — A quick post that describes how to change the font used in VS Code's interface. As the user points out, this will cause VS Code to warn you each time the editor is started up but, as pointed out in the comments, you can use an extension to ease the process.

New Tailwind CSS Language Mode for VS Code — One of various updates related to the Tailwind CSS project, as described in this blog post by Tailwind's creator Adam Wathan.

▶ 5 Default VS Code Settings You Should Tweak Immediately — From Zoran Jambor's recently launched YouTube channel. This is actually 6 tips, including the bonus tip, and I love that the tips are all explained well as to their practical value.

Bytes — A JavaScript newsletter that's entertaining and informative with lots of coding tidbits, news, and tools.   Sponsor 

The Alternatives

GitHub Copilot AI Coding Assistant Due This Summer — An update from InfoWorld on the status of the general availability of Copilot, the AI-driven code assistant you can use in different editors and IDEs.

What is an IDE? How Does It Enable Faster Development? — Joel Falconer's extensive post that might be useful for beginners or even those who use a simple editor and haven't delved into using a larger IDE.

Umbra —  A visual editor for shaders in Flutter.

vim-dirtytalk — A dynamically updateable spellcheck dictionary, to be used in conjunction with Vim's native spell checking feature, meant to aid with writing technical documentation.

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