This is part of an on-going series on productivity in Visual Studio Code. Earlier entries have focused on keyboard shortcuts, you can find Part 1 here. Or check out Part 1 of the extensions series.
This week I am going to again focus on extensions that you can use to increase your productivity in VSCode. As a reminder, if you’re not up to speed with VSCode extensions, you can read up on them here.
Git Lens is an extremely in depth and powerful extension that leverages the power of Git within your editor. It allows you to quickly glimpse into who, why, and when code was edited. Traverse through the history to gain further insights as to how and why the code evolved. Git Lens allows you to effortlessly explore the history and evolution of a codebase. The extension is also highly customizeable, allowing you to enable and disable features with ease as you see fit. Git Lens also comes with the “Git Command Palette”, which can serve as both a reference and training tool for many common Git commands, as well as provide a commit history and search. Git Lens is great for looking back on solo projects, bbut really shines when used with a code base that has multiple developers. Similarly, Git History provides much of the same functionality, and it is ultimately user preference between the two.
CSS Peek allows you to view the appropriate CSS code within your HTML or ejs file. Use Ctrl + Shift + F12 to load the CSS inline and make quick edits. Use F12 to jump to the CSS file (if open) or open it in a new editor window. To simply show the current CSS definition, use Ctrl + hover over the required symbol. This powerful tool can save a lot of time switching back and forth between files, and streamlines the process of revising CSS as needed throughout development.
Staying in the CSS vein for this one, this extension is simple, yet very valuable. Colorize allows you to instantly visualize CSS colors in your CSS file. Wheter you’re using RGB, HSL, or hexadecimal, this extension can help you make color determinations without having to leave your editor.
Another simple, yet incredibly useful extension. We’ve all done it, put a “TODO” or a “FIXME” comment in our code, and forgotten to go back and actually do or fix what was needed. Well enter TODO Highlight. This extension will highlight “TODO” or “FIXME”, or other user defined annotations, in user definable colors, helping them to stand out and remind you to actually do and fix the things that need doing and fixing.
Be sure to check back in the future for even more Visual Studio Code productivity tips.