Screenshot your Code in VS Code

Do you find yourself needing to share your code, whether it's a screenshot or putting it into some read me or some kind of documentation, maybe sending it to a teammate over Slack or Teams. If you're like me, you do those things a lot. And that's what we're gonna solve with today's Versus Code extension. Hello, my name is Michael Jolley and I'm the Bold Bearded Builder. Let's talk about Versus Code Extensions.

If you're new here, we release these videos usually a couple of times a week, highlighting a new extension that is very useful to me and hopefully will be to you. And if you're interested, be sure to check us out on Twitch. We stream there three days a week at two Eastern. You can find us at twitch. Tvbaldbeardedbuilder.

Now let's get into today's extension. Today's extension is CodeSnap. It's a quick way to take screenshots of all of your code and customize it, make it look great for you to include in documentation, read me's, GitHub issues and pull requests, all those sorts of things. And it has a lot of configuration options that allow you to really dial in the look and feel like you want it to be. How do we install it?

So as always, I've left a link in the description that you can check out and read more about it, find out all the things it can do. But as always, the easiest way to install it is to click that extensions icon in Versus Code, search for CodeSnap and then press the install button.

Okay, so how do I use it? Well, let's open a file with some code and then make a selection and right click on that selection of code. In the context menu is a new option called CodeSnap. That will open a new window with that code you selected looking styled and pretty for you to copy or save. Now, the nice thing about that view is it's what I call a live view.

So if we change our selection in our code, it also is updating that image in real time before you take the picture of it. Once you've got the code styled and selected just like you want, press the little code snap icon and that'll take the picture and allow you to save it anywhere you want. Another way to use it is with the command palette. You could command or control P to open that up, search for code snap and press that. We don't have to just save the image.

We could just copy and paste it. So in that code snap pane, where it's showing your formatted code, just control or command C to copy that to the clipboard. Then you can paste it anywhere you need. One of the nice things about this extension is that when it's formatting that code and styling it, it uses your current Versus Code theme to determine what the color palette should be. So you can always change your color theme to make it look different.

It's up to you and luckily the extension just follows those rules. Now with the theme controlling the color palette, there are some other settings you're gonna wanna maybe massage.

You can do that from the command palette. Go there, search for CodeSnap. You'll see all the options that are available to you. Things like removing the title bar, the command buttons, maybe showing or hiding line numbers or even showing the line numbers as they are in the file. All those settings can be controlled there.

And when you take a new code snap, it'll respect those settings. There is an important note for Linux users. If you're using this, then you need to install Xclip first. So you can sudo apt get Xclip or whatever your platform needs, but it is a requirement on Linux. What kind of things could you use CodeSnap for?

I use it to send code snippets to my teammates in Slack or save into a blog, but there are plenty of use cases. I'm curious as to how you're using it or how you might think you could. Listen, if you enjoyed this video, be sure to hit like below. And if you enjoy content like this and wanna see more, be sure to hit subscribe and hit that bell to know when we release a new video. Until next time.