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.
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.
— Happy VS Coding, everyone! 🙂
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.
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!
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.
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.
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.
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.
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.
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.
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).
- Front-End Accessibility
- Color Palettes Generators and Tools
- Front-End Boilerplates and Starter Kits
- VS Code Extensions
- Figma Plugins and Tools
- Front-End Boilerplates
- Little Smashing Stories
- UX Edition
- Web Typography
- Web Performance
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.