VS Code on steroids
“Give ordinary people the right tools and they will design and build the most extraordinary things.” — Neil Gershenfeld
Visual Studio is one of the most popular IDEs very powerful because of its rich & powerful extension environment which comes from its Marketplace. It provides all the features of both lightweight & heavy-weight IDEs. As a developer, IDE is your bow & extensions are the arrows.
I’ll be targeting extensions useful for web developers but this will also be helpful for others. The extensions I have mentioned are the ones I have used and found amazing. Also, there is a cool bonus tip at the end 🔥
Relax-a-Little
When we are coding or doing any sort of project development then we get so into it that we forget to take a break or drink water at all. This extension solves this problem by making us take a break once in a while to stay healthy and productive longer. It greys outs the editor until you stop coding & look around and do something.
Peacock
while working on multiple workspaces this extension could help you to identify which exact workspace you have switched to or working on. It subtly changes the color of your Visual Studio Code workspace. This is ideal 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.
Project Manager
It helps you to easily access your projects, no matter where they are located. You can define your own Projects (also called Favorites), or choose for auto-detect Git, Mercurial or SVN repositories, VSCode folders, or any other folder.
Bracket Pair Colorizer 2
Brackets are the bane of a developer’s existence. With tons of nested code, it gets almost impossible to determine which brackets match up with each other. Bracket Pair Colorizer (as you might expect) colors matching brackets to make your code much more readable.
Indent Rainbow
This extension colorizes the indentation in front of your text alternating four different colors on each step. It makes indentation more readable by colorizing each tab indentation. By default, it comes with a “rainbow” of colors, but if you prefer something more subtle like me, you can configure it.
Better Comments
This extension helps you create more human-friendly comments in your code.
With this extension, you will be able to categorize your annotations into Alerts, Queries, TODOs, Highlights, Commented out code can also be styled to make it clear the code shouldn’t be there, Any other comment styles you’d like can be specified in the settings.
Path Intellisense
While working on JS library projects like React, Angular where the project is fairly large then finding exact component paths is difficult. This extension helps you auto-complete the path of the imports. It also helps you to auto-complete the file references in your HTML file.
Settings Sync
If you use multiple machines, as I do, you’ll find this extension useful. Settings sync keeps all your computers/laptops synced in terms of how your visual studio is set up.
If you’re a developer who works on both an office and home computer you’ll basically you will be working on a different workstation. It’s time-consuming to change your settings manually on both because, to be honest, we will need to change our settings from time to time depending on the projects we are doing, so to reduce the stress of programming, I recommend that you use this extension so that all the changes you make are automatically synced on all your machines and workstations.
Git Lens (:: Git on Steriods)
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase. It provides features like effortless revision navigation, displays authorship at top of a code block or file, current line blames, changes, and heatmap for file, etc.
Github Extension
If your team is using Github, or you are using Github for your project repositories or want to use other developer’s source code repositories, then this extension is for you. By using Github Extension, you can now easily connect other developer’s repositories, your favorite developer’s repositories, and even your own. You can easily pull and push — very handful if you use Github regularly.
Quokka.js
This extension is used for testing JavaScript/TypeScript code in the Visual Studio Code editor itself instead of checking it out in the browser console. Runtime values are updated and displayed in your IDE next to your code, as you type.
Wallaby.js
Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code.
Debugger for Chrome
We all know how annoying sometimes debugging gets so this extension is used to help you debug your JavaScript code. It’s developed by Microsoft. We can set breakpoints, step our way through the code, debug scripts added dynamically, and more. Suppose we have a function which we are not sure if it’s being executed or not this extension can help by pausing in the debugger when executed.
Live Server
In using Live Server, this vs code extension will help you open a live web server of your current project. Usually, when using a builder like Webpack, that normally does the job, but this extension has proven itself to be more useful. You can just right-click and run open with live server and it will do the rest.
Code Snippet Extensions
Snippets help you write repetitive code quickly. Here are some of the most popular snippet extensions for JavaScript developers. There are many code snippet extensions you may choose one from the VS Code Marketplace. I would suggest using just one snippet extension for simplicity purposes. I am currently using ES7, React, Redux & GraphQL Snippets. A quick tip if you want snippets to show on top of suggestions is to use this configuration:
{
"editor.snippetSuggestions": "top"
}Linter Extensions
It’s quite common for programmers to forget which coding styling they agreed to work with because everybody has different. To enforce the rules, we need to use linters that compare your code with the rules you’ve established. You define your rules by picking a popular coding style such as Standard, Google, and Airbnb. You can use them as is or use a configuration file to customize the rules. VS Code doesn’t have a built-in JavaScript linter, so you’ll need to install an extension. There are multiple extensions like ESLint, JSLint, JSHint, JSStandard.
Live Sass Compiler
It compiles your SASS/SCSS files into CSS files in real-time and automatically gives you a live preview of the app or the compiled styles in your browser.
Polacode — Polaroid for your code 📸
You know those fancy code screenshots you see in articles and tweets? Well, most likely they came from Polacode. It’s super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image!
Import Cost
This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
Auto Rename Tag
Its primary purpose itself, auto rename tag, so if you have mistakenly created an opening tag and wanted to change it, the closing tag will also change in real-time.
Auto-Close Tag
This extension automatically add HTML/XML close tag.
Visual Studio IntelliCode
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
Bonus Tip
We all at some time go through lots of GitHub Repos and one pain point is navigating through the code. Github1s typically solves this problem. It opens any Github repo in Vs Code and all this happens in your browser.
Just add 1s after github and press Enter in the browser address bar for any repository, you want to read.
If you enjoyed this article and think others can benefit from it as well, feel free to share it on social media. Thank you for reading this article. Please don't forget to leave claps if you like the post. Happy Learning!
