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]( 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 Workshops]( 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. [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 [Northwestern: Online Master’s in 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 - [Frontend Web Developer/Marketing]( at Rasa (Remote) - [Front End Developer Chatbots]( at Joboti (Amsterdam, NL) - [Web Project Manager]( at Beekeeper Group (Washington, DC) --------------------------------------------------------------- #10. Our Recent Articles - [Setting Up A Currency Convertor With ExchangeRatesApi.io]( - [Smashing Podcast: Why Is My React App Slow?]( - [2021 Desktop Wallpapers]( - [Adding A Commenting System To A WYSIWYG Editor]( - [How To Build And Launch Powerful Responsive Websites With Editor X]( - [Accessible SVGs: Perfect Patterns For Screen Reader Users]( - [A Guide To Undoing Mistakes With Git (Part 2)]( - [A New Way To Reduce Font Loading Impact: CSS Font Descriptors]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](