How to take beautiful code screenshots using codeSnap in Visual Studio Code

Hi everyone. Have you always wondered how to take beautiful screenshots that captures your audience attention on visual studio code? Worry no more, on this blog I am going to show you step by step how to do it!

Download and install visual studio code

I have used other code editors like sublime text editor, atom and brackets but visual studio code stands out among the best free code editors to have ever used. Visual studio is an editor that can literary do anything with the right configuration. On of the greatest powers of visual studio code is it's extensive rage of extensions that are just available through the click of a button. Long story short click on this link to open the visual studio code home page select the right editor depending on your operating system, for my case I am using ubuntu and thus I will download the debian version.

Install codeSnap

After downloading visual studio code open it and install, after the installation is complete navigate to the left panel and click the extension tab to open a search field where one can search and install a package. In the search field search for codeSnap download and install. You can learn more about codesnap here.

Open any file of code in visual studio and highlight any part of code that you want to screenshoot, for me I want to screenshoot all the code in the file called index.js.

From the above picture I have highlighted my code and now I am ready to take a screenshoot.

Take a screenshoot

Having highlighted your code it's now time to take a screenshoot. click on the F1 button which opens the command palette and search for codeSnap click the shutter button and you will have you screenshoot ready. You will get a prompt window asking you where you would like to save you screenshoot picture. Here is mine.

Thank you for reading this blog up to the end. I am Peter a software developer. I use this blog to share daily dev hacks and tutorials. Until next time bye.