DEV Community

Cover image for CodeSnap: Take Code Screenshots In VS Code
John ✨️
John ✨️

Posted on • Updated on • Originally published at


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 a extension thath allows you to take screenshots of your in VS Code. You can install it by from the marketplace.


  • Save screenshots of your code
  • Copy screenshots to your clipboard
  • Show line numbers
  • Shots with or without the container
  • Shutter action to save or copy to clipboard
  • Change the background color 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'd like to screenshot.
  3. Click the shutter button to save the screenshot to your disk.

Taking a Shot

Sample Shot

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.

Top comments (0)