install-vscode.Rmd

---
title: "Visual Studio Code Installation Guide"
subtitle: "A Step-by-step guide for VS Code installation and configuration."
fontsize: 12pt
output:
  html_document:
    df_print: paged
    toc: yes
    toc_depth: 3
    highlight: pygments
    includes:
      in_header:
        - copy-code.html
        - GA_Script.html
      after_body: comment.html
  # pdf_document:
  #   toc: yes
  #   toc_depth: 3
  # word_document:
  #   toc: yes
  #   toc_depth: '3'
header-includes:
- \usepackage{fancyhdr}
- \pagestyle{fancy}
- \renewcommand{\footrulewidth}{0.4pt}
- \fancyhead[LE,RO]{\thepage}
- \geometry{left=1in,top=0.75in,bottom=0.75in}
- \fancyfoot[CE,CO]{{\includegraphics[height=0.5cm]{images/cc-by-nc.png}} Ujaval Gandhi http://www.spatialthoughts.com}
classoption: a4paper
---

## Why Visual Studio Code?

Visual Studio Code (VS Code) is a cross-platform code editor that works on Windows, Linux, MacOS as well as web-browsers. It is based on the open-source Visual Studio Code project. It is one of the most widely used editors and has support for all major programming languages. 

We recommend using Visual Studio Code for all our courses that require a code editor. It has built-in support for editing Jupyter notebooks - making it an ideal editor for Data Science workflows. It also comes with support for AI-Assisted coding and a large ecosystem of Plugins.

## Install Visual Studio Code

### Windows

1. Visit the [Download Visual Studio Code](https://code.visualstudio.com/Download) page and download the *User Installer* for your your processor type. This will download an `.exe` file. Intel-processor based system should download the `x64` version and the ARM-processor based systems should use the `Arm64` version.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_windows1.png')
```

2. Run the downloaded `.exe` file to start the installer. Select *I accept the agreement* and click *Next*.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_windows2.png')
```

3. For *Select Additional Tasks*, you can check all the options and click *Next*.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_windows3.png')
```

4. Confirm the selected options and click *Install*.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_windows4.png')
```

5. Once the installation is complete, check the *Launch Visual Studio Code* option and click *Finish*.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_windows5.png')
```

### Mac

1. Visit the [Download Visual Studio Code](https://code.visualstudio.com/Download) page and download the `Mac` installer. This will download a *Universal* `.dmg` installer.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_mac1.png')
```

2. Once downloaded, double-click the installer to open it.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_mac2.png')
```

3. Drag the *Visual Studio Code* icon to the *Applications* folder.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_mac3.png')
```

4. Open the *Applications* folder and double-click the *Visual Studio Code* application icon to launch it.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_mac4.png')
```

5. You will be prompted with a security warming. Click *Open* 

```{r echo=FALSE, fig.align='center', out.width='50%'}
knitr::include_graphics('images/install_vscode/vscode_mac5.png')
```

### Linux

1. Visit the [Download Visual Studio Code](https://code.visualstudio.com/Download) page and download the `.deb` or `.rpm` installer for your your processor type. 

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_linux1.png')
```

2. Running the installer will depend on your flavor of Linux. On Ubuntu, open a Terminal and `cd` to the directory containing the downloaded installer. Run the installer using the following command.

```bash
sudo dpkg -i <file_name>.deb
```

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_linux2.png')
```

3. When prompted to *Add Microsoft apt repository for Visual Studio Code?*, select `Yes` and press *Enter.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_linux3.png')
```

4. Once the installer finishes, you can launch Visual Studio Code by typing the command `code` in a Terminal.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_linux4.png')
```

## Configure Visual Studio Code

When you first launch the editor, you will need to choose some settings. 

1. Visual Studio Code comes with a free plan of GitHub CoPilot AI Assistant. To enable it, you need to sign-in to your GitHub account. Click *Continue with GitHub* and complete the sign-in to activate the assistant. If you do not want this, click *Continue without Signing In* button at the bottom-right corner.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_configure1.png')
```

2. You will be prompted to choose a *Color Theme*. Select the Light or Dark theme based on your preference and click *Continue*.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_configure2.png')
```

3. Visual Studio Code supports agentic coding via the built-in Chat. Select the *Agent* mode and click *Get Started*.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_configure3.png')
```

4. The editor is now ready to use.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_configure4.png')
```

5. Mac users need to do an extra step to configure their PATH with VS Code. Open the Command Palette by typing in the key combination `Cmd+Shift+P`, type `shell command`, and run the *Shell Command: Install 'code' command in PATH* command.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_configure5.png')
```

## Install Extensions

VS Code has an extensions system that let you add support for different programming languages and tools to help in your development workflow. We will install the following extensions that help in Data Science workflows:

* Python
* Jupyter


1. Click the *Extensions* button on the left-hand panel. 

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/extension1.png')
```

2. Search for  **Python** and select the  **Python by Microsoft** extension. Click *Install*.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/extension2.png')
```

3. Similarly, search for the **Jupyter by Microsoft** extension and install it.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/extension3.png')
```


## Set VS Code as the Default Editor

### Set as the Default Terminal Editor

You can set VS Code as the default editor for Terminal applications like Claude Code. 

#### Windows

We will set VS Code as the default editor for **Windows Powershell**. 

1. Search for Anaconda Powershell Prompt and launch it. Open your PowerShell profile in Notepad by entering the following comand

```{bash eval=FALSE}
notepad $PROFILE
```

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/default_win1.png')
```

2. If you are prompted to create a new file, select **Yes**.

```{r echo=FALSE, fig.align='center', out.width='40%'}
knitr::include_graphics('images/install_vscode/default_win2.png')
```

3. Enter the following content in the file and save it by pressing **File &rarr; Save**. Close the editor.

```{bash eval=FALSE}
$env:EDITOR = "code --wait"
```

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/default_win3.png')
```

Restart Anaconda Powershell for the new configuration to take effect.

#### Mac

We will set VS Code as the default editor for **Terminal**. 

> Make sure you have installed the `code` command from the [Configure VS Code](#configure-visual-studio-code) section before proceeding.

1. Launch a Terminal window. Open your Zsh configuration profile by running the following command

```{bash eval=FALSE}
nano ~/.zshrc
```

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/default_mac1.png')
```

2. This will open your Terminal configuration in the Nano editor. Use your arrow keys to scroll to the bottom of the file and paste the following lines. To save the file in the Nano editor, press the **Ctrl + X** key.

```{bash eval=FALSE}
export EDITOR="code --wait"
export VISUAL="code --wait"
```

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/default_mac2.png')
```

3. Enter **Y** to confirm.

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/default_mac3.png')
```

4. Press **Enter** to confirm the filename. 

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/default_mac4.png')
```

Restart the Terminal for the new configuration to take effect.

#### Linux

Linux systems typically store terminal configuration in the file `.bashrc`. You can add the same configuration as Mac as given above, but replace the `~/.zshrc` with `~/.bashrc` (or equivalent for your shell).

### Set as the Default Git Editor

By default, Git opens the terminal-based text editor Vim (or Vi) for entering commit messages or handling merge conflicts. You can configure your system to use VS Code instead.

*(Windows users)*, search for Windows Powershell and launch it. *(Mac/Linux users)*: Launch a Terminal window. Run the following command

```
git config --global core.editor "code --wait"
```

```{r echo=FALSE, fig.align='center', out.width='75%'}
knitr::include_graphics('images/install_vscode/vscode_git.png')
```

If this command fails, it is most likely that the command `code` is not added to your system path. To fix this, 

* *(Windows and Linux)* The VS Code installer automatically adds the executable path to your system variable during installation. Make sure the option *Add to PATH* is checked during the installation process.
* *(Mac)*: See the [configuration](#configure-visual-studio-code) Step 5 to add the 'code' command in PATH.