CodeSnap: Take Code Screenshots In VS Code

CodeSnap: Take Code Screenshots In VS Code

There are a number of reasons why you might want to make code screenshots: it could be for the purpose of learning, reviewing code, sharing your knowledge or documentation. Whatever your specific use case may be, this VS Code extension allows you to create screenshots of code in the IDE.

CodeSnap In VS Code

CodeSnap is an extension that allows you to take screenshots of your in VS Code. You can install it from the marketplace.

Features

  • Save screenshots of your code

  • Copy screenshots to your clipboard

  • Show line numbers

  • Take shots with or without the container

  • Shutter action to save or copy to the clipboard

  • Change the background colour and many more

Take a Shot in 3 Steps

  1. Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on Mac) and search for CodeSnap.

  2. Select the code you want to screenshot.

  3. Click the shutter button to save the screenshot to your disk.

Sample Shot

Final Thoughts

I usually generate my code screenshots from a web application but being able to do it directly in VS Code increased my productivity: I don't have to copy and paste code and switch windows.

I hope this article is helpful and you learned something from it. Being a technical writer and content creator I am passionate about sharing my knowledge (including tips and advice) and helping other people achieve their goals, especially those just starting out in tech. You can connect with me on my social media profiles and blogs here.