Visual Code is a fantastic code editor, but what really makes it powerful are the extensions available for it. In this post, I share some of my favorite VS Code extensions while using VS Code to develop web applications.

  • WakaTime – Metrics, insights, and time tracking automatically generated from your programming activity.
  • GitLens – GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • REST Client – REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
  • Npm Intellisense – Visual Studio Code plugin that autocompletes npm modules in import statements.
  • Code Spell Checker – A basic spell checker that works well with camelCase code.The goal of this spell checker is to help with catching common spelling errors while keeping the number of false positives low.
  • Azure Storage – The Azure Storage extension for VS Code lets you deploy static websites and browse Azure Blob Containers, File Shares, Tables, and Queues. Follow this tutorial to deploy your web apps to Azure Storage from VS Code.
  • Night Owl – A VS Code theme for the night owls out there. Works well in the daytime, too, but this theme is fine-tuned for those of us who like to code late into the night.
  • Project Manager – It helps you to easily access your projects, no matter where they are located. Don’t miss that important projects anymore. You can define your own Favorite projects, or choose for auto-detect VSCode projects, GitMercurial and SVN repositories.
  • Todo Tree – This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
  • Turbo Console Log – This extension make debugging much easier by automating the operation of writing meaningful log messages.

Do you know of any cool and useful VS Code extensions? Please share them in the comments.

Happy Coding!

The other day I discovered this useful extension that allows you to run your code from within the Atom editor. The name of the extension is Script Runner, and while there are many other extensions that do this, I really like how this one shows the code results on the right side of your screen, allowing you to easily see your code and the result of it after running it side-by-side.

After discovering this tool my first thought was, can I find the same extension or similar for the VS Code editor? The answer is Yes. The best extension I found to run your code while in the editor is Code Runner, and while this extension shows you the results in the console window, it still displays the results in a clear way by only adding the result and the time it took to execute the code. Very useful tool!

Why are these tools useful? For starters, they allow you to see the result of your code right away, without the need of setting up a unit test, or anything else really. You still have to output your result by doing a console.log for example, but you don’t have to run it in a browser or anything like that.

Below is an example of a FizzBuzz program using Atom and Script Runner:

And below is the same code using VS Code and Code Runner

They are very similar and I will be using both, I really like how easy it is to run and see your code’s output right from the editor.

To download and install these extensions, just click on the links below, and happy coding!

Script Runner – extension for Atom editor

Code Runner – extension for Code editor