10 Must have VS Code Extensions for Developers ( PART — II)

Yo!!! It’s been a while since we met. I am back with another cool extensions for coders out there.

If You haven’t read the PART — I. Read it here 👉 click here

And, If you already have read PART-I. let’s continue..

NUMBER 1 — Code Runner

Code Runner is a popular extension for Visual Studio Code that allows you to run code snippets or code files in multiple programming languages. It supports a wide range of languages including C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, and many more. With Code Runner, you can easily run your code right from the VS Code editor, either by using a shortcut or by clicking a button.

Features

• Run code file of current active Text Editor

• Run code file through context menu of file explorer

• Run selected code snippet in Text Editor

• Run code per Shebang

• Run code per filename glob

• Run custom command

• Stop code running

• View output in Output Window

• Set default language to run

• Select language to run

• Support REPL by running code in Integrated Terminal

NUMBER 2 — Wakatime

WakaTime is a powerful extension for Visual Studio Code that provides automatic programming metrics and time tracking. It’s an open-source plugin that can help you understand your coding activity by generating insights from your programming activity. Once installed, you can use Visual Studio Code as you normally do, and your coding activity will be displayed on your WakaTime Dashboard. This can be particularly useful for understanding how much time you spend on different projects, files, languages, and more. Remember, to use WakaTime, you’ll need to enter your API Key after installation. It’s a great tool for developers who want to improve their productivity and gain insights into their coding habits.

NUMBER 3 — Color Highlight

Color Highlight is a handy extension for Visual Studio Code that enhances your coding experience by visually highlighting color values in your code. It supports various color formats including HEX, RGB, RGBA, and HSL. When you’re working with CSS or other web technologies, Color Highlight makes it easy to spot and understand color values at a glance. It styles CSS/web colors found in your document, making it a useful tool for developers who frequently work with colors.

NUMBER 4 — CSS Peak

It is a powerful tool that enhances the development experience for CSS, SCSS, and LESS. It allows developers to peek into CSS definitions directly from HTML or JavaScript/TypeScript code. By simply hovering the cursor over a CSS class or ID in their HTML code and pressing the “Peek Definition” shortcut key (Alt + F12), a small window opens showing the CSS code that is applied to that element. This feature enables developers to easily view and edit the styles without leaving the current file. In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name.

NUMBER 5 — Code Snap

It is a fantastic tool that allows developers to take beautiful screenshots of their code. It’s a handy feature when you want to share your code on social media or use it in presentations. You can quickly save screenshots of your code or copy them to your clipboard. It also provides many configuration options, such as showing line numbers, adjusting the background color, and more. To use CodeSnap, you simply select the code you’d like to screenshot, open the command palette (Ctrl+Shift+P), and search for CodeSnap. You can then adjust the width of the screenshot if desired and click the shutter button to save the screenshot to your disk. CodeSnap is highly configurable and offers a great way to showcase your code.

NUMBER 6 — Path Intellisense

It is a highly useful tool that enhances the coding experience by providing intelligent autocompletion for file paths. It simplifies file path entry, eliminates typos, and ensures accuracy when referencing files or modules within your project. This extension supports both relative and absolute paths. It’s particularly useful when you’re working with large projects with many files and directories. By default, Path Intellisense removes the file extension in import statements. However, this behavior can be customized in the settings. For example, you can choose to show hidden files, automatically trigger the next suggestion, resolve absolute paths to the disk root path, and define custom mappings. This extension is a great asset for any developer using Visual Studio Code.

NUMBER 7 — Peacock

The Peacock extension for Visual Studio Code is a unique tool that subtly changes the color of your workspace. This is particularly useful when you have multiple VS Code instances, use VS Live Share, or use VS Code’s Remote features, and you want to quickly identify your editor. It allows you to change the color of various elements such as the activity bar, status bar, and title bar. You can also save user-defined colors and adjust the coloring of affected elements. To use Peacock, you simply open the command palette (Ctrl+P), type “Peacock”, and choose one of the pre-defined colors. Now, your editor will have a new look that you can easily identify. Please note that Peacock is classified as a UI extension and is always run on the user’s local machine. It cannot directly access files in the workspace, or run scripts/tools installed in that workspace or on the machine.

NUMBER 8 — Error Lens

The ErrorLens extension for Visual Studio Code is a powerful tool that enhances the inbuilt diagnostic highlighting. It makes diagnostics stand out more prominently by highlighting the entire line wherever a diagnostic is generated by the language. It also prints the diagnostic message inline, right at the site of the line of code which is generating the diagnostic. This means you do not have to switch context to the problem view. The extension also provides several commands and settings for customization1. For example, you can toggle the global setting “errorLens.enabled”, enable/disable errors in “errorLens.enabledDiagnosticLevels” setting, and much more. This extension works for any language which provides diagnostics. It’s a great asset for any developer using Visual Studio Code.

NUMBER 9 — Multiple Cursor Case Preserve

It enhances the functionality of multiple cursors. It’s designed to preserve the case when editing with multiple cursors. This is particularly useful when you’re trying to change a single word in all variable names without breaking your camelCase. The extension recognizes CAPS, Uppercase, and lowercase. It works for both typing and pasting. However, please note that the history for redo breaks when you undo a change made by the extension after pasting into multiple selections1. This issue prevents the complete solving of undo/redo. Despite this, the Multiple Cursor Case Preserve extension is a great asset for any developer using Visual Studio Code.

NUMBER 10 — Todo Tree

It quickly searches your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. This allows you to have a centralized view of all your tasks scattered throughout the application. The view can be dragged out of the activity bar into the explorer pane or anywhere else you would prefer it to be. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO. Found TODOs can also be highlighted in open files. You can customize the highlighting of tags and even set different colors for different tags. This extension is a great asset for any developer using Visual Studio Code.

So That’s it for now. I hope these extensions will help you out in saving your time + making you happy.

If you are still here and Reading this. Consider Following me & Subscribing to Email Notifications to Stay Updated with the Content I will upload.

For any Discussions, you can add a comment.

&&

For more content, you can follow me on Twitter : )