The success of VS Code and its quickly adoption by the developer community is not only due to the fact that it’s a very competent editor with useful tools out of the box, but to the vibrant community of users creating multiple useful to work better with it. Let’s go through five hand picked VS Code extensions to improve our workflow speed and efficiency.
REST Client
https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame
After switching to VS Code from PhpStorm, the first thing I missed was the integrated REST client that PhpStorm had where you could write requests in plain text. Fortunately, this extension allows you to do REST API requests right from a VS Code editor and get the response. You simply have to start a blank file, add the request there, change its language to “http” and you’ll get a button at the top of the file saying SEND REQUEST that you’ll click to send the REST API request from within VS Code.
Integrated Git blame
https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame
This extension allows you to view who committed what on each line of your editor. While the Git Lens extension is more ubiquitous, I prefer Git Blame because I don’t like to have the commit messages, even if they’re faded, mixed with my code like Git Lens does. This extension will display the committer at the status bar in the bottom, and when you click on it, it will display the commit message with a link to jump to the commit on GitHub. Here’s my own screenshot showing the link:
Bracket pair colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
It’s easy to get lost in code trying to figure out which bracket matches which. This extension will display each bracket level on a different color and will even draw a line from the opening bracket to the closing one so you’re always aware of the context you’re working on.
Babel JavaScript syntax highlight
https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
This extension will not only highlight ES6 or ES7 features, but will also correctly highlight React code, GraphQL syntax and even CSS in JS in the StyledComponents fashion.
VS Code color theme
https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark
Aren’t color schemes for the editor that perfectly suit our taste hard to find? Once we find one we won’t let it go until a better one shows up. The color scheme I’m currently using and finding very nice is this one, Atom One Dark, and goes well with the Seti icon theme included in VS Code.
Your turn
Any extension you love and want to publicly express it? Know of one similar to those showcased here? Perhaps one you developed? Let me know in the comments!
