VSCode is very powerful text editor with extensible functionality. It’s free, open source and developed on Github. I use it mostly to work with different types of web development.
It has lot of built-in features like Snippets, Debugging, Refactoring, Git integration etc. You can also extend functionality by customizing or installing extensions.
Import Cost
When you’re developing a web application or a website, it’s all too easy to make something that’s bloated – particularly as a newbie dev. A big factor in this is that many devs don’t always know how big packages are when they’re imported through code.
Import Cost is a VS Code extension that displays the size of imported packages inline, so you know exactly how much importing that package will cost during the development process. So, it’ll help you to better optimize your applications and websites, particularly for mobile users who typically suffer more due to bloat.
Tabnine
Tabnine is a massively popular AI assistant for VSCode that works with all major programming languages, so there’s no doubt you’ll find it useful no matter what your skillset is.
By studying publicly shared codebases, Tabnine uses deep learning algorithms to predict what you need and offers one-click code completion so you can work through your project quickly and efficiently. For newbie coders, this makes learning a breeze, as it gives you the space to play with ideas without needing to remember coding syntax or search StackOverflow.
And, if you’re a seasoned dev, then you’ll find that Tabnine saves you oodles of time on whatever you’re working on by giving you the building blocks you need to get things running.
GitLens
If you regularly use Git, either professionally or with your own projects, then GitLens makes it even easier to integrate your IDE with Git.
With GitLens, you can quickly see who, why, and when code was changed in any given project. Plus, you can hop back through previous changes to see why other devs changed that code, and do side-by-side comparisons to get a better understanding of why things changed.
Remote – SSH
If you’re working remotely right now because of COVID-19, you might be struggling with not having the right tools at home to work with. Or, you might need to work with software that’s on a device in a remote location. Remote – SSH is here to help.
Remote – SSH allows you to remote onto any machine’s development environment to get your work done, and quickly swap between different environments to update your code. All you need for Remote – SSH to work is the extension on your computer and the remote device, and you’re set.
This makes it a great option for devs who need to access more powerful software than they can host at home, or even if you need to check out code that’s running at your work location but you can’t make it into the office.
Live Sass Compiler
Sass is an increasingly popular development language, but if you’re new to Sass, it can be pretty confusing.
Live Sass Compiler…well, compiles SAAS or SCSS files to CSS. Live. Regardless of if Sass is a requirement for your project or you just like the formatting, this extension can save you a ton of time (and headaches!) by taking care of the hard work for you.
You can even get a live preview of the compiled CSS file in your browser or the Live Sass Compiler app, so if there are any problems, you can fix them before you check your code in.
It’s super customizable, too, so you don’t need to worry about GitLens being too intrusive in your IDE.
Bracket Pair Colorizer
It’s such a simple quality of life improvement, but it’s one that every developer will be thankful for. Bracket Pair Colorizer does exactly what it says on the tin – it colors pairs of brackets, so you can find the opening and closing brackets extremely quickly.
Whether you’re working with spaghetti code, figuring out someone else’s code, or you just want to make it easier to read code, this extension is super useful. It’s also really easy to configure this extension’s settings, too, so you can even make it work if you use custom bracket characters. And, if you need specific colors, or want orphan brackets to show up in a separate color, it’s easy to do that too.
Path Intellisense
Whether you’re a seasoned dev or you’re new to the game and find the number of things you need to remember overwhelming, you won’t know how you ever lived without Path Intellisense.
Path Intellisense makes working with file paths easy by offering either an autocomplete or suggestions for your code. Simply begin typing a path in quotations, and Path Intellisense will either automatically complete the path for you or suggest a variety of different options if it’s not sure what option you want.
Plus, if you’re using hidden files, Path Intellisense can help you with that too.
It’s quite a simple quality-of-life improvement, but it’s one that every dev never knew they needed.
Prettier
We know that, with certain languages, it’s vital for you to keep your code tidy and properly formatted. But, that can be easier said than done when you’ve got deadlines to meet – or if you’re a new developer that doesn’t know all that much about formatting yet.
Prettier is a formatting extension that automatically formats your code for you every time you save it, so you don’t have to worry about forgetting to indent every now and then. Plus, if you’re still learning how to code, Prettier can save you a ton of headspace, allowing you to focus on your project instead of how to make your code readable.
We’re not saying that readable code isn’t something you should avoid learning, but it definitely takes the headache out of code editing and reading someone else’s code.
Settings Sync 🚀
We’re starting with this handy extension first as it will save you time if you decide to try out any of the following. Settings Sync allows you to sync pretty much everything you customise in VS Code, from snippets, themes, icons, launch, keybindings, workspaces and even other extensions across multiple machines.
Benefits: saves you valuable time, gives you access to your preferred IDE from any device.
Better Comments 💭
Better Comments allows you to create more human-friendly comments in your code, categorising your annotations into alerts, queries, TODOs, highlights, etc.
Benefits: clear and digestible code will save lots of time for you and also for your team
formatter, typescript, javascript, cleancode, python
Bracket Pair Colorizer 🌈
This might be fairly obvious, but the Bracket Pair Colorizer colourises the opening and closing brackets so that you can identify matching brackets with colours. You can define which characters to match, and which colours to use.
Benefits: Saves you time, reduces confusion and generally makes your coding life easier
GitLens 🔍
GitLens is an open source extension that combines the capabilities of Git with VS Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time, it helps you to visualise code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, and a whole lot more.
Benefits: helps you to better understand your code, allows you to effortlessly explore the history and evolution of a codebase.
Visual Studio IntelliCode 🤓
This extension aims to aid developers and programmers with AI-assisted code completion suggestions. It comes with default support for Python, TypeScript, JavaScript, React, and Java.
Benefits: saves you time by putting what you’re most likely to use at the top of your completion list.
javascript, typescript, python, artificial intelligence, javascriptreact
Prettier 🌸
Prettier is an opinionated code formatter that enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary.
Benefits: Having consistent formatting and styling across your code can save a lot of time, especially when collaborating with other developers.
Debugger for Chrome 🪲
The debugger is a VS Code extension to debug your JavaScript code in the Google Chrome browser or other targets that support the Chrome DevTools Protocol. It helps to debug eval scripts, script tags, scripts that are added dynamically, and setting breakpoints, including in source files when source maps are enabled.
Benefits: detect errors earlier on in the development process, gain useful information of data structures and allow easy interpretation.
debugger, chrome, javascript, code quality, devtools
Snippets ✂️
Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. While VSCode includes built-in JS IntelliSense, Code Snippets enhance that experience by adding a slew of import/export triggers, class helpers, and method triggers.
Benefits: saves time and boosts productivity
Live Share 🤝
Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you’re using or app types you’re building.
Benefits: instantly and securely share your current project, share debugging sessions, terminal instances and more
Live Server 💓
Live server launches a local development server with a live reload feature for both static and dynamic pages. Every time you save your code you’ll automatically see the changes reflected in your browser.
Benefits: spotting errors will be much quicker and it will be easier to experiment with your code.
Ponicode 🦄
Obviously, no VS Code extensions list would be complete without Ponicode. Ponicode allows you to create, modify and visualise your unit tests in seconds, boosting your coverage with AI-powered test generation.
Benefits: assists you in the task of unit testing, saving you time while ensuring your code is well tested
Conclusion
VSCode extensions are a crucial part of it’s power and flexibility. And this post intends to provide you with some top-of-the-line code extensions for Visual Studio Code that will help you, developer or designer, beyond your wildest dreams. Some of these are new, some of them are mature, yet all of them are powerful and very useful.