Smashing Newsletter #303: VS Code Extensions

With useful VS Code extensions and little tools to help you save time and avoid headache when writing code. Issue #303 June 1, 2021 View in the browser 💨

Smashing Newsletter

Namaste Smashing Friends,

As front-end developers, we spend so much of our work time in front of our text editors. One would assume that looking at the sheer number of hours we spend in these applications, we should know them in and out. But too often we stay within the boundaries of the familiar, and little helpers that can boost our productivity go unnoticed.

Peacock Extension
Subtly change the color of your workspace to distinguish between them in VS Code, with Peacock.

In this newsletter edition, we look at some of the useful extensions for one of the popular text editors out there — VS Code. We look at how to automate log message, how to highlight matching brackets and indents, how to manage files easier and how to leave friendlier comments.

We’ve put them and way more extensions in our comprehensive VS Code extensions round-up in Useful VS Code Extensions For Front-End Developers. We hope that these little helpers will help you save time and avoid annoyances in the daily work routine.

At Smashing, we are getting ready for a few calmer days in June, with some of us leaving for short vacations. We hope you’d be able to find some time to look less at the screen, and perhaps a bit more at the nature and the world surrounding us, and perhaps even meet friends you haven’t seen for a while.

And in the meantime, you could also drop by our friendly online workshops on front-end adventures in 2021 (by yours truly) and successful design systems by Brad Frost. We’d love to see you there!

Happy VS Coding, everyone! 🙂
Vitaly (@smashingmag)

1. Folder Icons In VS Code

Custom file and folder icons in VS Code? Yes, please! To help you maneuver your workspace more easily, even if a lot of files and folder are involved, the VS Code Icons Team released an extension that brings icons to your editor. From “access” to “zip”, “Android” to “www”, the collection is sure to have the file and folder icons you need.

Folder Icons In VS Code

The project-specific icons toggle feature and project auto-detection will automatically detect the type of project you have opened in your workspace and prompt you to toggle the icons accordingly. It’s also possible to use custom icons, if you prefer.

2. Highlighting Matching Brackets And Indents

An intense coding session strains the eyes, so anything that helps cater for more visual clarity is a welcome helper. To take your syntax highlighting to the next level when working with VS Code, you might want to check out the Bracket Pair Colorizer The extension identifies matching brackets — in colors you define.

Highlighting Matching Brackets And Indents

Now that you’ve got full control over your brackets, another little detail to watch out for are matching opening and closing tags. VS Code does already come with a tag matching feature, but it is rather basic. The Highlight Matching Tag extension does the work more thoroughly, matching tags anywhere — from tag attributes to inside strings — and even highlighting the path from tag to tag in the status bar. Extensive styling options let you customize how tags are highlighted. HTML and JSX are officially supported.

Also, with Indent-Rainbow you can colorizes the indentation for your code, and Gremlins Tracker allows you to find harmful characters during coding such as zero-width spaces and non-joiners, non-breaking spaces, left and right double quotation marks. You can find more VS Code extensions in a VS Code Extensions post we’ve published last week. Happy extending!

3. File Management Utils For VS Code

Especially in large projects a lot of time is usually spent on organizing and managing files. But how do we ensure that the navigation between the files doesn’t slow us down? File Utils makes the task more convenient.

File Management Utils For VS Code

The extension enables you to create, duplicate, move, rename, and delete files and directories with just a handful of commands. It also supports brace extension which automatically generates arbitrary strings strings to set up your document structure.

4. Upcoming Smashing Online Workshops

Investing time into a better development workflow is worth it. That’s why we run online workshops around front-end and UX — be it with focus on accessibility, design or performance. In fact, we have a couple of workshops coming up soon.

Smashing Online Events
Now with friendly summer workshop bundles, for your team and colleagues. 🏖

Next workshops are coming up soon:

5. Automating Log Messages

When the app doesn’t do what it’s supposed to do, we often look up to logs. But when it comes to log messages, the turbo-console-log extension has got your back. It automates the writing of meaningful log messages and inserts them automatically.

Automating Log Messages

All you need to do is select the variable which you want to debug, press Ctrl + Alt + L, and the log message will be inserted in the next line. Keyboard shortcuts let you comment, uncomment, or delete all log messages from the current document.

6. Git History In VS Code

Viewing and searching git log along with the graph and details, viewing a previous copy of the file you’re working on, searching the history, comparing branches and commits — these are just a few of the features that the Git History extension offers to streamline your workflow.

Git History In VS Code

Speaking of Git: Another VS Code extension worth taking a closer look at when working with Git is Git Graph: It lets you view a Git graph of your repository and easily perform Git actions from the graph.

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.

7. Highlight Annotations In Your Code

Do you sometimes forget to review the to-dos you’ve added while coding? The TODO Highlight extension reminds you that there are notes or things that need your attention before you publish to production.

Highlight Annotations In Your Code

The keywords TODO and FIXME are preconfigured, but you can customize the configuration to your liking if you prefer. A command highlights the open comments for you right in your code or as a list of all annotations. A great little reminder.

8. Human-Friendly Comments

How do you handle comments? If your code requires a lot of explanations, it might be a good idea to make those usually grayed-out comments more human-friendly, so that it’s easier to read at a glance if a comment alerts you of a deprecated method, for example, or if it’s a todo your teammate left for you.

Human-Friendly Comments

The VS Code extension Better Comments helps you do just that, categorizing annotations into alerts, queries, todos and highlights. Commented-out code can also be styled to make it clear it shouldn’t be there.

9. New On Smashing Job Board

10. Our Recent Articles

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

Smashing Newsletter #302: Figma Plugins and Tools

Tuesday, May 25, 2021

With new features in Figma, useful Figma plugins, a template for Figma wayfinding, simpler annotations and integration with Vue.js, and how to manage design systems in Figma. Issue #302 • May 25, 2021

Smashing Newsletter #301: Front-End Boilerplates

Tuesday, May 18, 2021

With front-end boilerplates: global CSS reset, favicons, HTML email template and VS code snippets for React, Vue, Angular and TypeScript.Issue #301 • May 18, 2021 • View in the browser 💨 Smashing

Next Online Workshops on CSS, Design Systems and UX

Friday, May 14, 2021

Boost your skills online, with workshops on everything from front-end to design. Meet our new live workshops on front-end & design. • View in the browser 💨 SmashingConf Newsletter Howdy Smashing

Smashing Newsletter #299: UX Edition

Tuesday, May 4, 2021

On web forms, opening menus on hover/click, UX tooling, maps and UX training exercises. Issue #299 • May 4, 2021 • View in the browser 💨 Smashing Newsletter Hej Smashing Friends, Everyone on the team

Meet "Image Optimization", a Brand New Smashing Book

Wednesday, April 28, 2021

Meet “Image Optimization”, our brand-new practical guide to optimizing and delivering high-quality images on the web. Written by Addy Osmani. Let's get images on the web right. Meet “Image

👨‍⚕️ Curative Medical UI Kits + 🏆 Challenge Updates

Tuesday, June 15, 2021

Don't Miss This Week's UpLabs Designer Digest 👇 Firstly, we'd like to wish a warm congratulations to Yolan Puspa, the winner of our latest 🎙Clubhouse App Redesign Challenge! Secondly, we

✏ Is A Graphic Design Career For You? Create React Custom Hooks, Health Icons, and more...

Monday, June 14, 2021

Is a Graphic Design Career for You? (7 Questions to Ask Yourself) DRIBBBLE.COM COMMENTS When CSS Isn't Enough: JavaScript Requirements for Accessible Components SMASHINGMAGAZINE.COM COMMENTS Health

A Filmmaker's Kubrickian Loft

Monday, June 14, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room (that's not really a

This New Tabletop Collection Has Us Falling Back in Love With Formality

Monday, June 14, 2021

Plus, 10 kitchen trends taking TikTok by storm (image) Architectural Digest AD PRO Logo The Expert Taps Former Domino EIC Jessica Romm Perez to Lead Partnerships Read More → CeCe Barfield's New

Accessibility Weekly #244: Looking at WCAG 2.5.5 for Better Target Sizes

Monday, June 14, 2021

Sponsored by Automattic. They're hiring. June 14, 2021 • Issue #244 View this issue online or browse the full issue archive. Featured: Looking at WCAG 2.5.5 for better target sizes Todd Libby talks

Bullet Charts, Tapestry, Group Orders, Media Queries, Health Icons

Monday, June 14, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 14 2021 How bullet charts taught me about the importance

✏ Perfection in Design, 11 Landing Page Design Tips, Scarlet illustrations, and more...

Sunday, June 13, 2021

Adding Shadows to SVG Icons with CSS and SVG Filters CSS-TRICKS.COM COMMENTS Perfection in Design: Why It's a Bad Idea HONGKIAT.COM COMMENTS Scarlet Illustrations - Abstract and Surreal

✏ Web Design Done Well, NoCode Revolution, Akar Icons, and more...

Saturday, June 12, 2021

✨Grab a Free .design Domain Name for your Portfolio✨ [ad] PORKBUN.COM Web Design Done Well: Making Use of Audio SMASHINGMAGAZINE.COM COMMENTS Website Design Mockup: Pitch your Ideas the Best Way

✏ Front-End Auditing Tools, Privacy Analysis of FLoC, Free Tailwind Kit, and more...

Friday, June 11, 2021

✨Grab a Free .design Domain Name for your Portfolio✨ [ad] PORKBUN.COM 13 Inspiring Graphic Design Trends for 2021 VECTORNATOR.IO COMMENTS Link Shorteners: Why You Shouldn't Use Them GCS.

Celebrating High Point, Welcoming Lila Allen

Friday, June 11, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌