Extensions to your IDE are invaluable to speed up your work without reducing the quality of your output. Considering Visual Studio Code is the most popular IDE, here are some VSCode extensions that will make you a more productive developer.
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.
open-source, git, gitlens, vscode, annotation
Benefits: saves you time by putting what you’re most likely to use at the top of your completion list.
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.
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
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
Benefits: detect errors earlier on in the development process, gain useful information of data structures and allow easy interpretation.
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
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
debugger, collaboration, remote, clean code, code editor
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.
keybindings, multi-root, debug, vscode, developer tool
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.
open-source, vscode, settings-sync, vscode-sync, programmer productivity