Smashing Newsletter: Issue #303

Editorial

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.

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.

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.

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:

New Adventures In Front-End 2021 Dev
with Vitaly Friedman. June 9–23.
Successful Design Systems Dev
with Brad Frost. June 29 – July 13.
Level-Up With Modern CSS Dev
with Stephanie Eckles. July 8–22.
Designing Websites That Convert UX
with Paul Boag. July 22–30.
The TypeScript Masterclass Dev
with Stefan Baumgartner. August 5–19.
Designing The Perfect Navigation UX
with Vitaly Friedman. August 26–27.
Vue.js: The Practical Guide Dev
with Natalia Tepluhina. September 14–28.
Building Modern HTML Emails Dev
with Rémi Parmentier. September 16–24.
Accessible Front-End Patterns Dev
with Carie Fisher. September 30 – Oct. 14.
Designing Landing Pages That Sell UX
with Rob Hope. October 5–19.

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.

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.

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.

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.

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.

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.

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).

June 1, 2021 Smashing Newsletter: Issue #303

Previous Issues