A Pragmatic Guide to GitHub Copilot and VS Code

In this tutorial, we will explore how to configure VS Code and leverage custom rules to get the absolute best out of the built-in GitHub Copilot extension.

Using Copilot in this targeted manner ensures that you maintain the reins of development. You direct the architecture, while the AI builds precisely to your specifications. This stands in stark contrast to “all-the-way” autonomous AI tools that auto-generate entire codebases blindly—often raising serious questions about code quality and long-term maintainability.

For our demo, we will build a Trainee Attendance App using the React Native (Expo) framework.

1. Setting Up the Workspace

Assuming you have latest Node.js installed on your system, open your terminal and initialize the project by executing:

Bash

npx create-expo-app attendance-app --template expo-template-blank-typescript
cd attendance-app
npm install expo-location

If you plan to test and render the application on a web browser, install the required web dependencies:

Bash

npx expo install react-dom react-native-web

Now, open the project inside VS Code:

Bash

code . &

2. Setting Up Your Global “House Rules”

GitHub Copilot natively looks for a specific file at the root of your workspace to act as its overarching system prompt. Every single chat prompt and inline code suggestion in VS Code will automatically adhere to this file first.

Step 1: Create .github/copilot-instructions.md

Create the folder structure and the markdown file, then paste the following guidelines into it:

Markdown

# Role & Tech Stack
You are an expert React Native (Expo) and TypeScript engineer. We are building a Trainee Attendance App with Geofencing capability.

# Core Rules
- Always use TypeScript with explicit typing.
- Always implement clean error handling for native device features (like GPS permissions).
- Keep code clean, scannable, and modular.

To keep Copilot’s generation hyper-focused, we need to provide it with explicit domain knowledge. Let’s create our feature specifications and data schemas.

Step 2: Create the Context Files

Run the following command in your terminal to create two context files:

Bash

touch features.md database-schema.md

Step 3: Populate features.md

Open features.md and insert the product requirements:

Markdown

# Product Features

## 1. Authentication
- 1.1 Simple trainee login via Email/Password or Magic Link.

## 2. Attendance & Geofencing
- 2.1 Fetch the training center's coordinates (Latitude, Longitude) and allowed radius (e.g., 100 meters).
- 2.2 Request device GPS permissions.
- 2.3 Calculate distance between trainee and center using the Haversine formula.
- 2.4 Enable a "Check-In" button ONLY if the user is within the radius. Otherwise, show an "Out of Range" warning.

Step 4: Populate database-schema.md

Open database-schema.md and define the local state structure:

Markdown

# Data Schema (Mock/Local State)

## Trainee Profile
- id: string
- name: string
- assigned_venue: Venue

## Venue
- id: string
- name: string
- latitude: number
- longitude: number
- radius_meters: number (Default: 100)

3. The Copilot “Vibe Coding” Workflow

Because Copilot operates natively within your editor as an assistant rather than an autonomous agent, you must use Copilot Chat (Ctrl+Alt+I on Windows/Linux or Cmd+Alt+I on macOS) as your Senior Technical Designer, and yourself as the hands-on pilot and typist.

When chatting with Copilot, you will explicitly reference your context files using the # symbol.

Generating the Core Logic

To build the geofencing logic, open Copilot Chat and type:

@workspace #features.md #database-schema.md Create the custom hook src/hooks/useGeofencing.ts to check if a trainee is within the venue radius using the Haversine formula. Provide the complete code block.

Why this works beautifully: @workspace tells Copilot to scan your directory index, while #features.md and #database-schema.md force it to strictly respect the boundaries and implementation rules you defined.

Generating the User Interface

Next, select App.tsx so it becomes the active context in Copilot Chat, and try one of the following prompts to build the UI:

Add a menu in the app, also add UI to test useGeofencing hook. Keep existing boilerplate structure intact.

Or, for a more polished UI response:

Add an elegant Check-In button here that lights up green if useGeofencing returns true, and is disabled with an 'Out of Range' notice if false.

4. Running the Application

Once Copilot generates the code you can keep (save) it. Finally, verify the application by spinning up the development server:

Bash

npm run web

By leveraging .github/copilot-instructions.md and referencing specific markdown documentation via #, you transform Copilot from a generic code predictor into a bespoke software architect tailored precisely to your project’s ecosystem.