When crafting code, a productive workspace involves more than just finding the right code editor. Out of the box, VS Code is made for developers by developers. According to the 2021 StackOverflow survey, 71.06% of all respondents use Visual Studio Code as the IDE of choice.
The thing that makes VS Code so popular is the number of extensions available in the Marketplace. With over 30,000 extensions in circulation, the options feel almost limitless – and overwhelming at the same time.
Which extensions should you choose? Which extensions are the best for productivity? Code versioning? Aesthetics? Formatting and linting? If you want it, there’s probably an extension somewhere in the Marketplace.
Here are 40+ VS Code extensions – curated, sorted, and categorized to help you increase your productivity and make you more effective as a developer.
With over half a million downloads in VS Code marketplace, GraphQL is an up-and-coming plugin extension to watch. GraphQL itself is also growing in popularity and implementation, which means that if you ever encounter it for your next project, GraphQL extension on VS Code is a must-have.
This plugin is maintained by the official GraphQL foundation, which means that it is actively supported and maintains the latest implementation.
Tabnine Tabnine is your all-in-one AI assistant that will help you code faster. With over 2 million installations to date, this plugin, driven by machine learning, works with the existing patterns of your projects. In its predictive code autocompletion, Tabnine employs the combined knowledge of everyone else that’s also downloaded and used the plugin.
[cta_btn url=”https://www.tabnine.com/pricing/landing” label=”Start a free trial”] Tabnine is more than just an auto-complete – it is a unique predictive AI-powered code completion that increases your productivity the more you use it.
The world of software development is rapidly evolving, with the integration of AI being one of the biggest driving forces. To remain competitive and relevant in this constantly changing landscape, it’s essential to stay up-to-date with the latest advancements and trends. By harnessing the power of AI, software engineers can streamline development processes, reduce errors, and improve software quality. Learn more about how to utilize AI and optimize software engineering practices.
YAML YAML can be tricky to set up. One stray space or incorrect tab can result in an invalid YAML file. The YAML plugin is maintained by Red Hat and acts as a validation tool.
Remote – SSH Released in 2019, Remote SSH has grown to over 5 million downloads. This extension lets you use a remote server as your development environment. Your connection remains secure via SSH, and with Remote – SSH, you can do it right inside VS Code.
With this setup, you can have a machine running in the cloud, centralizing your workflow to a single source and there is no need to have source code on the machine you’re working on.
Settings Sync Working on multiple devices? Settings Sync solves the annoying problem of not having your workspace set up available to you. With Settings Sync, you can take snippets, themes, file icons, key bindings, and extensions to wherever you need them with the help of GitHub Gists.
The best part of Settings Sync is that it is entirely free, open-source, and has over 2 million installs under its belt.
Auto Rename Tag Sponsored by TabNine, Auto Rename Tag was first launched on the Marketplace in 2016. It has since grown to over 6 million downloads and is extensively used by developers to help with the simple yet repetitively pesky task of renaming paired HTML/XML tags.
We’ve all been there – trying to hunt down tag pairs, especially when there are nests, {{double curlies}}, and logic conditions – only to throw our hands up in frustration because of how manual it is. Auto Rename Tag saves both time and developer sanity.
CSS Peek If you’re working in the frontend, CSS is an inescapable part of the workflow. As the project grows, so does your styling to match the requirements. CSS is linear by nature, which can be frustrating, especially if you want to check the styling without the need to scroll and traverse through all the different files to find what you’re after.
CSS Peek is a VS Code extension that lets you go to the CSS definition and symbol in the workspace with just a few simple clicks.
Code Runner Sometimes, you don’t need to run your entire project and only need a small snippet of it. This is where Code Runner comes in. This VS Code plugin supports a wide range of languages and can run highlight code either through predefined keyboard shortcuts or with the help of your mouse.
Sponsored by TabNine, this time-saving extension is enjoyed by developers and has been installed over 9 million times.
It comes with built-in Kubernetes syntax support and has five core features – validation, document outlining, auto-complete, over support to show descriptions if provided by the schema, and formatter.
Aesthetics Productivity Workflow
Material Icon Theme When you’ve just got files and folders, everything starts to look the same. As the project grows, you quickly lose the ability to scan your file structures visually. Material Icon Theme gives you back this power by installing visually appealing icons inspired by Google’s material design.
With an extensive set of folders and file icons, you can be sure that all your coding needs are visually categorized, making it easy for you to access what you need promptly.
Bracket Pair Colorizer Let’s be honest – we’ve all lost our brackets and braces at some point. It gets worse when you’re dealing with nesting and logical conditions. Bracket Pair Colorizer solves the problem of bracket pair hunting in our code by attaching different colors to each pair.
This means that if you have multiple brackets, it is easily color matched for our convenience and code productivity.
Peacock Sometimes, you need to have multiple instances of VS Code open. It might be that you’re working on multiple codebases simultaneously or need to switch between projects quickly without having to open and close them.
Through color, Peacock makes it easy to identify workspaces. All you have to do is open up a VS Code workspace, press F1 to open the command palette, type Peacock, and choose from the predefined colors for your editor.
Colorize The use of colors is a powerful productivity tool. When incorporated into your code, it can speed up your workflow. Colorize is created with CSS in mind and helps you instantly visualize CSS colors through colored background for css variables, preprocessor variables, hsl/hsla colors, cross browsers colors, exa, rgb, rgba, and argb.
It supports your standard CSS, SASS, LESS, post CSS, stylus, and XML.
vscode-icons If you like material design-inspired icons, then vscode-icons is also a good one to check out. With over 9 million installs, vscode-icons supports globalization and comes with the ability to customize with your icon packs, automatically detects your projects, and allows for custom configurations.
Icon Fonts Are you a user of Font Awesome in your projects? Or do you use Android Icons? Do you want to prototype without the need to keep referring back to the documentation quickly? Icon Fonts is a productivity work tool that incorporates auto-complete and IntelliSense for incorporating a wide range of icon fonts into your frontend’s HTML.
Live SASS Compiler SASS is a fantastic way to keep your CSS centralized and organized. However, it can also be a pain to deal with when you don’t have live reload. Live SASS Compiler makes it easy to see how your changes impact your visual output.
This VS Code extension compiles/transpile your SASS and SCSS files to CSS files in real-time with automated live reloading without the need to do anything extra.
Code, Versioning, and Collaboration
Live Server Live Server is one of the most installed VS Code extensions on the marketplace with over 15 million installations. Why? Because it lets you turn your VS Code editor into a fully functional IDE.
Features include launching local development servers with live reloading, incorporating shortcuts for starting and stopping servers, hotkey controls, remote connection, and Chrome debugging.
GitLens GitLens is hot on the popularity trail after Live Server with over 11 million installs and a near-perfect 5-star rating. GitLens is created to help developers quickly navigate and understand how their code is changed, edited, altered, and causing conflicts.
Sometimes, the process of dealing with git in the console can be overwhelming. GitLens reduces the mental load of trawling through git files in a console by moving them into our workspaces.
Git History Git History is a VS Code plugin extension that lets you look at the history and search for commits, messages, branches, files, and authors with ease. In addition to this, it lets you cherry-pick commits, compare files, soft and hard resets, revert, merge and rebase with a few simple clicks and commands.
Code Time Have you ever wondered how long you spend coding? Despite the shift to remote work, we can still be as easily distracted by life things like children, parcel deliveries, and even the dog – as we are when we’re sitting in an office through colleagues and impromptu meetings. Code Time keeps you accountable for your productivity by tracking your time and can help you segment which project you’re working on the most.
Features like “Enter Flow Mode” can help you protect your time and track development metrics to see your coding metrics as a statistical trend.
Polacode Want to share a code snippet? Want it to look professional? Polacode is a cool little plugin that lets you take ‘polaroids’ of your code without having to bust out the snipping tool. You highlight the code you want, and it will automatically create a formatted code file.
Docker Explorer Docker is a fantastic idea but keeping on top of all your images, hubs, and registries can be complicated. Docker Explorer makes it easier and directly connects to Azure Container Registry for live management.
Remote Development So you’ve got some code. Or perhaps you’ve got a container. Remote development lets you connect, develop and deploy environments. Developed and released by Microsoft, this plugin is in the active development phase and supports WSL, SSH, and containers connection for remote app development.
Formatting and Linting
Prettier Who doesn’t like pretty code? Prettier is your most popular formatting and linting tool that standardizes your code against industry conventions. It also ensures that your teams create visually seamless code in appearance – so no more arguments over how many tabs or spaces you should be using or where brackets should sit.
Beautify If you want to be a rebel, Beautify is your alternative to Prettier. With over 7 million installs, Beautify is another solid code ‘prettifier’ that lints and formats your code with minimal intervention.
TODO Highlight We’ve all got a working list of things to do in the code. We also often leave notes for ourselves and others in the form of comments. However, comments often fade and disappear into the background. TODO Highlight is a VS Code plugin that allows us to utilize the comments in our code for productivity reasons. It works by highlighting code annotations and color pairing them to the original to-do list.
Better Comments Need something more powerful than TODO Highlight? Better Comments takes it to the next level by allowing you to highlight your comments based on different types of annotations.
Supported types are alerts, queries, TODOs, and highlights. It is also extensible through the comment styling that you may need for other things.
Excel Viewer If you’re working with data, there’s a high chance that you’ll also encounter an excel spreadsheet in some form. Excel Viewer makes it easy to deal with excel data in your VS Code editor by formatting long and comma-separated strings into a tabled format. This can work wonders for your .csv, .tsv, and .tab extensions.
Markdownlint In a way, markdown is the new HTML. However, it can be cumbersome to deal with when your markdown misses a *, #, or space somewhere. markdownlint deals with formatting inconsistencies that come with writing markdown. It also helps you learn correct markdown by alerting you if you are violating markdown rules.
ESLint ESLint is a JavaScript code linter that finds and fixes problems in your JavaScript code. It is good for detecting problematic patterns that you might have in your code and helps you fix them to avoid inconsistencies and avoid bugs.
Debugging
Code Spell Checker We’ve all done it – we’ve all made a typo somewhere and spent precious minutes hunting them down. Code Spell Checker is a handy and widely used spell check that also works with camelCase code.
This VS Code plugin has helped over 3 million installed users catch spelling errors before they become problematic in the coding workflow.
JavaScript Debugger There are several JavaScript Debuggers in the Visual Studio Marketplace. A solid plugin extension to check out is JavaScript Debugger. This DAP-based JavaScript debugger can debug Node.js with processes displayed in the terminal.
Turbo Console Log Console logs can make or break your productivity. Turbo Console Log is an active plugin for VS Code that lets you select the variable for the subject of your debugging and automatically adds log messages to the nearest line relative. This lets you rapidly debug without writing any console.log code.
Regex Previewer Regex can be confusing sometimes. This is why Regex Previewer is such a handy extension plugin tool for your VS Code setup. It shows the regular expression match with a side-by-side window with real-time live-updating based on your regex.
Import Cost Importing modules can be costly. Import cost lets you see the size of the imported package – something that is usually hidden unless you go hunting for it. This can save you time in the present and the future by keeping you from developing code that is costly to run.
Task Explorer npm, grunt, sass, yarn, docker, and whatever else you need running can be done effectively and efficiently via Task Explorer. This VS Code plugin extends your sidebar and/or explorer with the ability to run tasks. So now, there’s no need to navigate away from your VS Code workspace to get things done.
Test Explorer UI Testing can be a manual process, if not a complicated one. TEST Explorer UI is an extension that provides developers with a UI for running their tests in Visual Studio Code. This plugin extension supports a myriad of languages and includes JavaScript, ABAP, C, C++, Exlir, Elm, Go, Haxe, Java, Python, Ruby, REST/GraphQL, and other popular languages and implementations.
Language-specific
Python The Python plugin for VS Code is a rich support that includes Pylance IntelliSense, linting, debugging, code navigation, code formatting, refactoring, and variable explorer.
This particular Python plugin extension also supports Jupyter Notebook with a quick start option to make your processes easy to access.
JavaScript Code Snippets In addition to JavaScript support, JavaScript Code Snippets also supports TypeScript, TypeScript React, Html, and Vue code snippets. All snippets come with a final ; semi-colon with a non semi-colon fork available here.
Snippets include class helpers, methods, and console methods for faster coding.
Quokka.js Quokka.js is an interesting productivity tool that lets you rapidly create JavaScript/TypeScript prototypes with the help of runtime values. So what exactly does Quokka do? It tells you how you’re making an error as you code. It is great for learning and testing through live execution and results.
Docker With over 11 million installations, Docker is the go-to plugin extension on Visual Studio Code for anything Docker-related. This extension lets you easily build, manage, and deploy containerized apps and provides single-click debugging. You can easily edit and generate docker files with Docker.
JavaScript is everywhere, and ES7, React, Redux & GraphQL Snippets cover almost everything you need to get started with modern app development efficiently. This plugin extension makes a great alternative to any other JavaScript-based code snippets that you might already be using.
Reactjs Code Snippets If you’re working on a React project, Reactjs Code Snippets can help improve your workflow and code speed by providing neatly packaged and pre-written templates for you to use. All you have to do is start typing the trigger commands, and you’ll get useful snippets.
HTML CSS Support What is modern app development without HTML and CSS? HTML CSS Support is your ultimate Intellisense for HTML and CSS in VS Code. Features include id and class attribute completion, linked and embedded stylesheets, inheritance, and CSS selectors validation.
You don’t have to download all the plugins to have a productive workspace. All you need is a few of the above in each category to get started and cut your coding time down by reducing the amount of code you manually type.
