1
An Introduction to VS
Code
Peng Lian
2023-06-28
2
Table of contents
Overview
User Interface
The Editor
Source control
Work with Python
Acknowledgement
Questions?
Thanks for your attention!
4
Overview
5
What is VS Code
Visual Studio Code (VS Code) is a free and open-source code editor developed by Microsoft. It is available for Windows, macOS, and Linux.
VS Code is a powerful code editor that can be used for a variety of tasks, including:
Programming
Editing text
Debugging
Building and running applications
Extending with extensions
VS Code is a great choice for both beginners and experienced developers. In the Stack Overflow 2022 Developer Survey, VS Code was
ranked the most popular developer environment tool among 71,010 respondents, with 74.48% reporting that they use it.
Note: Visual Studio Code is a totally separate product from Visual Studio the IDE.
Source code: [Link]
Documentations: [Link]
6
VS Code on BioHPC
1. Go to [Link] –> Cloud Services –> Web Visualization
2. Open a terminal
3. module load vscode 1.66.1
4. code
8
User Interface
9
Basic layout
10
Side by side editing
Click the Split Editor button
Or Alt+Click on a file in the Explorer
Or drag and drop a tab
11
Minimap
12
Explorer
A high-level overview of the source code, which is useful for quick navigation and code
understanding.
13
Command Palette
The Command Palette provides access to many commands. You can execute editor
commands, open files, search for symbols, and see a quick outline of a file.
14
Preview mode
When you single-click or select a file in the Explorer, it is shown in a preview mode and
reuses an existing Tab. This is useful if you are quickly browsing files and don’t want every
visited file to have its own Tab. When you start editing the file or use double-click to open
the file from the Explorer, a new Tab is dedicated to that file.
Preview mode is indicated by italics in the Tab heading.
15
Selecting the Color Theme
Open the Color Theme picker:
File –> Preferences –> Theme –> Color Theme
Or Ctrl+K Ctrl+T
17
The Editor
18
Settings
Settings
File –> Preferences –> Settings
Or Ctrl+,
Global settings: ~/.config/Code/User/[Link]
Project settings: .vscode/[Link]
Settings Sync
File –> Preferences –> Settings Sync
Zen mode Zen Mode lets you focus on your code by hiding all UI except the editor, going
to full screen and centering the editor layout.
View –> Appearance –> Zen mode
Ctrl+K Z
Double Esc exits Zen Mode
19
Multiple selections
20
Find and replace
Ctrl+F ~ Find string in editor or find file in explorer
Enter or Shift+Enter to navigate
Ctrl+Shift+F ~ Find string across files
21
Folding and unfolding
22
Indentation & file encoding
VS Code analyzes your open file and determines the indentation used in the document.
The auto-detected indentation overrides your default indentation settings. The detected
setting is displayed on the right side of the Status Bar.
23
IntelliSense
IntelliSense is a general term for various code editing features including: code completion,
parameter info, quick info, and member lists. IntelliSense features are sometimes called
by other names such as “code completion”, “content assist”, and “code hinting.”
24
Snippets
Code snippets are templates that make it easier to enter repeating code patterns, such as
loops or conditional-statements.
In Visual Studio Code, snippets appear in IntelliSense Ctrl+Space mixed with other
suggestions, as well as in a dedicated snippet picker (Insert Snippet in the Command
Palette).
25
AI tools in VS Code
The GitHub Copilot extension is an AI pair programmer tool that helps you write code
faster and smarter. You can use the Copilot extension in VS Code to generate code, learn
from the code it generates, and even configure your editor.
27
Source control
28
Using Git in VS Code
Visual Studio Code has integrated source control management (SCM) and includes Git
support out-of-the-box. Many other source control providers are available through
extensions.
Git documentations:
Cheat Sheet
Git-SCM website
Manual
Book
Videos
Note: make sure you have Git installed on your computer.
29
Open folder or clone repo locally
30
Initialize the local repo
31
Create new files
32
Stage changes & commit
33
Stage changes & commit
34
Add remote
Add remote name
35
Add remote URL and confirm
Add remote URL
Confirm add remote
36
Push/Sync chnages
Push branch to remote Sync changes
37
Working with branch
Add a branch name Fetch branch
Create branch
Switch branch
38
Add changes and commit to devel
39
Compare branches
40
File differences
41
Merge branches
Note: Switch to the targe branch before starting to merge
42
Select a branch to merge from
43
Publish merged branch
45
Work with Python
46
Prerequisites
Python 3
VS Code Python extension
Jupyter extension (optional)
47
Create a virtual environment
Command Palette (Ctrl+Shift+P) –> Python: Create Environment
48
Select a interpreter
Command Palette (Ctrl+Shift+P) –> Python: Select Interpreter
49
Create debugging configuration
50
Debugging
51
Jupyter in VS Code
52
Acknowledgement
Thank all BioHPC team members for their support.
Please acknowledge our contribution by adding the following sentence to your paper:
This research was supported in part by the computational resources provided by
the BioHPC supercomputing facility located in the Lyda Hill Department of
Bioinformatics, UT Southwestern Medical Center.
53
Questions?
54
Thanks for your
attention!
