Take a screenshot in Visual Studio Code (VS Code)

Kazi Mushfiqur Rahman
3 min readJul 31, 2023

--

Photo by Rubaitul Azad on Unsplash

To take a screen short in VS Code follow the steps below:

Open VS Code

Click on ‘extension’ button from the left side bar and write ‘code snapshot’ in search box, then press ‘Enter’ button, as a result you will get the interface

From here, click on ‘Install’ button to install code snapshot. It will redirect you to the following page

Now, the installation of code snapshot is successful.

Open a file on vs code as shown below

To open code snapshot press ‘Ctrl + Shift + p’, then you will get the below screen

Select the code in Python file, then code snapshot will capture it automatically as shown below

To save the screen short click on the button at the bottom of the below page

Then it wants the location wherein it will be saved. From the below screen select the location and click on ‘save’ button

Now the screen shot is saved in the following location

Why we need to take screenshot from Visual Studio Code?

Taking a screenshot from Visual Studio Code (VS Code) can be useful for various reasons, including:

  1. Sharing Code or Errors: When you encounter an issue or error while coding, taking a screenshot allows you to easily share the problem with others, such as on forums, social media, or with colleagues, making it easier for them to understand the context and provide assistance.
  2. Documentation and Tutorials: Screenshots can be used to create documentation or tutorials to explain a coding process, demonstrate a feature, or showcase a specific configuration. Visual aids can make the explanation more accessible and understandable.
  3. Bug Reporting: If you find a bug in VS Code itself or in any of its extensions, taking a screenshot of the problem can help developers or support teams understand the issue better and potentially assist in resolving it.
  4. Code Reviews: When conducting code reviews, you may want to provide feedback with reference to specific code snippets or UI elements. Screenshots can capture the relevant parts of the code or interface for discussion.
  5. Personal Record Keeping: You might want to keep a personal record of your coding progress, interesting code snippets, or particular configurations in case you need to refer back to them in the future.
  6. Sharing Visual Design: If you are working on web development or UI/UX design, you might want to share your visual design with others for feedback or collaboration.

To take a screenshot in Visual Studio Code, you can use built-in tools in your operating system (e.g., Snipping Tool on Windows, Shift+Command+4 on macOS) or use extensions available in the VS Code marketplace that add additional screenshot capabilities.

--

--

Kazi Mushfiqur Rahman

B.Sc. In CSE, Software Engineer, Techneous | Python | Django | DRF | Computer Vision | OpenVINO - AI Framework | JS | Ajax | Devops | Technical writter