16 VS Code Extensions for 10X developer experience

Yet another VS Code Extensions blog! :P

Being a major Typescript driven team, the choice for our Code Editor was quite obvious and it had to be VS Code, and with this comes a whole world of amazing extensions to improve developer productivity. So, below we share our experiences with the top 16 VS Code Extensions that our developers use and simply love the developer experience with them. The extensions that enable the code to adhere to our standards and guidelines are mandatory for all our developers and the others (mostly my favourites) are great additions to the developer toolset.

1. Bracket Pair Colorizer

This would be one extension common in all blog posts, and has to be, because of the amazing job it does to help developers survive in the bracket mayhem. Although this now has a successor Bracket Pair Colorizer 2, haven’t tried it yet, although their FAQ says about increased speed, honestly, this one itself seems to be sufficient

2. change-case

This has been an instant help tool at times when I’m lazy to rename variables, especially refactoring old code, with not so good naming. But this actually makes the renaming variables and entities very easy. All you need is select the entity, “Ctrl-Shift-P”, “Change case “, select the required one

I’ve mostly used to change variables to UPPER_CASE and PascalCase for constants. Once you get used to this, there’s no going back :)

3. Code Spell Checker

This spell checker for code is my most favourite extension and have been pushing everyone to start using this extension. I have been very particular about incorrect spellings and typos (even in comments, some devs hate me for this :P). It has wide support of words and the way it adapts to code, especially camelCase variables. You can also create a workspace dictionary with words that might be specific to your project or organization, or even update your local personal dictionary. I wish this had a simple command-line utility as well to put on our Jenkins server to ensure each Pull Request doesn’t have any typo (if you know an easy way to do this, please reach out)

4. ESLint

In one of the last post, I shared the ESLint journey that we started with a few months back which introduced this “must-have” extension for the team. This simply picks up the project’s ESLint configuration from the .eslintrc.json, the file that we add and provides real-time feedback with all the squiggly lines just like a traditional compiler and enabling the developer to know of code smells and violations of our guidelines during the coding process.

Leveraging the automatic fixing, this also adds support to the “Quick Fix” for fixing some trivial lint warnings and issues.

5. GitLens

With multiple Scrum teams working on a big enterprise product and multiple microservices, there are numerous times when we want to see the last change on the file, line leading us to the pull request and the exact JIRA ticket (from the branch name) and GitLens provides a great way to see all this right in VS Code.

You can see an overall git history, line-by-line changes and the timeline of the changes on a particular file. With a few clicks, you can easily go back in time to a specific commit if in case code breaks on a newer commit

6. Jira and BitBucket (Official)

We’ve been on the Atlassian Cloud for almost 2+ years, using JIRA for issue tracking, BitBucket for our code repository and Confluence for documentation. Having all these tools integrate within the developer’s code editor is a blessing. This provides instant access to JIRA issues and Bitbucket Pull Requests in VS Code itself

The best use case for me has been the Pull Request reviewing within VS Code. The default BitBucket Pull Request experience has not been up to the mark, have seen multiple issues almost every month where it shows an incorrect diff. With this extension, all the Pull Requests are within my VS Code and I can carry out the entire review process from the code editor itself. Starting from checking out the branch, to verifying the diff, commenting and creating tasks as code feedback. The commenting system is near perfect, as it supports tagging author and others. Adding links, emojis is kind of lacking, links work if you’re comfy with the Markdown syntax, emojis are not supported, but overall is a great addition

7. Live Share Extension Pack

Not quite sure if this extension has been out there for quite some time, but it probably gained popularity with the extensive Remote Work culture during the COVID-19 times. I wanted a good code collaboration utility for my Pair Programming sessions with my team and tried Hangouts (our usual meeting option), but the quality of screen sharing was not up to the mark, seeing and reading code on a screen sharing session is difficult. Even the Slack calls weren’t up to the mark and that’s when I found this (had been in “preview” for some time). There are still some initial hiccups in setting it up, installing the extension (specifically the audio extension)

This extension is actually a combination of 2 extensions: the actual Live Share utility and the Live Share Audio which adds audio call capabilities to the sharing session. It makes the pair programming really simple as it provides all VS Code features (even a few extensions support) to all the ones joined on the coding session. The quality of the audio call is near perfect and worked for us even on an unstable or a slow internet connection. This has now become our standard option for a Pair Programming session

8. Markdown All in One

All software and code need some documentation, and to have a standard format and version-controlled technical documentation, Markdown is the widely accepted standard across developers. Most of our developer guides and documentation are within the repository itself as .md files, making sure developers keep it updated within their code changes.

This extension provides nice Preview support and other Markdown syntax support within the code editor to enable devs to work on such docs. I generally use it in a two-column mode with the actual contents on the left, and the live preview on the right

9. PHP Debug

We started out as a PHP monolith application, back when we started out. Although the majority of the code has been moved to entirely Typescript, there still remains some major portions running on PHP. With legacy code, comes a whole new level of debugging and can never be entirely solved by just adding print or echo statements. For a smooth debugging experience, PHP Debug provides the ease of adding breakpoints and step-by-step execution of our PHP code invocations, helping devs to find out the root cause of the problem efficiently.

10. PHP Intelephense

Like mentioned, we still have some portions of the product coded in legacy PHP, to maintain these portions, ensuring our devs follow a set guideline and code formatting for the PHP code, we use the PHP Intelephense extension. This plays along well with VS Code’s “Format On Save” for PHP files and applies a standard PSR-12 formatting standard. These formatting checks are also validated in our CI checks to ensure these are not missed out by any dev, but mostly all that is needed is this extension be enabled

11. Prettier

With almost 10M downloads on the VS Code Marketplace (as of writing this post), this is by far the most popular formatting extension. Our entire JS/TS code is formatted with this ultra-awesome plugin. We have modified the configuration slightly to suit our needs (conf below, for anyone to refer). Like the PHP formatting, these are also under our CI checks using the prettier-cli. There is absolutely no match to the speed with which it formats and checks thousands of files

12. Project Manager

This has been the most recent addition to my personal extension arsenal. The major product is as a monorepo in our repository so, like 90% of the time, it’s just a single repository we work with. But with some recent side-projects and products, we’re creating new repositories for better management. Switching b/w these projects and opening multiple VS code windows becomes a pain when you have to do it often. Adding this extension and setting the repository paths as a one-time configuration, this provides a simple one-click switch b/w repositories and projects and without going to the directory and opening up multiple windows

13. Python

Python takes care of our Linux and non-windows security assessment scripting domain. To cater to the teams and devs working on this, this extension provides good support of the language within the same code editor experience. This is mainly used for formatting (using the Black formatter) and pylint for the obvious linting issues

14. Remote SSH

Having multiple dev and internal servers with just SSH access, it tends to get difficult when you have to do a slight change of code, observe and test changes. To also support remote development, when we need more compute than our laptops, this extension provides an exact replica of the coding environment over an SSH connection. The only drawback is you have to re-install any specific extension on the remote server, but once you do that, you get the same IDE environment like your local machine. With this, our remote development and tweaking code on internal servers has become a breeze!

15. TODO Highlight

Probably the simplest extension up here. It does one thing and very efficiently, as the name suggests, highlights any TODO in your code comments to specify some open item and proper attention is given to.

Clubbing this with the JIRA extension above, it provides a great shortcut to creating a JIRA ticket to track the TODO on your JIRA board which is pretty neat.

I have seen Better Comments doing somewhat the same thing and providing extra colours to other comments, but personally, a big bold highlight is all I need

16. YAML

We have been using YAML files for mainly three purposes quite extensively:

• docker-compose
• ansible automation
• configuration files for Linux assessment scripts

For just the above, this extension is a great addition to handle such .yml files. For ansible and docker-compose, it also has built-in IntelliSense and code completion which makes scripting these a simple task