Setting Up a Development Environment
An introduction to Visual Studio Code
Hello everyone, Welcome to this workshop which aims to support you to get familiar with coding environments and
setup your personal environment for development of codes. This workshop is built for people who are fairly familiar with coding
but would like to improve their knowledge about the tools and processes that improves their productivity.
My name is Shayan Fahimi. I am a PhD student in structural engineering. I used programming during the last ten years, for university projects and industry but never
had a software developer role. Thus, in this workshop, I mainly focus on the points that you need to get the job done and build a robust tool for developing, maintaining, and testing your
programming projects.
Land Acknowledgement
UBC Vancouver is located on the traditional, ancestral, and unceded territory of the xʷməθkʷəy̓əm (Musqueam), səl̓ilwətaɁɬ təməxʷ (Tsleil-Waututh), Stz’uminus, S’ólh Téméxw (Stó:lō), Skwxwú7mesh-ulh Temíx̱w (Squamish), and Coast Salish peoples.
Please take a moment to explore native-land.ca
But before going into more details I would like to begin by acknowledging that I am fortunate to present this workshop in Burnaby which is the unceded territory of the Coast Salish People.
Please take a moment to explore this website and use the chat to share where you are coming from.
Outline
What is a Development Environment?
Editors
Visual Studio Code
Terminal
Source Control
Remote Machines
This workshop starts by introducing the concept of development environment.
Then, we talk about code editors and among those, we choose VSCode to dive deeper
and learn about their abilities.
After that, we talk also about terminal, source control, virtualization, and community.
The later sections are also guides to use other workshops presented by the
UBC library commons.
What is a Development Environment?
Coding can be as simple as opening a notepad file and typing the commands. However, it is not a convenient solution for many even professional developers. Integrated Development Environments (IDEs) are created to make the process easier by combining a set of tools to write, compile, debug, and test the codes in a single environment. While these tools make life much easier, they can be very complicated.
Ask them what is a development environment and if they have any installed on their machine right now
Turbo Pascal was probably the first programming language that shipped with a floppy disk containing a custom text editor, a compiler, and all the functionality that was needed to produce executable programs. With more memory, coding was
both an issue of text and visual representation. Visual Basic arrived in 1991 as the first IDE. It was followed by Delphi, a Pascal-based IDE, where programmers could design and code as well as debug and test in one program.
IDE helped lower the bar to entry to programming with their relatively easy-to-use setup. The first language-agnostic IDEs on the market, Visual Studio, arrived in 1997. Right now, Microsoft’s Visual Studio continues to dominate the field,
closely followed by the open source Eclipse Foundation and Google’s Android Studio in a distant third. After that, however, is a long tail of smaller and smaller IDEs.
What is a Development Environment?
Code editor
Command line interface (CLI)
Version control system
Package manager
Development environments have four main components:
The actual makeup of an IDE depends on the programming language, type of projects, and your needs, but there are some things that are common among a lot of IDEs, such as:
code editor is a simple text editor program designed for editing source codes on your machines.
A command line interface processes commands to a computer program in the form of lines of text. The lines of texts are interpreted by this program and then sent for execution. Windows command prompt and linux terminal are two examples.
Like programming languages, we have command line languages, such as bash or zsh, which are also called shell in Unix.
A version control system is responsible for managing changes to a computer programs, documents, or generally collections of information. Git and Subversion are two main free version control systems used by developers right now.
and a package manager or package management system automates the process of installing, upgrading, configuring and removing programs from your machine. Windows has a package manager, some linux distributions has a package manager called apt, python has a package manager called pip
and some development environment has exclusive package managers such as conda.
What is a Development Environment?
Editors
syntax highlighting
syntax checking
code completion
automatic code formatting
powerful text manipulation and scrolling tools
Code editors provide tools to create, edit, and save plain text files. Compared to word processors, they lack the tools for formatting the text. On top of that, most code editors offer additional features, such as:
syntax highlighting, which displays text, especially source code, in different colors and fonts. This feature helps you to quickly differentiate logical expression from function definitions and so on.
Syntax checking highlights the errors and sometimes irregular programming styles to improve the functionality and quality of your code.
Code completion is useful for quickly writing an script or function without fully typing all the lines. It also helps with writing the variable or function names and reduces spelling errors.
Automatic code formatting is an advanced tool that formats your code to follow the accepted style and format. It facilitates collaboration and maintanenace of your code.
and finally you will find advanced text manipulation and scrolling which accelerates search and replace tasks or when you want to add or delete a certain character in multiple lines.
Editors
Vim
https://en.wikipedia.org/wiki/File:Vim-(logiciel)-console.png
Vi editor was developed starting around 1976 by Bill Joy, who was then a graduate student at the University of California at Berkeley. Joy later went on to help found Sun Microsystems and became its
Chief Scientist. Later, in 1991, Vim, short for Vi Improved, was developed.
Editors
GNU Emacs
https://en.wikipedia.org/wiki/File:Emacs27_showing_Org,_Magit,_and_Dired_with_the_modus-operandi_theme.png
Emacs is the most popular version of a family of text editors, called EMACS for Editor MACros, created by Richard Stallman for the GNU Project.
It is one of the first free and open source software projects. Vim and Emacs are the oldest text editors that still have a strong user base. While both of these text editors are command-line software and have a steep learning curve,
they are fully programmable and customizable, making them the choice of professional users.
Emacs and Vim are built before many conventions, like using modifier key with `Z`, `X`, `C`, and `V` for undo, cut, copy, and paste, and use their own terminology.
Editors
Nano
https://www.nano-editor.org/
If you are looking for a user-friendly text editor in the terminal, Nano, available on unix-like systems, is a good option.
Editors
TextMate
https://macromates.com/
TextMate is another influential text editor, released in 2004 for MacOS. The features presented in TextMate became staples in every popular text editor that followed.
Editors
Sublime Text
https://www.sublimetext.com/
In 2008, Sublime Text is released in 2008 and popularized the minimap and multiple cursors. It is also cross-platform, running on Linux, MacOS, and Windows. The biggest impact of Sublime Text was expanding the capabilities of extensions and allowing more sophisticated integration of extensions with graphical components with the text editor. It is reported as the most popular text editor available on MAc from 2015 to 2017.
Editors
Atom
https://atom.io/
Atom is called the "hackable text editor for the 21st Century" and is developed by GitHub, thus offering easy built-in integration with Git and GitHub. Atom offers a built-in package manager and popularized the convention of using animated GIFs to illustrate functionality. It is fast, small, and open-source, supports all platforms, and provides a marketplace for extensions.
Computational Notebooks
https://starfishmedical.com/blog/using-the-jupyter-notebook-for-product-prototyping/
You can also find options that are not code editors, but are great for writing codes and trying different methods quickly and easily.
A computational notebooks is a virtual environment used for writing programs that matches more closely with the way humans think. Now, there are computational notebooks and computing resources available online for free.
Jupyter notebooks are virtual environments and were first built for Python development, as a learning tools accessible as a web application.
They provide an easy-to-use and interactive environment and are currently available across various programming languages. They support Markdown, allowing you to add comments and reports to the code. You can export the code or the report later. While they are a good choice for testing ideas or developing small projects, they are not suitable for building biggger projects.
Google Colaboratory is a free and online tool built by Google that offers free CPU and GPU and specialized for learning machine learning and developing ML projects. It is a great choice for beginners to learn Python development or run small projects and access them on all their devices.
Visual Studio Code
Visual Studio Code is a simple text editor with some powerful IDE-like features. It is a separate product from Visual Studio, Microsoft's full-featured and well-known IDE.
While VS Code is only a couple of hundred megabytes and is free, Visual Studio is at least several Gigabytes and it is not free. VS Code is also open-source and is easy to customize.
You can quickly set keybindings and syntax highlightings based on the programming language you are using and your experience. Moreover, it has a built-in file explorer,
source control, terminal, remote explorer, and supports extensions that add greats capabilities.
User Interface
Editor - the main area to edit your files. You can open many editors and arrange them side by side.
Activity Bar - lets you switch between the tools availables on the far left-hand side and gives context-specific information, such as the number of outgoing changes when Git is enabled.
Side Bar - contains different views that can be toggled using the icons in the Activity Bar.
Status Bar - shows information about the open file in the editor, like number of lines and programming language
Panels - different panels are located below the editor region to show debugging information or an integrated terminal.
Keyboard Shortcuts
Like any other code editor, Visual Studio Code has an extensive number of shortcuts which are editable using Keyboard Shortcut editor.
You can find a list of them in File > Preferences > Keyboard Shortcuts. You can also find a condensed PDF version here or by clicking Help > Keyboard Shortcut Reference
Ctrl + Shift + P - shows the command palette that contains recently used commands and a search box for finding the right command.
Ctrl + P - Quickly open files
Alt + Click - insert a second curser where you clicked
Ctrl + Alt + up/down arrow or dragging - insert a second curser above or below (Multi-curser selection is an efficient way to modify multiple lines simoultaneously. )
Ctrl + Shift + L - select all occurrences of current selection
Ctrl + D selects the next occurance
Ctrl + Space - triger code completion suggestion
F5 - Start/Continue debugging
Shift + F5 - Stop debugging
F9 - Toggle breakpoint
Ctrl+` - Show integrted terminal
Exercise 1
Multiple Cursers
Themes
You can modify the colours in VS Code user interface by colour themes. Open the colour Theme picker with File > Preferences > Workbench > Appearance > colour Theme. You can preview the colours of the theme using the curser keys and select the theme you want and press Enter.
You can also find colour themes in VS Code Extension Marketplace developed by the community. The colour themes can be customized both in the Appearance section. Use the keyboard shortcut Ctrl + K + T to display the theme picker and select the theme you want by pressting Enter.
If you like to customize your theme, Look at Customizing a color theme
Settings
User Settings
Workspace Settings
User Settings apply globally to any instance of VS Code while Workspace Settings are stored inside your workspace and override user settings when the workspace is opened.
Add a ruler
Extensions
GitLens adds more functionality to the built-in Git capabilities of VS Code and allows you to see who, why, and how lines of code have changed over time.
Code Runner is an extension that enables you to run snippets of code or code files written in a variety of languages right in Visual Studio Code.
If you use Markdown or LaTeX in VS Code to write your articles, linking Grammarly can help you to easily check spelling and grammars. While the extension is not officially supported and has some issues, it is the best option available right now.
IntelliSense is a general term for various code editing features including: code completion, parameter info, quick info, and member lists. Microsoft and VS Code community are developing and maintaining IntellSense extensions for almost all languages and you can find them by searching in the marketplace.
Formatting and Linting
Linting is the process of checking the code for syntactical and stylistic errors. The extension you installed also uses a linter, PyLint, that highlights problems in your source code. For example, it detects uninitialized or undefined variables, calls to undefined functions, missing parantheses, using unimported libraries and much more.
Formatting helps people to read the code easier by applying rules and conventions for line spacing, indents, spacing around operators and much more. The changes applied to the code by formatting does not change the functionality of the code. Formatters also known as beautifiers or indenters.
Run, Debug, and Test
VS Code has built-in debugging support for langauges that gets transpiled to JavaScript. For other languages, there are Debugger extensions in the VS Code Marketplace.
Select the Run icon in the Activity Bar on the side of VS Code to bring up the Run view. This tab displays all information related to running and debugging. You can insert Breakpoints or Logpoints and Run and Debug the code by pressing F5 or Run and Debug.
Unit testing is a software testing method in which you test specific pieces of code, also known as units, automatically and with a full range of different inputs, including boundary and edge cases. Unit tests are concerned only with the inputs and outputs of a unit, not with its implementation. To thoroughly test a function, you want to throw every conceivable input at it. For each input, you define the function’s expected return value.
Terminal
Windows shell
Command Prompt
Powershell
Unix shell
The terminal or command-line interface (CLI) is an interface in which you can type and execute text based commands. Terminals also might be called console, shell, command line, or command prompt. Different operating systems provide shells for executing commands and remote applications.
The terminal is shown at the bottom of the screen and the terminal tabs view is on the right side of the terminal view. Each terminal has its own name. You can open WSL, Windows Powershell, or any other available terminal on your OS by choosing it from the list.
Source Control
Download Git
Introduction to Git and GitHub
from https://www.youtube.com/watch?v=gLWSJXBbJuE
Visual Studio Code has integrated source control management and support Git. You can also install other source control providers through VS Code Extension Marketplace.
The source control icon on the Activity Bar indicates an overview of the changes in the current repository. You can also open it using Ctrl + Shift + G shortcut. If you do not have a repository, you should create one first. The Introduction to Git and GitHub workshop covers the basics of Git and how to sync your local repository with GitHub.
In VS Code, you can stage and commit changes using the graphical user interface or by the terminal. Lets look at an example:
Remote Machines
Remote Developer Extension
Remote Development is a VS Code extension developed by Microsoft that lets you open any folder in a container, a remote machine, or in WSL and use all features of VS Code to edit files in that directory. This greatly simplify development and troubleshooting. You can use all VS Code tools and the graphical user interface with SSH.
The source control icon on the Activity Bar indicates an overview of the changes in the current repository. You can also open it using Ctrl + Shift + G shortcut. If you do not have a repository, you should create one first. The Introduction to Git and GitHub workshop covers the basics of Git and how to sync your local repository with GitHub.
In VS Code, you can stage and commit changes using the graphical user interface or by the terminal. Lets look at an example:
More from the Research Commons at (UBC-V)
And from the Center for Scholarly Communication (UBC-O)
-console.png){kind=link}
