How To Open Source Code Explorer In Visual Studio

Open Source Code Explorer is a Visual Studio extension that opens your favorite code repositories and helps you get to the files and code you are working with, fast! Built for keeping up with GitHub and Bitbucket projects, but integratable with any Git repositories.

When developing an application, it is helpful to look at and study code that is related to the software product you are building. The files we use for this purpose are .cs and .vb files, which are located in project folders by default. Visual Studio provides detailed information about these files. Another technique is to use the Source Code Explorer feature. You can view the source code of a selected file in a separate window displayed within Visual Studio, or even edit it directly in that window. Using this technique is useful not only for viewing the source code but also for quickly navigating through it and editing it as if you were working in text editor like Notepad.  

What are ‘text editors’?

Text editors, also called code editors, are applications used by developers to write code. They can highlight and format your code so that it’s easier to read and understand. If you’ve used Codecademy, you’re already familiar with a text editor. It’s the area you write your code in.

Using a text editor is part of creating your “development environment,” the set of tools that you use for working on coding projects. It will allow you to take what you’ve learned on Codecademy and put it into practice as you work on projects on your computer. Not only will this introduce you to tools that are commonly used by professional developers but it also means that you’ve grown as a developer and are ready to start working on your own—great work!

Specific to writing code, text editors provide a number of advantages:

  • Language-specific syntax highlighting
  • Automatic code indentation
  • Color schemes to suit your preferences and make code easier to read
  • Plug-ins, or add-on programs, to catch errors in code
  • A tree view, or visual representation, of a project’s folders and files, so you can conveniently navigate your project
  • Key shortcuts, or combinations, for faster development

You may also have read or heard about IDEs, or “integrated development editors.” An IDE allows you to not only edit, but also compile, and debug your code through one application or interface. While the text editor we recommend isn’t considered an IDE, it has many IDE-like features that make life as a developer easier without needing a lot of resources that an IDE usually requires. The best of both worlds!

Keyboard Shortcuts

For almost everything that you do in VS Code, you can do it directly from the keyboard. You can map all activities in VS Code, whether they’re built-in or provided via extensions, to a keyboard shortcut.

A small subset of built-in commands is already mapped in Keyboard Shortcuts. If you want to learn these default shortcuts, print out the PDF for WindowsmacOS, or Linux and pin it next to your monitor.

As a Python developer, a lot of the commands you’ll use in Visual Studio Code are provided from extensions, similar to the Python extension that you already installed. These don’t come with shortcuts mapped by default, but you can configure them using VS Code’s Keyboard Shortcuts editor.

Using the Keyboard Shortcuts Editor

Open the Keyboard Shortcuts editor by going to File → Preferences → Keyboard Shortcuts or Code → Preferences → Keyboard Shortcuts on macOS:

VS Code Keyboard Shortcut Window

In this editor, you can see a list of all the existing shortcuts along with their details:

  • Command: The command or action to be run
  • Keybinding: The sequence of keys to press to trigger this command, with a blank indicating that there’s no mapping
  • When: Conditions that need to be met for this keybinding to work, with a minus sign (-) indicating that there are no requirements
  • Source: Where this binding was configured, either defined by DefaultUser, or Extension, the last one indicating that you provided it by installing a keymap extension

To override an existing binding, right-click on the existing action and click Change Keybinding. To assign a keybinding to a command that has no binding, double-click on it. If the key sequence you press is already assigned to something else, VS Code will warn you with a link to see which commands are mapped to this keybinding.

As an example, type python create terminal in the search box at the top. If no results come up, make sure you have the Python extension installed. Press Enter to assign a keybinding, like Ctrl+Alt+T, and then hit Enter again.

To assign that shortcut to only work when you’re editing Python code, right-click on the shortcut and select Change When Expression. Enter the expression editorLangId == 'python':

Assigned keyboard shortcut

There are more conditional operators to choose from if you need something more specific. Here are some examples to get you started:

  • Use resourceFilename == '__init__.py' when the file you’re editing is __init__.py
  • Use editorLangId == 'python' when working with Python. If needed, you can also replace 'python' with another language identifier.
  • Use editorHasSelection for when you’re inside the editor.

Once you’ve configured this extension, open up a Python file in the editor to try it out by pressing your newly assigned keyboard shortcut Ctrl+Alt+T to open up a Python termina

Installing Visual Studio Code

So, we’ve chosen our text editor, now we just need to install it on our computer!

Video Instructions

For the visual learners, this video details how to download and install Visual Studio Code. Written instructions are below.https://www.youtube.com/embed/Do0tl_u0WZk

Installation Steps

The installation process for computers running macOS, Windows, and Linux, (specifically Ubuntu and Debian), will be very similar and using Visual Studio Code across all of them will be the same.

  1. Visit the Visual Studio Code website to download the latest version of Visual Studio Code.
  2. You should see your computer’s operating system displayed, but if it’s not correct, click on the down arrow and find the option that matches your operating system from the drop down menu and click on the down arrow icon under “Stable.”Windows users: This will download the latest version of Visual Studio Code as an .exe file.Mac users: This will download the latest version of Visual Studio Code for Mac as a .zip file.Linux users: .deb and .rpm are different file types for storing data. We suggest you download the .deb file so auto-updates work as the Visual Studio Code documentation suggests.
  3. Once the Visual Studio Code file is finished downloading, we need to install it. Find the Visual Studio Code file in your file manager, the program that lets you see the files and folders on your computer.Windows users: Open the .exe file by clicking on it and on run the installer. Keep clicking ‘Next’ and then finally ‘Finish.’Mac users: The downloaded .zip file should be in your ‘Downloads’ folder. Open the file. If you see this message choose “Open.”Linux users: The downloaded file should be in your ‘Downloads’ folder.Find it in your file manager, double click and choose ‘Install’ in the GUI software center, or run the following commands, one at a time, in the terminal:sudo dpkg -i downloaded_filename.deb sudo apt-get install -f
  4. Make sure you have your Visual Studio Code application saved in a place you know you will easily be able to find it.Windows users: It will automatically be placed in your Start menu.Mac users: Click and drag the Visual Studio Code icon from the Downloads folder to the Applications folder.Linux users: It should appear in your task bar of programs.

That’s it, you’ve successfully installed your text editor and are ready to start coding!

What are ‘development folders’?

Before using your text editor, it’s important to establish an organized file system. As the number and size of your projects grow, it becomes increasingly important to know where to save new projects and find old projects.

Most developers store their projects in an easy-to-find directory, (what you might be used to calling a ‘folder’). Here at Codecademy, we recommend naming this directory projects. It will store all of your coding projects. Whenever you create a new project, no matter how small, you should always make a new folder inside your projects directory. You will find that single-file projects can quickly turn into large, multi-folder projects.

Using Split Screens

Python’s style guide, PEP 8, leans toward short line lengths. For wide screens, this leaves a lot of unused screen space.

When you find yourself needing to switch between two or more files, use the split panel functionality to show many editor regions at once. You can access this functionality through the Command Palette with the command View: Split Editor.

Alternatively, you can use the associated keyboard shortcut:

  • macOS: Cmd+\
  • Windows or Linux: Ctrl+\

You can also open the split editor functionality by going to View → Editor Layout or by right-clicking on a file’s tab:

VS Code splitting a panel

This setup is really useful when writing unit tests with your test code on the left and the module you’re testing on the right.

Some file types, like Markdown, have a preview region that you can use instead. Use the Markdown: Open Preview to the Side command to open the preview editor.

Conclusion

First you need to start the Installed Solutions Tab on Visual Studio. Then select Add a New Solution. Then Search for Open Source Explorer that ends with .vsix extension click install with default setting or change it depend or your needs after that click OK to finish the step

0 Comments

No Comment.