Tutorial.qmd

---
title: "AI coding with Visual Studio Code"
format:
    html:
        page-layout: full
        theme: pulse
        highlight: espresso
        css: /home/cdn-bc/Github_repo/fuRsh/inst/resources/styles.css
        smooth-scroll: true
        self-contained: true
        toc-depth: 3
        toc: true
        toc-location: right
        toc-title: Contents
        code-fold: true
        df-print: paged
        grid:
            sidebar-width: 150px
            body-width: 950px
            margin-width: 150px
            gutter-width: 1em
fig-cap-location: margin
tbl-cap-location: margin
fig-align: center
title-block-banner: /home/cdn-bc/Github_repo/fuRsh/man/figures/banner.jpg
title-blocks-style: plain
filters:
   - /home/cdn-bc/Github_repo/fuRsh/inst/resources/include-code-files.lua
editor: visual
date: last-modified
author: 
    - name : Jane Ling
      email : jane.ling@kcl.ac.uk
      orcid : 0000-0003-2443-1561
      affiliation: CDN Bioinformatics Core
      affiliation-url: https://emckclac.sharepoint.com/sites/IoPPNcdnb/SitePages/Bioinformatics.aspx
    - name : Karla Lozano Gonzalez
      email : karla.lozano_gonzalez@kcl.ac.uk
      affiliation: CDN Bioinformatics Core
      affiliation-url: https://emckclac.sharepoint.com/sites/IoPPNcdnb/SitePages/Bioinformatics.aspx
    - name : Fursham Hamid
      email : fursham.hamid@kcl.ac.uk
      url : https://twitter.com/FurshamH
      orcid : 0000-0002-6846-7382
      affiliation: CDN Bioinformatics Core
      affiliation-url: https://devneuro.org/cdn/index.php
---

## Contents

1. [Getting a GitHub account](#getting-a-github-account)
2. [Installation of VS Code](#installation)
   - [Linux](#linux)
   - [macOS](#macos)
   - [Windows](#windows)
3. [Installation of VS Code extensions](#installation-of-vs-code-extensions)
   - [Programming Language Support](#programming-language-support)
   - [AI & Intelligent Coding](#ai--intelligent-coding)
      - [Installing GitHub Copilot](#installing-github-copilot)
   - [Version Control & Collaboration](#version-control--collaboration)
   - [Remote Development & Computing Infrastructure](#remote-development--computing-infrastructure)
4. [Enable AI features](#enable-ai-features)
   - [Opening the GitHub Copilot Chat](#opening-the-github-copilot-chat)
   - [Using AI Chat for Coding](#using-ai-chat-for-coding)
   - [Using AI Coding Inline](#using-ai-coding-inline)
5. [Task of the day](#task-of-the-day)
   - [Open a folder in VS Code](#open-a-folder-in-vs-code)
   - [Create a simple project using AI chatbox](#create-a-simple-project-using-ai-chatbox)
      - [Example 1: Filtering a gene expression table](#example-1-filtering-a-gene-expression-table)
      - [Tips for coding with AI](#tips-for-coding-with-ai)
   - [Upload to GitHub repositories](#upload-to-github-repositories)

## Getting a GitHub account

To use GitHub Copilot and other GitHub-integrated features in VS Code, you'll need a GitHub account.

1.  Visit [https://github.com/signup](https://github.com/signup) in your web browser.

2.  Enter your email address and click **Create an account**.

3.  Choose a username and password when prompted.

4.  Verify your email address by clicking the verification link sent to your email.

5.  Complete the account setup by answering the GitHub personalization questions (you can skip these if preferred).

6.  Once your account is created, you can sign in to GitHub and use it to authenticate with VS Code extensions like GitHub Copilot.

7.  Register for [GitHub Education](https://github.com/education) for free subscription to GitHub Copilot Pro.

## Installation of VS Code

Download visual studio code according to your operating system - [visualstudio](https://code.visualstudio.com/download).

### Linux

1.  The easiest way to install Visual Studio Code for Debian/Ubuntu based distributions is to download the *`.deb (64-bit)`* from - [visualstudio](https://code.visualstudio.com/download) and install through the command line with:

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

# If this does not work, you will need to run this instead:
# sudo apt install ./<file>.deb
# sudo apt-get install -f # Install dependencies
```

2.  To automatically install the apt repository and signing key, such as on a non-interactive terminal, run the following command first:

``` bash
echo "code code/add-microsoft-repo boolean true" | sudo debconf-set-selections
```

If the previous does not work you can manually install the apt repository:

i.  Run the following script to install the signing key:

``` bash
sudo apt-get install wget gpg &&
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg &&
sudo install -D -o root -g root -m 644 microsoft.gpg /usr/share/keyrings/microsoft.gpg &&
rm -f microsoft.gpg
```

ii. Create a `/etc/apt/sources.list.d/vscode.sources` file with the following contents to add a reference to the upstream package repository:

``` text
Types: deb
URIs: https://packages.microsoft.com/repos/code
Suites: stable
Components: main
Architectures: amd64,arm64,armhf
Signed-By: /usr/share/keyrings/microsoft.gpg
```

iii. Lastly, update the package cache and install the package:

``` bash
sudo apt install apt-transport-https &&
sudo apt update &&
sudo apt install code # or code-insiders
```

### macOS

1.  After downloading the Visual Studio Code for macOS from - [visualstudio](https://code.visualstudio.com/download). Open the browser's download list and locate the downloaded app or archive.

2.  If archive, extract the archive contents. Use double-click for some browsers or select the 'magnifying glass' icon with Safari.

3.  Drag `Visual Studio Code.app` to the **Applications** folder, making it available in the macOS Launchpad.

4.  Open VS Code from the **Applications** folder, by double clicking the icon.

5.  Add VS Code to your Dock by right-clicking on the icon, located in the Dock, to bring up the context menu and choosing **Options**, **Keep in Dock**.

6.  To run VS Code from the terminal by typing `code`, add it to the `$PATH` environment variable:

    i.  Run the following commands:

        ``` zsh
        cat << EOF >> ~/.zprofile
        # Add Visual Studio Code (code)
        export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
        EOF
        ```

        ``` bash
        cat << EOF >> ~/.bash_profile
        # Add Visual Studio Code (code)
        export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
        EOF
        ```

    ii. Start a new terminal to pick up your changes.

        You can now type 'code .' in any folder to start editing files in that folder.

### Windows

1.  Download the Visual Studio Code installer for Windows from - [visualstudio](https://code.visualstudio.com/download).

2.  Once it is downloaded, run the installer *`(VSCodeUserSetup-{version}.exe)`*. By default, VS Code is installed under `C:\Users\{Username}\AppData\Local\Programs\Microsoft VS Code`.

Setup adds Visual Studio Code to your `%PATH%` environment variable, to let you type `code` in the console to open VS Code on that folder. You need to restart your console after the installation for the change to the `%PATH%` environmental variable to take effect.

## Installation of VS Code extensions

Launch VS Code and bring up the Extensions view with the shortcut (`Ctrl+Shift+X`)

This will show you a list of the most popular VS Code extensions on the [VS Code Marketplace](https://marketplace.visualstudio.com/VSCode).

To install an extension, select the **Install** button. Once the installation is complete, the **Install** button will change to the **Manage** gear button.

### Programming Language Support

-   **Python** \[ms-python.python\] - Comprehensive Python development with IntelliSense, linting, debugging, and code formatting support.

-   **R** \[reditorsupport.r\] - Full R language support including syntax highlighting, code completion, and integrated R terminal for statistical computing.

-   **Matlab** \[mathworks.language-matlab\] - MATLAB language support with syntax highlighting, code snippets, and editor features for numerical computing.

-   **IJM Scanner** \[ijm-scanner\] - Image processing and scanning support for scientific imaging and analysis tasks using imagej/fiji macro.

-   **Jupyter Notebook** \[ms-toolsai.jupyter\] - Create, edit, and run interactive Jupyter notebooks directly in VS Code with rich output visualization and kernel management.

### AI & Intelligent Coding

-   **Github Copilot Chat** \[github.copilot-chat\] - AI-powered coding assistant that provides intelligent code suggestions, explanations, and help with debugging and problem-solving.

-   **Claude Code** \[claude-code\] - AI-powered coding assistant with advanced code generation, refactoring, and problem-solving capabilities using Claude's language model.

-   **Codex** \[openai.codex\] - OpenAI's Codex model for intelligent code completion, generation, and translation across multiple programming languages.

#### Installing GitHub Copilot

1.  Open VS Code and bring up the Extensions view with the shortcut (`Ctrl+Shift+X`).

2.  Search for **GitHub Copilot** and click **Install** on the official GitHub Copilot extension.

3.  After installation, you'll be prompted to sign in with your GitHub account. Click **Sign In** and follow the authentication flow.

4.  If you don't have a GitHub account or GitHub Copilot subscription, visit [https://github.com/features/copilot](https://github.com/features/copilot) to register for a **30-day free trial**.

5.  Complete the sign-up process and return to VS Code. Once authenticated, GitHub Copilot will be ready to use.

### Version Control & Collaboration

-   **Github Pull Requests** \[github.vscode-pull-request-github\] - Native Git integration for version control and GitHub integration for managing repositories, pull requests, and collaborative development.

### Remote Development & Computing Infrastructure

-   **Remote - SSH** \[ms-vscode-remote.remote-ssh\] - Connect to and develop on remote machines via SSH, allowing you to work with files and run code on distant servers or HPC clusters.

-   **Remote Explorer** \[ms-vscode-remote.remote-explorer\] - Graphical interface for managing and connecting to remote machines, containers, and WSL environments with an intuitive explorer view.

-   ***Try Connect to [HPC CREATE](https://docs.er.kcl.ac.uk/CREATE/access/)***
    -  To do that, you will need to [add a SSH key on the e-Research portal](https://portal.er.kcl.ac.uk/access/ssh).
    -  Follow the instruction [here](https://docs.er.kcl.ac.uk/CREATE/access/) to create a SSH configuration file.
    -  If you experience connection time-out to HPC CREATE, check that you have [approved access on the e-Research Portal](https://portal.er.kcl.ac.uk/mfa))

## Enable AI features

### Opening the GitHub Copilot Chat

1.  With GitHub Copilot Chat extension installed, open the Chat view by using the keyboard shortcut `Ctrl+Alt+I` (or `Cmd+Alt+I` on macOS).

2.  Alternatively, you can click the **Chat** icon in the View menu at the top of VS Code.

3.  The Chat panel will open on the right side of your editor, ready for you to type questions or prompts.

### Using AI Chat for Coding

1.  **Ask for Code Generation**: Type a description of what you want to code. For example: "Write a Python function to calculate the factorial of a number".

2.  **Get Explanations**: Select code in your editor and ask Copilot to explain what it does. Type your question in the Chat box and include the code context.

3.  **Debugging Help**: Paste error messages or problematic code into the Chat and ask Copilot to help identify and fix the issue.

4.  **Code Refactoring**: Ask Copilot to improve your code. For example: "Refactor this function to be more efficient" or "Add error handling to this code".

5.  **Documentation**: Request that Copilot generate comments or docstrings for your code by asking "Add documentation to this function".

6.  **Using Code from Chat**: When Copilot provides code suggestions in the Chat, you can click the **Copy** button to copy the code, or use the **Insert** button to add it directly to your editor.

### Using AI Coding Inline

1.  **Open Inline Chat**: Select code in your editor or position your cursor where you want assistance. Press `Ctrl+I` (or `Cmd+I` on macOS) to open the inline chat.

2.  **Ask for Help**: Type your request directly in the inline chat box. For example: "Add error handling" or "Optimize this loop".

3.  **Review Suggestions**: Copilot will provide suggestions inline within your code. You can see the proposed changes highlighted in your editor.

4.  **Accept or Reject**: Use the **Accept** button to apply the changes, or **Reject** to dismiss them. You can also manually edit the suggestions.

5.  **Common Inline Tasks**:
    - Type `/fix` to automatically fix errors
    - Type `/explain` to get an explanation of selected code
    - Type `/generate` to generate code based on your description
    - Type `/doc` to add documentation to your code

6.  **Multiple Iterations**: You can continue refining with follow-up prompts in the same inline chat session to get exactly what you need.

## Task of the day

### Open a folder in VS Code

You can use VS Code to work on individual files to make quick edits, or you can open a folder, also known as a *workspace*.

Let's start by creating a folder and opening it in VS Code. You'll use this folder throughout the tutorial.

1.  Open Visual Studio Code.

    When you first open VS Code, you should see the **Welcome** page with different actions to get started.

2.  Select **File** \> **Open Folder...** from the menu to open a folder.

3.  Select **New Folder**, create a new folder named `vscode101`, and then select **Select Folder** (**Open** on macOS).

    The folder you create is the root of your workspace.

4.  On the Workspace Trust dialog, select **Yes, I trust the authors** to enable all features in the workspace.

5.  You should now see the **Explorer** view on the left, showing the name of the folder.

    You'll use the Explorer view to view and manage the files and folders in your workspace.

### Create a simple project using AI chatbox

#### Example 1: Filtering a gene expression table

Create a Python project using Pixi that loads gene expression data from a CSV file, filters it by genes listed in a codebook file, and maintains the gene order from the codebook.

(**Note**: Pixi is a convenient environment-control tool. It is not strictly necessary for this project. You can replace it with conda or other tools that perform the same function.)

**Setup Pixi environment (pixi.toml)**

-   Configure Python 3.11 and pandas as dependencies
-   Set up conda-forge channel
-   Define supported platforms

**Create data loading script (load_data.py)**

-   Accept two command-line arguments using argparse:
    -   CSV file path (e.g., `DevVIS_p13_subset.csv`)
    -   Codebook file path (e.g., `codebook_73g_ctx.txt`)
-   Parse codebook file to extract gene names (first column before tab character)
-   Filter CSV dataframe to keep only genes in the codebook
-   Reorder filtered dataframe rows to match codebook gene order
-   Display gene list, filtered shape, and preview of results
-   Save filtered gene list as a csv file

**Create automation script (run.sh)**

-   Run `pixi install` to set up the environment
-   Execute the data loading script with the correct file paths

**Create documentation (README.md)**

-   Include setup instructions for Pixi
-   Provide usage example with the script command

The workflow can be executed with: `bash run.sh`

### Tips for coding with AI

-   Break down a project/task into smaller steps.
-   Give clear instructions for each step.
-   Specify data format of inputs and outputs. You can point to/attach files as example inputs.
-   Specify packages/functions you want to use, if any.
-   Prompt AI to ask you questions so that it can understand the task better.
-   **It may take some iterations to get things right. Don't be frustrated if the first answer doesn't meet your standard.**
-   Copy and paste any error or warning to chatbox for debugging.
-   Here is an example prompt to create a new project

    ```default
    Create a python script (name of script) that takes (inputs), performs (processing), and gives (outputs).
    Use argparse to pass inputs to the function.
    Example of input file can be found in (filepath).
    Add verbose print-outs for debugging.
    Use pixi for environment control. 
    Add a bash script to perform pixi install and pixi run script. 
    Include a readme file.
    You can ask me questions to clarify before performing the tasks.
    ```


### Upload to GitHub repositories

1.  **Initialize a local Git repository**:

    ```bash
    cd vscode101
    git init
    git add .
    git commit -m "Initial commit: Gene expression data loading project"
    ```

2.  **Create a new repository on GitHub**:

    - Go to [https://github.com/new](https://github.com/new)
    - Enter the repository name (e.g., `gene-expression-loader`)
    - Add a description (optional)
    - Choose **Public** or **Private** visibility
    - Click **Create repository**

3.  **Connect your local repository to GitHub**:

    ```bash
    git remote add origin https://github.com/YOUR_USERNAME/gene-expression-loader.git
    git branch -M main
    git push -u origin main
    ```

    Replace `YOUR_USERNAME` with your GitHub username and `gene-expression-loader` with your repository name.

4.  **Verify the upload**:

    - Visit `https://github.com/YOUR_USERNAME/gene-expression-loader` to confirm your project is on GitHub
    - Check that all files are present: `pixi.toml`, `load_data.py`, `run.sh`, and `README.md`

5.  **Make future updates** (after making changes locally):

    ```bash
    git add .
    git commit -m "Describe your changes here"
    git push
    ```