CodeSnap: Take Code Screenshots In VS Code
I’m a front-end developer and technical writer based in Germany. I currently use react - my favourite framework - and styled-components as my main tech stack on the job.
I like helping newbies grow to become the developers they want to be and land their desired tech jobs. One of the ways I do this is by hosting Twitter spaces (#NewbiesInTech) so that they can learn from experienced developers and be in the know.
I also like reading and sharing my knowledge in different ways (articles, tweets, code snippets etc). I'd keep this bio updated as often as I can.
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
Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on Mac) and search for
CodeSnap.Select the code you want to screenshot.
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.
